JavaScrip原型理解（一）-原创手记-慕课网

示意图

基本概念

每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象；而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中，如下面的例子所示。

function Person(){
}
Person.prototype.name = 'hello word';
Person.prototype.age = 4;
Person.prototype.say = function(){console.log(this.name);
}var person1 = new Person();
person1.say();// hello wordvar person2 = new Person();
person2.say();// hello wordconsole.log(person1.say == person2.say) //true

以上代码直接把所有属性和方法直接添加到了Person的prototype属性中，构造函数变成了空函数，我们仍可以通过调用构造函数来创建对象。而构建的所有新对象都具有相同的属性和方法，如上例person1和person2访问都是同一组属性和方法。

理解原型

无论什么时候，只要创建一个新函数，就会为该函数创建一个prototype属性，这个属性指向函数的原型对象，默认情况下，所有原型对象都会自动获取一个constructor（构造函数）属性。这个属性是一个指向prototype属性所在函数的指针，如上例Person.prototype.constructor指向的是Person。而通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。

创建了自定义的构造函数之后，其原型对象默认只会取得constructor属性；至于其他方法，则都是从Object继承而来的。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。ECMA-262第5版中管这个指针叫[[Prototype]]。

如上代码

图展示了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。在此，Person.prototype指向了原型对象，而Person.prototype.constructor又指回了Person。原型对象中除了包含constructor属性之外，还包括后来添加的其他属性。Person的每个实例——person1和person2都包含一个内部属性，该属性仅仅指向了Person.prototype；换句话说，它们与构造函数没有直接的关系。此外，要格外注意的是，虽然这两个实例都不包含属性和方法，但我们却可以调用person1.sayName()。这是通过查找对象属性的过程来实现的。

每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性，则返回该属性的值。也就是说，在我们调用person1.say()的时候，会先后执行两次搜索。首先，解析器会问：“实例person1有say属性吗？”答：“没有。”然后，它继续搜索，再问：“person1的原型有say属性吗？”答：“有。”于是，它就读取那个保存在原型对象中的函数。当我们调用person2.say()时，将会重现相同的搜索过程，得到相同的结果。而这正是多个对象实例共享原型所保存的属性和方法的基本原理。

function Person(){
}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.say = function(){
    alert(this.name);
};var person1 = new Person();var person2 = new Person();

person1.name = "Greg";
alert(person1.name);     //"Greg"——来自实例alert(person2.name);     //"Nicholas"——来自原型

虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。来看下面的例子。

注：使用hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法（不要忘了它是从Object继承来的）只在给定属性存在于对象实例中时，才会返回true。

更简单的原型语法

function Person(){
}

Person.prototype = {    name : "Nicholas",    age : 29,    job: "Software Engineer",    say : function () {
        alert(this.name);
    }
};

在上面的代码中，我们将Person.prototype设置为等于一个以对象字面量形式创建的新对象。最终结果相同，但有一个例外：constructor属性不再指向Person了。前面曾经介绍过，每创建一个函数，就会同时创建它的prototype对象，这个对象也会自动获得constructor属性。而我们在这里使用的语法，本质上完全重写了默认的prototype对象，因此constructor属性也就变成了新对象的constructor属性（指向Object构造函数），不再指向Person函数。此时，尽管instanceof操作符还能返回正确的结果，但通过constructor已经无法确定对象的类型了

function Person(){
}

Person.prototype = {    constructor : Person,    name : "Nicholas",    age : 29,    job: "Software Engineer",    say : function () {
        alert(this.name);
    }
};

在此，用instanceof操作符测试Object和Person仍然返回true，但constructor属性则等于Object而不等于Person了。如果constructor的值真的很重要，可以像下面这样特意将它设置回适当的值。

JavaScript高级程序设计（第3版）读书笔记
GitHub：JavaScript-Demo

作者：周希孟
链接：https://www.jianshu.com/p/c746418f1400