深究JavaScript——原型：prototype、constructor、__proto__

prototype、constructor、__proto__

  prototype是站在构造函数的角度讨论原型对象的，用来实现基于原型的继承与属性的共享。__proto__是站在实例对象的角度讨论原型对象，构成原型链，一样用于实现基于原型的继承。

function Person(){}
var p = new Person();

Person.prototype

Person.constructor

p.prototype

p.constructor

p.__proto__

• 经过new构造函数实例化获得对象。
• prototype是构造函数的属性，而不是实例对象的属性，指向Person.prototype原型对象。
• 实例对象含有一个Constructor属性指向该对象的构造器。
• p对象有个__proto__内部属性指向Person.prototype。
• p.__proto__、p.constructor.prototype、Person.prototype指向Person的原型对象

  每一个构造函数都有一个phototype属性(经过Function.prototype.bind方法构造出来的函数以及Object.create(null)例外，没有prototype属性)，这个属性是一个指针，指向一个包含特定类型的全部实例共享属性和方法的对象。经过prototype对象能够返回对象的原型对象的引用。

  每一个实例对象都有一个constructor属性指向prototype属性所在函数的指针。经过这个constructor（构造函数），还能够继续为原型对象添加其余属性和方法。

  每一个实例对象都有一个内部属性[[prototype]]，在ES5以前没有标准的方法访问这个内置属性，可是大多数浏览器都支持经过__proto__指针来访问。__proto__指向实例该对象的构造器的原型对象(Object.prototype 这个对象是个例外，它的__proto__值为null)。这个链接存在于实例与构造函数的原型对象(而不是构造函数)之间，也就是说实例对象与构造函数没有直接关系。而且，实例并不包含属性与方法，实例之因此可以调用原型上的方法，是依赖于查找对象属性的过程来实现的。虽然没法访问到__proto__，能够经过isPrototypeOf()方法来肯定对象之间是否存在这种关系，若是__proto__指向调用该方法的对象的prototype，返回true。

console.log(Person.prototype.isPrototypeOf(p)); //true;

  每当代码读取某个对象属性时，首先从对象实例开始，若是找到给定名字属性，返回该值；若是没有找到，继续搜索指针指向的原型对象。虽然能经过实例访问原型中的值，但不能经过对象实例重写原型中的值。

  当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性；换句话说，添加这个属性只会阻止咱们访问原型中的那个属性，但不会修改那个属性。即便将这个属性设置为 null，也只会在实例中设置这个属性，而不会恢复其指向原型的链接。不过，使用 delete 操做符则能够彻底删除实例属性，从而让咱们可以从新访问原型中的属性。

function Person(){}
Person.prototype.name = "staven";
Person.prototype.say = function(){
    console.log("My name is "+this.name);
}
var p = new Person();
p.name = "赫连小妖"
p.say();  //My name is 赫连小妖
delete p.name;
p.say();  //My name is staven

  使用 hasOwnProperty()方法只在给定属性存在于对象实例中时，才会返回 true；能够检测一个属性是存在于实例中，仍是存在于原型中。

  for(x in xxx)既能够检测实例属性，也能够检测自定义属性。

  hasOwnProperty()为true，属性存在在对象实例中；hasOwnProperty()为false，(x in xxx)为true，属性存在在对象的构造器原型中。

function Person(){}
Person.prototype.name = "staven";
var p = new Person();
console.log(p.hasOwnProperty('name'));    //false
console.log(('name' in p));                //true
p.name = "赫连小妖";
console.log(p.hasOwnProperty('name'));    //true
console.log(('name' in p));                //true

  ECMAScript 5 的 Object.keys()方法接收一个对象做为参数，返回一个包含全部可枚举属性的字符串数组。

function Person(){}
Person.prototype.name = "staven";
Person.prototype.say = function(){};
console.log(Object.keys(Person.prototype));        //["name", "say"]
var p = new Person();
p.sex = 'man';
p.character = "handsome";
console.log(Object.keys(p));    //["sex", "character"]

  不管它是否可枚举，均可以使用 Object.getOwnPropertyNames()方法。

function Person(){}
Person.prototype.name = "staven";
Person.prototype.say = function(){};
console.log(Object.getOwnPropertyNames(Person.prototype));        //["constructor", "name", "say"]
var p = new Person();
p.sex = 'man';
p.character = "handsome";
console.log(Object.getOwnPropertyNames(p));    //["sex", "character"]

使用字面量赋值原型对象

Person.prototype = {
    name : "staven",
    say : function(){
        console.log("My name is "+this.name);
    }
};

  此时constructor属性再也不指向Person。尽管 instanceof操做符还能返回正确的结果，但经过 constructor 已经没法肯定对象的类型了。

function Person(){}
Person.prototype = {
    name : "staven",
    say : function(){
        console.log("My name is "+this.name);
    }
};
var p = new Person();
console.log(p instanceof Object);        //true
console.log(p instanceof Person);        //true
console.log(p.constructor == Person);    //false
console.log(p.constructor == Object);    //true

  不过能够从新设置constructor属性，确保经过该属性的原有性。

function Person(){}
Person.prototype = {
    constructor : Person,
    name : "staven",
    say : function(){
        console.log("My name is "+this.name);
    }
};

原型的动态性

  随时能够为原型添加属性和方法，而且可以当即在全部对象实例中反映出来，可是若是重写了整个原型对象，状况就不一样了。调用构造函数时会为实例添加一个[[Prototype]]指针，把原型修改成另外一个对象，就至关于切断了构造函数与最初原型之间的联系。

function Person(){}
var p = new Person();
Person.prototype = {
    constructor : Person,
    name : "staven",
    say : function(){
        console.log("My name is "+this.name);
    }
};
p.say();    //Uncaught TypeError: p.say is not a function

原型对象的缺点

  省略了为构造函数传递初始化参数，结果全部实例在默认状况下都将取得相同的属性值。
  因为原型的属性共享，若在实例上添加一个同名的包含引用类型值得的属性，其余实例该属性也会被改变。

function Person(){}
Person.prototype = {
    books:["html5","css3","js"]
}
var p1 = new Person();
var p2 = new Person();
p1.books.pop();
console.log(p1.books);        //["html5", "css3"]
console.log(p2.books);        //["html5", "css3"]

---

☞☞☞深究JavaScript系列☜☜☜