JS原型模式的修改与重写的简单实例理解

如果要理解js原型模式的修改与重写，我认为要清楚构造函数、原型对象和对象实例的关系。

每个构造函数都有一个原型对象，且有一个（prototype）指针指向原型对象，原型对象都包含一个指向构造函数的指针（constructor），实例都包含一个指向原型对象的内部指针 proto ,也可以是[[prototype]],(其实[[prototype]]和__proto__意义相同，均表示对象的内部属性，其值指向对象原型。前者在一些书籍、规范中表示一个对象的原型属性，后者则是在浏览器实现中指向对象原型。)

这里举个简单的例子：

function Law(){}
Law.prototype.type = 'law';
Law.prototype.mad = function(){  
    console.log('法外狂徒张三');
}                            //为构造函数的原型添加了两个属性
var law1 = new Law();        //创建一个对象实例
law1.mad()                   //实例继承了原型的属性

上述代码中构造函数为Law() ,Law()的原型Law.prototype指向Law的原型对象，原型对象有两个属性（type和mad），law1为构造函数Law()的实例对象，继承了Law的原型对象的所有属性，如下图所示：

我们还需知道一点，在访问对象实例的时候，会从对象的本身开始找，如果本身没有就一直向上查找，直到找到为止，如果没有则返回undefined,所以上述例子可以向上查找到原型中的属性。

下面就来说说原型模式的两种写法，一种为原型添加属性，另一种重写原型。

原型模式的修改：

function Law(){}
Law.prototype.type = 'law';
Law.prototype.mad = function(){  
    console.log('法外狂徒张三');
}                            //为构造函数的原型添加了两个属性
var law1 = new Law();        //创建一个对象实例
law1.mad()                   //实例继承原型对象的属性 

当我们创建好了一个实例law1，这时我们再去给原型添加一个属性，比如：

function Law(){}
Law.prototype.type = 'law';
Law.prototype.mad = function(){  
    console.log('法外狂徒张三');  //法外狂徒张三
}                            //为构造函数的原型添加了两个属性
var law1 = new Law();        //创建一个对象实例
law1.mad();
Law.prototype.gender = 'male';   //给原型对象在添加一个属性
Law.prototype.mad = function() {    //修改之前的mad方法属性
    console.log('小新'); 
}
law1.mad();  //小新
console.log(law1.gender); //male

我们会发现，我们之前创建的实例对象law1仍然继承了原型中的gender属性，这时为什么呢？很好理解，我们为原型添加属性的时候，这个原型还是原来的原型，而我们的实例对象law1的[[prototype]]指针的指向并没有改变，所有和之前的一样，仍然可以向上访问到gender的属性。

原型模式的重写：

function Law(){}
Law.prototype.type = 'law';
Law.prototype.mad = function(){  
    console.log('法外狂徒张三');
}                            //为构造函数的原型添加了两个属性
var law1 = new Law();        //创建一个对象实例
law1.mad();   //法外狂徒张三
Law.prototype = {   //这里重写了Law的原型对象
    gender : 'male',
    construct : Law  //声明了新的原型对象的指针指向构造函数Law，如果不声明则会指向Object()
};
console.log(law1.gender);  //undefined
law1.mad();  //法外狂徒张三
var law2 = new Law();  //创建一个新的实例对象law2，注意这里基于的是新的原型，即我们重写后的原型
console.log(Object.getPrototypeOf(law1)===Object.getPrototypeOf(law2)); //false
//这里通过getPrototypeOf()方法判断law1与law2的原型是否相等
//Object.getPrototypeOf() 方法返回指定对象的原型 ( 即, 内部[[Prototype]]属性）。
console.log(law2.gender);  //male
//由于新的原型中有gender属性，所以这里可以获取到gender属性的值
law2.mad();  //TypeError: law2.mad is not a function
//由于新的原型中没有eat属性，所以这里报错

我们可以发现，Law. prototype = {…},重写了Law.prototype的指针，可以理解成将Law的prototype指针从之前的原型指向了一个新的原型对象。因为实例law1的原型中没有gender属性，所以向上访问不到，所以输出为undefined。但是law2 是以新的原型构造出新的实例对象，它的原型中有gender属性，所以输出为male，但law2的原型中没有mad属性，所以报错。下图是对上面代码的具体体现：

总结以下几句话：

“实例中的指针仅指向原型对象，而不是指向构造函数”。

“重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的关系；它们引用的仍然是最初的原型”。