vue单页应用中设置网页标题

2017-12-06

在vue-router的单页应用中，你可能需要在不同的路由设置不同的网页标题，如果你在单文件组件里直接使用document.title来设置页面标题，是不生效的。像这样：

1
2
3

mounted() {
    document.titile = 'title';
}

这样是不生效的。

这里有两种方式可以做到这样的功能。一是在路由里定义对应的组件标题，然后在路由钩子里动态设置，但是这种方式在iOS app下不能被支持，因为它不允许动态改变网页标题。二是通过vue指令，在路由切换完成后，静默加载一个空的iframe来设置title。

第一种方式实现如下：

router.beforeEach((to, from, next) => {
  document.title = to.extra.title;
  next();
});

对应部分路由定义：

const routers = [{
    path: '/',
    extra: {
        title: '首页'
    }
}]

第二种方式实现：

先定义一个函数用来动态修改标题。

export const setMetaTitle = title => {
  document.title = title;
  const mobile = navigator.userAgent.toLowerCase();
  if (/iphone|ipad|ipod/.test(mobile)) {
    let iframe = document.createElement('iframe');
    iframe.style.visibility = 'hidden';
    iframe.setAttribute('src', 'https://www.baidu.com/');
    const iframeCallback = () => {
      setTimeout(() => {
        iframe.removeEventListener('load', iframeCallback);
        document.body.removeChild(iframe);
      }, 0);
    }
    iframe.addEventListener('load', iframeCallback);
    document.body.appendChild(iframe);
  }
}

再在vue的入口点比如app.js里，定义一个vue指令：

import { setMetaTitle } from '@/common/utils'; 
Vue.directive('title', {
  inserted(el, binding) {
    setMetaTitle(binding.value);
  }
});

最后在你的组件里添加这个指令：

<template>
    <div v-title="这里是你的标题"></div>
</template>
<script>
    export default {}
</script>

推荐第二种方式实现，没毛病。

展开全文 >>

精通JavaScript正则之正则原理

2017-12-03

1、为什么要知道些正则匹配原理

知其然，知其所以然。

2、正则匹配引擎

正则引擎大体上可分为不同的两类：DFA和NFA。DFA(Deterministic finite automaton) 确定型有穷自动机，NFA (Non-deterministic finite automaton)　非确定型有穷自动机。

2.1 NFA

传统的NFA引擎：运行匹配回溯算法——以指定顺序测试正则表达式的所有可能的扩展并接受第一个匹配项。因为传统的 NFA 构造正则表达式的特定扩展以获得成功的匹配，所以它可以捕获子表达式匹配和匹配的反向引用。但传统 NFA的 回溯使它可以访问完全相同的状态多次（如果通过不同的路径到达该状态）。因此，在最坏情况下，它的执行速度可能非常慢。因为传统的 NFA 接受它找到的第一个匹配，所以它还可能会导致其他（可能更长）匹配未被发现。

POSIX NFA 引擎：与传统 NFA 引擎类似，不同点：在可以确保已找到了可能的最长的匹配之前，它们将继续回溯（更慢）；并且在使用 POSIX NFA 时，您恐怕不会愿意在更改回溯搜索的顺序的情况下来支持较短的匹配搜索，而非较长的匹配搜索。

2.2 DFA

DFA引擎：在线性时状态下执行，不要求回溯（因此永远不测试相同的字符两次）；确保匹配最长的可能的字符串；因为只包含有限的状态（？），所以它不能匹配具有反向引用的模式；并且因为它不构造显示扩展，所以它不可以捕获子表达式。

例：

字符串：this is yansen’s dog

正则表达式：/ya(msen|nsen|nsem)/

NFA工作方式：先在字符串中查找y，然后匹配其后是否为a；如果是a则继续查找其后是否为m；如果不是则匹配其后是否为n(此时淘汰msen支分支)；然后继续看其后是否依次为s,e；接着测试是否为n，是n则匹配成功，不是则测试是否为m。为什么是 m ？因为 NFA 工作方式是以正则表达式为标准，反复测试字符串，这样同样一个字符串有可能被反复测试了很多次！

DFA工作方式：从this中t开始依次查找y，定位到y，已知其后为a，则查看表达式是否有a，此处正好有a；然后字符串a后为n，DFA依次测试表达式，此时msen不符合要求淘汰。nsen和nsem符合要求，然后DFA依次检查字符串，检测到sen中的n时只有nsen分支符合，则匹配成功！

3、基础知识

3.1 字符串组成

对于字符串“reg”而言，包括三个字符和四个位置，位置0在r前面，位置4在g后面。

3.2 占有字符和零宽度

正则表达式匹配过程中，如果子表达式匹配到的是字符内容，而非位置，并被保存到最终的匹配结果中，那么就认为这个子表达式是占有字符的；如果子表达式匹配的仅仅是位置，或者匹配的内容并不保存到最终的匹配结果中，那么就认为这个子表达式是零宽度的。

占有字符是互斥的，零宽度是非互斥的。也就是一个字符，同一时间只能由一个子表达式匹配，而一个位置，却可以同时由多个零宽度的子表达式匹配。

3.3 控制权和传动

正则的匹配过程，通常情况下都是由一个子表达式（可能为一个普通字符、元字符或元字符序列组成）取得控制权，从字符串的某一位置开始尝试匹配，一个子表达式开始尝试匹配的位置，是从前一子表达匹配成功的结束位置开始的。如正则表达式：

(子表达式一)(子表达式二)

假设**(子表达式一)为零宽度表达式，由于它匹配开始和结束的位置是同一个，如位置0，那么(子表达式二)**是从位置0开始尝试匹配的。

假设**(子表达式一)为占有字符的表达式，由于它匹配开始和结束的位置不是同一个，如匹配成功开始于位置0，结束于位置2，那么(子表达式二)**是从位置2开始尝试匹配的。

而对于整个表达式来说，通常是由字符串位置0开始尝试匹配的。如果在位置0开始的尝试，匹配到字符串某一位置时整个表达式匹配失败，那么引擎会使正则向前传动，整个表达式从位置1开始重新尝试匹配，依此类推，直到报告匹配成功或尝试到最后一个位置后报告匹配失败。

4、正则表达式简单匹配过程

4.1 基础匹配过程

原字符串：reg

正则表达式：/reg/

匹配过程：由字符r取得控制权，从位置0开始匹配，由r来匹配r，匹配成功，控制权交给字符e，因为之前字符r从位置0已经匹配成功，所以字符e从位置1开始匹配，e匹配e，匹配成功，接着到字符g匹配g，也匹配成功。

正则表达式匹配完成，匹配结果为reg，开始位置0，结束位置3。

4.2 含有量词的匹配过程（1）

原字符串：reg

正则表达式：/re?g/

量词?属于优先匹配量词，在可匹配可不匹配时，会优先选择尝试匹配，当这种选择使得整个表达式无法匹配成功时，才会让出匹配的内容。

匹配过程：由字符r取得控制权，从位置0开始匹配，r匹配r，匹配成功，控制权交给e?，e?尝试优先匹配e，匹配成功，控制权交给g，且保留一个备选状态，最后由g匹配g，匹配成功，丢弃备选状态，匹配结束。

4.3 含有量词的匹配过程（2）

原字符串：rg

正则表达式：/re?g/

匹配过程：由字符r取得控制权，从位置0开始匹配，r匹配r，匹配成功，控制权交给e?，e?匹配g，匹配失败，保留一个备选状态，由于匹配失败，进行回溯，找到备选状态，此时控制权到g，字符g匹配g，匹配成功。

4.4 含有量词的匹配过程（3）

原字符串：reg

正则表达式：/re?x/

匹配过程：由字符r取得控制权，从位置0开始匹配，r匹配r，匹配成功，控制权交给e?，e?尝试优先匹配e，匹配成功，控制权交给x，且保留一个备选状态，x匹配g，匹配失败，此时进行回溯，找到记录的备选状态，此时控制权交给x，x匹配e，匹配失败，第一轮匹配失败。

正则引擎使正则向前传动，由位置1开始尝试匹配，由r匹配e，匹配失败，没有备选状态，第二轮匹配尝试失败。正则引擎继续向前传动，知道位置3匹配失败，匹配结束，此时整个正则表达式匹配失败。

4.5 零宽度匹配过程

源字符串：a12

正则表达式：^(?=[a-z])[a-z0-9]+$

元字符^和$匹配的只是位置，顺序环视(?=[a-z])只进行匹配，并不占有字符，也不将匹配的内容保存到最终的匹配结果，所以都是零宽度的。

匹配过程：从元字符^开始，匹配位置0，匹配成功，控制权交给顺序环视(?=[a-z])；

(?=[a-z])要求它所在位置右侧必须是字母才能匹配成功，零宽度的子表达式之间是不互斥的，即同一个位置可以同时由多个零宽度子表达式匹配，所以它也是从位置0尝试进行匹配，位置0的右侧是字符“a”，符合要求，匹配成功，控制权交给[a-z0-9]+；

因为(?=[a-z])只进行匹配，并不将匹配到的内容保存到最后结果，并且(?=[a-z])匹配成功的位置是位置0，所以[a-z0-9]+也是从位置0开始尝试匹配的，[a-z0-9]+首先尝试匹配a，匹配成功，继续尝试匹配，可以成功匹配接下来的1和2，此时已经匹配到位置3，位置3的右侧已没有字符，这时会把控制权交给$；

$匹配结束位置，也就是位置3，匹配成功。

参考资料：

精通JavaScript正则之正则基础

2017-11-05

1.正则结构定义

有两种方式可以定义一个正则表达式

1	var reg = /pattern/;

或者

1	var reg = new RegExp('pattern'); // 动态匹配

2.正则标识

标识	含义
g	全局（匹配多次；不同的方法对g标识的处理不同）
i	忽略字符的大小写
m	匹配多行（在此标识下，^和$能匹配行结束符）

3.正则对象属性

属性	用法
global	如果标识 g 被使用，值为true
source	正则表达式源码文本
ignoreCase	如果标识 i 被使用，值为true
lastIndex	下一次exec匹配开始的索引。初始值为0
multiline	如果标识 m 被使用，值为true

4.元字符

字符的类集，比如不确定的数字、任意字符、空白符、结束符

// 匹配数字:  \d
"ad3ad2ad".match(/\d/g);  // ["3", "2"]
// 匹配除换行符以外的任意字符:  .
"a\nb\rc".match(/./g);  // ["a", "b", "c"]
// 匹配字母或数字或下划线 ： \w
"a5_  汉字@!-=".match(/\w/g);  // ["a", "5", "_"]
// 匹配元音字母的字符组
"adefglhi".match(/[aeiou]/g); // ["a", "e", "i", ]

注意，在字符组内部，一个^表示的是排除组内字符，并不是匹配行开始，就像’|'、-'一样，在字符组内外有着不同的含义

字符组与多选结构的区别：字符组里面只匹配单个的字符，而多选结构本身就是一个正则

5.量词

每一个正则因子都可以用一个正则量词后缀来决定这个因子因该被匹配的次数。包围在一对花括号中的一个数字表示这个因子因该被匹配的次数。？号表示可选，就等同于{0, 1}，*等同于{0, }，+则等同于{1, }。

1
2
3

// 重复0次或多次
"test".match(/test\d*/); // ["test"]
"test123".match(/test\d*/); // ["test123"]

从上面的结果可以看到正则匹配的子字符串会尽可能返回多的数字，这就是在满足条件的情况下捕获尽可能多的字符-贪婪模式。

对应的”懒惰模式“，就是在满足条件的情况下捕获尽可能少的字符串，使用懒惰模式的方法，就是在字符重复标识后面加上一个 "?"

// 数字重复3~5次，满足条件的情况下返回尽可能少的数字
"test12345".match(/test\d{3,5}?/);  // ["test123"]
// 数字重复1次或更多，满足条件的情况下只返回一个数字
"test12345".match(/test\d+?/);  // ["test1"]

6.字符转义

在正则表达式中元字符是有特殊的含义的，当我们要匹配元字符本身时，就需要用到字符转义。

1	/\./.test("."); // true

7.分支

当正则表达式需要匹配几种类型的结果时，可以用到分支

1
2
3

"asdasd hi  asdad hello asdasd".replace(/hi|hello/,"nihao"); // "asdasd nihao  asdad hello asdasd"
"asdasd hi  asdad hello asdasd".split(/hi|hello/); // ["asdasd ", "  asdad ", " asdasd"]

分支条件影响它两边的所有内容，比如 hi|hello 匹配的是hi或者hello，而不是 hiello 或者 hhello。分组中的分支条件不会影响分组外的内容

1	"abc acd bbc bcd ".match(/(a\|b)bc/g); // ["abc", "bbc"]

8.分组

捕获型：一个捕获型分组是一个被包围在圆括号中的正则表达式分支。任何匹配这个分组的字符都会被捕获。每个捕获型分组都被指定了一个数字代表分组号。

非捕获型：非捕获型分组有一个(?:前缀。非捕获型分组仅做简单的匹配，并不会捕获所匹配的文本，也不会干扰捕获型分组的编号。

向前正向匹配：向前正向匹配分组有一个(?=前缀，类似于非捕获型分组，实际上不捕获任何匹配文本，也不分配组号。在这个组匹配后，文本会倒回到它开始的地方。

1	/hello\s(?=world)/.exec("asdadasd hello world asdasd") // ["hello "]

向前负向匹配：向前负向匹配分组有一个(?!前缀。它也类似于非捕获型分组，不捕获任何匹配文本，不分配组号。只有当它匹配失败时才继续向前匹配。

1	/hello\s(?!world)/.exec("asdadasd hello world asdasd") // null

9.后向引用

正则表达式的分组可以在其后边的语句中通过 \ 紧接着一个数字组号来引用

1 2	// 匹配重复的单词 /(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf hello hello asd"); // ["hello hello", "hello"]

10.方法

RegExp.prototype.test

用来测试字符串中是否含有子字符串

1	/hello/.test("abchello"); // true

RegExp.prototype.exec

这个方法从字符串中捕获满足条件的字符串到结果数组中，值得注意的是，这个方法一次只能捕获一份子字符串到结果数组中，无论正则表达式是否有全局属性。

1 2	var reg=/hello/g; reg.exec("abchelloasdasdhelloasd"); // ["hello"]

如何做全局匹配？

在正则表达式中有分组的情况下，无论正则表达式是否有全局属性，exec函数都只返回一个结果，并捕获分组的结果。

1	/h(ell)o/g.exec("abchellodefhellog"); // ["hello", "ell"]

String.prototype.search

用来找出原字符串中某个子字符串首次出现的index，没有则返回-1

1	"abchello".search(/hello/); // 3

String.prototype.replace

用来替换字符串中的子串

1	"abchello".replace(/hello/,"hi"); // "abchi"

正则表达式存在分组的情况下，第二个参数里边可以用 $ 紧接着一个数字组号来指代第几个分组的内容

1	" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript "

String.prototype.split

用来分割字符串

1	"abchelloasdasdhelloasd".split(/hello/); // ["abc", "asdasd", "asd"]

String.prototype.match

用来捕获字符串中的子字符串到一个数组中。默认情况下只捕获一个结果到数组中，正则表达式有”全局捕获“的属性时(定义正则表达式的时候添加参数g)，会捕获所有结果到数组中。

1
2
3

"ahelloasdasdhelloasd".match(/hello/);  // ["hello"]
"ahelloasdasdhelloasd".match(/hello/g);  // ["hello","hello"]

当没有全局属性，但是正则表达式有分组时，会返回分组匹配结果。

1	"abchellodefhellog".match(/h(ell)o/); // ["hello", "ell"]

一个例子

1	var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]))?(?:\?([^#]))?(?:#(.*))?$/;

One more thing...

展开全文 >>

数据双向绑定

2017-11-05

1.我们要做什么
2.Object.defineProperty()
3.保存旧值
4.监测数组变化
5.模板映射

1.我们要做什么

实现一个迷你库，检测一组数据的变化，当数据变化的时候，做出响应。大致像下面的使用方式：

// 定义一个变化通知的回调
var callback = function(newVal, oldVal){
    alert(newVal + '----' + oldVal);
};
// 定义一个普通对象作为数据模型
var data = {
    a: 200,
    level1: {
        b: 'str',
        c: [1, 2, 3],
        level2: {
            d: 90
        }
    }
}
// 实例化一个监测对象，去监测数据，并在数据发生改变的时候作出反应
var v = new Mvvm(data, callback);

怎么实现？

2.Object.defineProperty()

我们可以使用下面的方式定义一个对象，并给对象添加一个属性。

1
2
3

var obj = {};
obj.name = 'hcy';

也可以使用Object.defineProperty()给对象添加属性，上面的代码等价于

var obj = {};
Object.defineProperty(obj, 'name', {
	value: 'hcy',		// 属性的值
	writable: true,		// 是否可写
	enumerable: true,	// 是否能够通过for in 枚举
	configurable: true	// 是否可使用 delete删除
})

这样定义的属性是数据属性，用来描述数据。还有另外一个访问器属性，允许你定义一对儿 getter/setter ，当你读取属性值的时候底层会调用 get 方法，当你去设置属性值的时候，底层会调用 set 方法。

这简直太美妙了，这不正是我们想要的吗？

遍历对象的属性，把对象的属性都使用 Object.defineProperty 转为 getter/setter ，这样，当我们修改一些值得时候，就会调用set方法，然后我们在set方法里面，回调通知，这样不就可以了吗？

const OP = Object.prototype;
class Mvvm{
    constructor(obj, callback){
        if(OP.toString.call(obj) !== '[object Object]'){
            console.error('This parameter must be an object：' + obj);
        }
        this.$callback = callback;
        this.observe(obj);
    }
    
    observe(obj){
        Object.keys(obj).forEach(function(key, index, keyArray){
            var val = obj[key];
            Object.defineProperty(obj, key, {
                get: function(){
                    return val;
                },
                set: (function(newVal){
                    this.$callback(newVal);
                }).bind(this)
            });
            
            if(OP.toString.call(obj[key]) === '[object Object]'){
                this.observe(obj[key]);
            }
            
        }, this);
        
    }
}

测试一下我们的代码

3.保存旧值

现在我们成功的监测到数据变化并且做出响应了。但是这个响应只处理了新值，有时候我们是需要旧值的，现在我们的代码还无法传递旧值，怎么改？

var oldVal = obj[key];
Object.defineProperty(obj, key, {
    get: function(){
        return oldVal;
    },
    set: (function(newVal){
        if(oldVal !== newVal){
            if(OP.toString.call(newVal) === '[object Object]'){
                this.observe(newVal);
            }
            this.$callback(newVal, oldVal);
            oldVal = newVal;
        }
        
    }).bind(this)
});

看下效果

4.监测数组变化

这样子看上去还不错了哦，我们能够监测到数据的变化，拿到了新旧数据。但是这样就完了吗？

遗憾的是我们还不能监测到数组的变化。比如：

1	data.level1.c.push(4);

有什么思路可以解决这个问题？重写原型方法可以吗？像是这样：

Array.prototype.push = function(){
    // 数据观察
}
Array.prototype.pop = function(){
    // 数据观察
}

暂且不说能不能全部实现的与原生无异，即使你实现的与原生方法在使用方式上一模一样，并且不影响其他代码的运行，那么在性能上，可能就与原生差很多了，重新考虑，我们可不可以在原型链中加一层fakePrototype，在使用 push 等数组方法的时候，调用的是 fakePrototype 上的push方法，然后在 fakePrototype 方法中再去调用真正的Array原型上的 push 方法，同时监听变化。

/*
 *  Object 原型
 */
const OP = Object.prototype;
/*
 *  需要重写的数组方法 OAR 是 overrideArrayMethod 的缩写
 */
const OAM = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
class Mvvm{
    constructor(obj, callback){
        if(OP.toString.call(obj) !== '[object Object]'){
            console.error('This parameter must be an object：' + obj);
        }
        this.$callback = callback;
        this.observe(obj);
    }
    
    observe(obj){
        // 如果发现 监测的对象是数组的话就要调用 overrideArrayProto 方法
        if(OP.toString.call(obj) === '[object Array]'){
            this.overrideArrayProto(obj);
        }
        Object.keys(obj).forEach(function(key, index, keyArray){
            var oldVal = obj[key];
            Object.defineProperty(obj, key, {
                get: function(){
                    return oldVal;
                },
                set: (function(newVal){
                    if(oldVal !== newVal){
                        if(OP.toString.call(newVal) === '[object Object]' || OP.toString.call(newVal) === '[object Array]'){
                            this.observe(newVal);
                        }
                        this.$callback(newVal, oldVal);
                        oldVal = newVal;
                    }
                    
                }).bind(this)
            });
            
            if(OP.toString.call(obj[key]) === '[object Object]' || OP.toString.call(obj[key]) === '[object Array]'){
                this.observe(obj[key]);
            }
            
        }, this);
        
    }
    
    overrideArrayProto(array){
            // 保存原始 Array 原型
        var originalProto = Array.prototype,
            // 通过 Object.create 方法创建一个对象，该对象的原型就是Array.prototype
            overrideProto = Object.create(Array.prototype),
            self = this,
            result;
        // 遍历要重写的数组方法
        Object.keys(OAM).forEach(function(key, index, array){
            var method = OAM[index],
                oldArray = [];
            // 使用 Object.defineProperty 给 overrideProto 添加属性，属性的名称是对应的数组函数名，值是函数
            Object.defineProperty(overrideProto, method, {
                value: function(){
                    oldArray = this.slice(0);
                    
                    var arg = [].slice.apply(arguments);
                    // 调用原始 原型 的数组方法
                    result = originalProto[method].apply(this, arg);
                    // 对新的数组进行监测
                    self.observe(this);
                    // 执行回调
                    self.$callback(this, oldArray);
                    
                    return result;
                },
                writable: true,
                enumerable: false,
                configurable: true
            });
        }, this);
        
        // 最后 让该数组实例的 __proto__ 属性指向 假的原型 overrideProto
        array.__proto__ = overrideProto;
        
    }
}

看下效果

5.模板映射

现在，我们可以几乎完美的监测到数据对象的变化了，并且能够知道变化前后的旧值与新值，那么这样就结束了吗？当然不是，我们现在并不知道修改的是哪个属性，但是能够知道修改的是哪个属性是非常重要的。比如，我们有如下的模板：

<div id="box">
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>{{sex}}</div>
</div>

然后有如下的数据：

var data = {
    name : 'nuoka',
    age : 20,
}

我们想通过这种方式反应模板与数据之间的关系：

1	new Mvvm(document.getElementById('box'), data);

那么当我们的数据模型data中的某个属性改变的时候，比如 data.name = ‘kage’，如若我们不知道改变的字段名称，那么我们就无法得知要刷新哪部分模板。

那么这里就有一个路径的概念，所谓路径，就是变化的字段的路径，比如有如下数据模型：

var data = {
    a : {
        b : {
            c : 'hcy'
        }
    }
}

那么字段 a 的路径就是用 data.a ，b 的路径就是 data.a.b，c 的路径就是 data.a.b.c，这里我们用数组来表述路径可以是这样：

1
2
3

1、 a 的路径是 [‘data’, ‘a’]
2、 b 的路径是 [‘data’, ‘a’, ‘b’]
3、 c 的路径是 [‘data’, ‘a’, ‘b’, ‘c’]

有了这个概念之后，我们来修改之前的代码。

observe(obj, path){
        // 如果发现 监测的对象是数组的话就要调用 overrideArrayProto 方法
        if(OP.toString.call(obj) === '[object Array]'){
            this.overrideArrayProto(obj, path);
        }
        Object.keys(obj).forEach(function(key, index, keyArray){
            var oldVal = obj[key];
            
            var pathArray = path && path.slice(0);
            if (pathArray) {
                pathArray.push(key);
            } else {
                pathArray = [key];
            }
            
            Object.defineProperty(obj, key, {
                get: function(){
                    return oldVal;
                },
                set: (function(newVal){
                    if(oldVal !== newVal){
                        if(OP.toString.call(newVal) === '[object Object]' || OP.toString.call(newVal) === '[object Array]'){
                            this.observe(newVal, pathArray);
                        }
                        this.$callback(newVal, oldVal, pathArray);
                        oldVal = newVal;
                    }
                    
                }).bind(this)
            });
            
            if(OP.toString.call(obj[key]) === '[object Object]' || OP.toString.call(obj[key]) === '[object Array]'){
                this.observe(obj[key], pathArray);
            }
            
        }, this);
        
    }
    
    overrideArrayProto(array, path){
            // 保存原始 Array 原型
        var originalProto = Array.prototype,
            // 通过 Object.create 方法创建一个对象，该对象的原型就是Array.prototype
            overrideProto = Object.create(Array.prototype),
            self = this,
            result;
        // 遍历要重写的数组方法
        Object.keys(OAM).forEach(function(key, index, array){
            var method = OAM[index],
                oldArray = [];
            // 使用 Object.defineProperty 给 overrideProto 添加属性，属性的名称是对应的数组函数名，值是函数
            Object.defineProperty(overrideProto, method, {
                value: function(){
                    oldArray = this.slice(0);
                    
                    var arg = [].slice.apply(arguments);
                    // 调用原始 原型 的数组方法
                    result = originalProto[method].apply(this, arg);
                    // 对新的数组进行监测
                    self.observe(this, path);
                    // 执行回调
                    self.$callback(this, oldArray, path);
                    
                    return result;
                },
                writable: true,
                enumerable: false,
                configurable: true
            });
        }, this);
        
        // 最后 让该数组实例的 __proto__ 属性指向 假的原型 overrideProto
        array.__proto__ = overrideProto;
        
    }