JavaScript中原型的不同写法

原型是JavaScript中比较重要的概念，通过原型实现了面向对象编程，这篇博客记录下一些重要的知识点。

理解原型对象。

• JavaScript中，无论什么时候，只要创建了一个新函数，机会根据一组特定的规则为该函数创建一个 prototype 属性，这个属性指向函数的原型对象。
• 默认情况下，所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性是一个指向 prototype 属性所在函数的指针。
• 当调用构造函数创建爱你一个新实例后，该实例的内部将包含一个指针（内容属性），指向构造函数的原型对象，ES5中这个指针叫 [[Prototype]]

原型语法

function Person(){
}

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

var person1 = new Person();
console.log(person1 instanceof Person); // true
console.log(person1 instanceof Object); // true
console.log(person1.constructor === Person); // true
console.log(person1.constructor === Object); // false

function Person() {

}

Person.prototype = {
    name : "Nicholas",
    age : 29,
    job : "SDE",
    sayName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();
console.log(person1 instanceof Person); // true
console.log(person1 instanceof Object); // true
console.log(person1.constructor === Person); // false
console.log(person1.constructor === Object); // true

对比代码运行结果可知，当将Person.prototype 设置为等于一个以字面量形式创建的新对象时， constructor 属性不在指向Person， 原因是这种写法本质上完全重写了默认的 prototype 对象， 因此 constructor 属性也变成了新对象的 constructor 属性 （指向Object 构造函数）， 但 instanceof 操作符还能返回正确的结果。

想要让 person1 的构造器指向 Person， 可以加入如下代码。

Person.prototype = {
            constructor: Person,
 }

原型的动态性

由于在原型中查找值的过程是一次搜索，因此对原型对象的任何修改都能立即从实例上反映出来。进一步解释：实例与原型之间是松散连接关系，当代码读取对象的属性时，首先会在实例中搜索，搜索不到然后再在对应的原型中进行修改。

var friend = new Person();
        
Person.prototype.sayHi = function(){
    alert("hi");
};

friend.sayHi();   // "hi" 

以上代码表明可以随时为原型添加方法和属性.

原型的动态性虽然很灵活，但是我们还需要注意，调用构造函数时会为实例添加一个指向最初原型的 [[Prototype]] 指针，这个指针指向原型，而不指向构造函数。

function Person(){
}

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

friend.sayName();   // Uncaught TypeError: friend.sayName is not a function

上述代码先创建 friend 对象实例，然后重写原型对象，这一步是导致错误的原因， 这一步导致 Person 构造函数指向新的原型对象， 但之前创建的 friend 对象实例还指向老的原型， 切断了先用原型与任何之前已经存在的对象实例之间的联系，所以 firend.sayName() 会报错。

原型对象的问题

原型模式最大的问题是由其共享的本性所导致的。

function Person(){
}

Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    friends : ["Shelby", "Court"],
    sayName : function () {
        alert(this.name);
    }
};

var person1 = new Person();
var person2 = new Person();

person1.friends.push("Van");

console.log(person1.friends);    //"Shelby,Court,Van"
console.log(person2.friends);    //"Shelby,Court,Van"
console.log(person1.friends === person2.friends);  //true

以上代码可以看出，由于 friends 是person1 person2的公用属性（person1和person2都没有自己定义friends属性对原型中的friends进行覆盖），person1造成的改动会直接影响person2.