JavaScript Prototype (原型)

原型 Prototype 与 原型链 Prototype Chain

JavaScript 每一个物件(包含函数)都有原型这个属性用来继承属性与方法。
原型会去参考另一个物件，而那个物件的原型又可以去参考另一个物件。
如下图:

先看红色的部分，obj.prop1 本身就是 obj 的属性，不用去往外找;
如果是 obj.prop2，在 obj 属性里面找不到，所以去找它的原型的物件里找，结果找到了；而 obj.prop3 在obj中找不到，往外 在 proto 中也找不到，又再往 proto 的原型找才找到并返回 prop3。
虽然看起来好像是obj自已的属性，其实那是原型，或是原型的原型的属性，
这种方式就叫做「原型链」。

这跟之前说过的范围链(Scope Chain)不一样，范围链是指变数的取用；
而原型链(Prototype Chain)是指属性与方法的取用。

此外，看刚刚那张图灰色的部分，obj2 是另一个物件，它也可以与 obj 共有相同的原型物件，也就是 obj.prop2 与 obj2.prop2 会回传一样的属性，因为它们指向的记忆体位址一样。

原型链的好处就是，你不需要再 obj.proto.proto.prop3 ，直接 obj.prop3 就可以了。

范例

一个已存在构造函数的对象中不能添加新属性、函数

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

}
//一个已存在构造函数的对象中不能添加新属性、函数
Person.sayHi=function(){
console.log('Hi! my name is '+this.name);
}

var student = new Person('Ivy',20);
student.sayHi();//Uncaught TypeError: student.sayHi is not a function

如果使用原型就可以给建构函数增加属性与方法

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

}
//如果使用原型就可以增加属性与方法
Person.prototype.sayHi=function(){
console.log('Hi! my name is '+this.name);
}

var student = new Person('Ivy',20);
student.sayHi();//Hi! my name is Ivy

参考文章:
MDN prototype
Runoob.com