JS创建对象模式及其对象原型链探究（四）：原型模式

原型模式

定义构造函数，在构造函数的原型对象中定义对象的属性和方法，并通过构造函数创建对象。

1.创建对象

function Person(){};

Person.prototype.name = "Mike";
Person.prototype.age = 20;
Person.prototype.job = "student";

Person.prototype.showName = function(){
    console.log("name = " + this.name);
};

var p1 = new Person();
var p2 = new Person();

console.log(p1);
console.log(p2);

2.探究原型对象

使用原型对象的好处是可以让所有对象实例共享它包含的属性和方法，即p1和p2访问的都是同一组属性和同一个showName()函数。

但改变原型对象上的属性时，所有实例对象上对应的属性也同时改变。

Person.prototype.job = "teacher";
Person.prototype.showJob = function(){
    console.log("job = " + this.job);
};

p1.showJob();
p2.showJob();

console.log("p1.showJob === p2.showJob:");
console.log(p1.showJob === p2.showJob);
console.log("-----分割线-----");

当代码读取对象的某个属性时，都会执行至少一次搜索。搜索首先从实例对象开始，若在实例对象中搜索到了匹配的属性，则返回该属性的值；若无，在搜索该实例对象的__proto__指针指向的原型对象，若在原型对象中搜索到了匹配的属性，则返回该属性的值；若无，则输出undefined。

p1.country = "China";
console.log("p1.country=");    
console.log(p1.country);    //China
console.log("p2.country=");    
console.log(p2.country);    //Undefined
console.log("-----分割线-----");

Person.prototype.country = "USA";
console.log("p1.country=");    
console.log(p1.country);    //搜索先匹配到了实例对象p1上的country属性，返回值为"China"
console.log("p2.country=");    
console.log(p2.country);    //第一次搜索匹配不到实例对象p2上的country属性，执行第二次搜索，匹配到原型对象上的country属性，返回值为"USA"
console.log("-----分割线-----");

所以，我们无法通过修改实例对象来重写原型中的属性。

当为实例对象添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性，即便我们将其设置为null，也只会在实例中设置这个属性，而不会恢复其指向原型的连接。不过，使用delete操作符可以完全删除实例对象的属性。

p1.country = null;
console.log("p1.country=");    
console.log(p1.country);    //null
console.log("p2.country=");    
console.log(p2.country);    //USA
console.log("-----分割线-----");

// delete操作符可以完全删除实例属性，从而让我们能够重新访问原型中的属性
delete p1.country;
console.log("p1.country=");
console.log(p1.country);
console.log("p2.country=");
console.log(p2.country);
console.log("-----分割线-----");

我们可以通过hasOwnProperty()方法检测一个属性是存在于实例中，还是原型中。这个方法只在给定属性存在于实例对象中，才会返回true。

另外，in操作符会在通过对象能够访问给定属性时返回true，无论这个属性是存在于实例中还是原型中。

// 先给p1实例对象定义country属性
p1.country = "China";

// hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。
// 只在给定属性存在于对象实例中时，才会返回true。
// 此方法继承自Object。
console.log("p1.hasOwnProperty(country):");    
console.log(p1.hasOwnProperty("country"));    //true，country属性存在于实例对象p1中
console.log("p2.hasOwnProperty(country):");    
console.log(p2.hasOwnProperty("country"));    //false，country属性不存在于实例对象p2中
console.log("-----分割线-----");

// in操作符会在通过对象能够访问给定属性时返回true，无论该属性是存在于实例中还是原型中。
console.log("country in p1:");
console.log("country" in p1);    //true
console.log("country in p2:");
console.log("country" in p2);    //true
console.log("-----分割线-----");

3.观察Person构造函数涉及到的原型链**

console.log("Person.prototype=");
console.log(Person.prototype);
console.log("Person.prototype === Function.prototype;");    
console.log(Person.prototype === Function.prototype);    //false
console.log("-----分割线-----");

console.log("Person.prototype.constructor === Person:");    //true
console.log(Person.prototype.constructor === Person);    //true
console.log("-----分割线-----");

console.log("Person.prototype.__proto__ === Object.prototype:");    //true
console.log(Person.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割线-----");

console.log("Person.__proto__=");
console.log(Person.__proto__);
console.log("Person.__proto__ === Function.prototype:");
console.log(Person.__proto__ === Function.prototype);    //true
console.log("-----分割线-----");

4.观察p1实例对象涉及到的原型链

console.log("p1.prototype=");
console.log(p1.prototype);
console.log("-----分割线-----");

console.log("p1.__proto__=");
console.log(p1.__proto__);
console.log("p1.__proto__ === Person:");
console.log(p1.__proto__ === Person);        //false
console.log("p1.__proto__ === Person.prototype:");
console.log(p1.__proto__ === Person.prototype);        //true
console.log("-----分割线-----");

console.log("p1.__proto__.constructor === Person:");
console.log(p1.__proto__.constructor === Person);
console.log("-----分割线-----");

console.log("p1.__proto__.__proto__=");
console.log(p1.__proto__.__proto__);
console.log("p1.__proto__.__proto__ === Object.prototype:");
console.log(p1.__proto__.__proto__ === Object.prototype);    //true
console.log("-----分割线-----");

5.观察下p1.showName属性引用的函数

console.log("p1.showName.prototype=");
console.log(p1.showName.prototype);

console.log("p1.showName.prototype  === Function.prototype:");    
console.log(p1.showName.prototype  === Function.prototype);    //false
console.log("-----分割线-----");

console.log("p1.showName.prototype.constructor=");
console.log(p1.showName.prototype.constructor);
console.log("-----分割线-----");

console.log("p1.showName.prototype.__proto__=");
console.log(p1.showName.prototype.__proto__);

console.log("p1.showName.prototype.__proto__ === Object.prototype:");    
console.log(p1.showName.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割线-----");

console.log("p1.showName.__proto__=");
console.log(p1.showName.__proto__);
console.log("p1.showName.__proto__ === Function.prototype：");    
console.log(p1.showName.__proto__ === Function.prototype);    //true
console.log("-----分割线-----");

原型链图