理解js中的原型和原型链

不记下来总是容易忘记掉，相当于备忘吧。。本文主要参考高程3，以及一点自己的想法，如有不对，还望指正

• 为什么要使用原型模式？

我们创建对象最一开始用的工厂模式：

function createPeople(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function () {
            alert(this.name);
    }
}    

var person1 = createPeople('Nicolas', 29, 'SoftWare Engineer');
var person1 = createPeople('Greg', 27, 'Doctor');

该模式的缺点在于： 无法获知一个对象的类型

为了解决该问题，就有了构造函数模式:

function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job= job;
        this.sayName = function() {
            alert(this.name);
    };
} 

var people1 = new Person('Nicholas', 29, 'Software Engineer');
var people2 = new Person('Greg', 27, 'Doctor');

new其实包含了一下4个步骤： 

创建一个空对象 -> 将构造函数的作用域赋给新对象（this指向该对象） -> 执行构造函数中的代码（为新对象添加属性） -> 返回新对象

 person1 和 person2 分别保存着Person对象的一个不同的实例。这两个对象都有一个constructor属性，指向Person。

该模式的缺点在于： 每个方法都要在每个实例上重新创建一遍。比如每个peson都有sayName这个方法，但是都指向不同的saynam实例，实际上并不需要这么多的sayname实例。那么一个解决方法是：

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job= job;
    this.sayName = sayName;
} 

function sayName() {
    alert(this.name);
}

var people1 = new Person('Nicholas', 29, 'Software Engineer');
var people2 = new Person('Greg', 27, 'Doctor');

缺点： 实际上我们并不需要这样一个全局的sayName函数，并且如果对象有很多方法的话，全局函数就会变得非常多。

由此，我们就可以用原型模式来解决这个问题。

这里先介绍一下原型：

• 什么是原型

当我们创建一个函数的时候，会给该函数创建一个prototype属性，该属性指向函数的原型对象。所有的原型对象有一个constructor属性，指向prototype属性所在的函数。即：

Person.prototype.constructor = Person;

创建实例之后，该实例中含有_proto_这个属性，指向构造函数的原型对象。找不到person的图了，凑合着看吧，这里_proto_画的有点不准确,指向的应该是构造函数的原型对象：

当代码读取对象的某个属性的时候，先查询实例是否有该属性，没有的话就搜索实例的原型对象。

回到原型模式，我们就可以这么构造一个对象：

function Person() {
} 

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

var people1 = new Person();
var people2 = new Person();

在这里无法为构造函数传参，为了解决这个问题可以组合使用构造函数和原型模式：

function Person(name, age, job) {
        this.name = name;
        this.age= age;
        this.job= job;
} 

Person.prototype.sayName = function() {
    alert(this.name);
}

var people1 = new Person("Nicholas", 29, "SoftWare Engineer");
var people2 = new Person("Greg", 27, "Doctor");

这是目前比较通用的构造方法。。。

•  下面介绍原型链

在js中，继承主要靠原型链来实现。实现原型链可以通过将构造函数的原型对象指向另一个类型的实例。

function SuperType() {
    this.property = true;  
}

SuperType.prototype.getSuperValue = function() {
    return this.property;
}

function subType() {
    this.subproperty = false;
}

// 继承Supertype
subType.prototype = new SuperType();

subType.prototype.getSubValue = function() {
    return this.subproperty;
}

var instance = new SubType();
alert(instance.getSuperValue); // true

继承的本质上是重写原型对象，原来存在于SuperType的实例中的所有属性和方法也将存在于Subtype.prototype中。需要注意到的是：1.property这个属性位于SubType.property中，这一点可以这么理解：property是一个实例属性，而SubType.property是SuperType的一个实例。2.instance.constructor此时指向SuperType。

原型链实现继承有一个问题，就是包含引用类型的原型：

在构造函数里面定义属性不会与所有实例共享，而原型中定义的话就会与所有实例共享。

function SuperType() {
    this.color = ['red', 'blue'];
}

function SubType() {
      
}

SubType.protoType = new SuperType();
var instance1 = new SubType();
instance1.push('black');

var instance2 = new SubType();
alert(instance2.colors);  // 'red, blue,black'

这里SubType的原型是SuperType的实例，因此相当于在原型中定义了colors这个属性，而该属性是引用类型。

为了解决这样的问题，我们使用借用构造函数实现继承，实现只需要在子类型构造函数内调用超类类型结构函数。

function SuperType() {
    this.color = ['red', 'blue'];
}

function SubType() {
      SuperType.call(this);
}

var instance1 = new SubType();
instance1.push('black');

var instance2 = new SubType();
alert(instance2.colors);  // 'red, blue'

同时还解决了传参的问题：

function SuperType(name) {
    this.name= name;
}

function SubType() {
    SuperType.call(this ,'Nicholas');
}

var instance = new SubType();
alert(instance.name);  // 'Nicholas'

然而借用构造也有缺点：超类中属性包含方法的时候，如果将方法写在超类的prototype中，那么该方法对子类是不可见的，如果是写在构造函数里的话，那么就无法实现方法的复用，解决这个缺点可以采用组合继承的方式：

function SuperType(name) {
    this.name= name;
    this.color = ['red', 'green', 'blue'];
}

// 定义超类的方法
SuperType.prototype.sayName= function() {
    alert(this.name);
}

function subType(name, age) {
    // 继承属性
    SuperType.call(this, name);
    // 定义自己的实例属性
    this.age = age；
}

// 继承方法
SubType.prototype = new SuperType();
// 定义自己的方法
SubType.prototype.sayAge = function(){
    alert(this.age);
}

简单来说就是超类的属性用借构的方式继承，超类的方法用原型的方式来继承。。一般这种方式称为组合继承，也是使用最为广泛的继承模式。