原生js深入理解系列（五）--- 透析原型与原型链

概念：

JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

JavaScript 只有一种结构：对象。每个实例对象（object ）都有一个私有属性（称之为__proto__）指向它的原型对象（prototype）。该原型对象也有一个自己的原型对象(proto) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

准确地说，这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上，而非对象实例本身。

在 JavaScript 中并不如此复制——而是在对象实例和它的构造器之间建立一个链接（它是__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法。

应用：

eg:

function Person(name){

this.name = name

}

Person.prototype.props = '43d'

var per1 = new Person();

console.log(per1.props);//43d,构造函数上的prototype属性可以被实例继承

console.log(per1.__proto__=== Person.prototype) // true,即实例的__proto__属性与构造函数的prototype属性是同一个,也就是说per1的__proto__属性就是Person.prototype。

console.log(Object.getPrototypeOf(per1)===Person.prototype) // true,理解原型和原型链

//— 测试代码结束
注意: 理解对象的原型（可以通过Object.getPrototypeOf(obj)或者已被弃用的__proto__属性获得）与构造函数的prototype属性之间的区别是很重要的。前者是每个实例上都有的属性，后者是构造函数的属性。也就是说，Object.getPrototypeOf(new Foobar())和Foobar.prototype指向着同一个对象。

接上面测试代码新增一个实例对象

var per2 = new Person('trwW')；

看看per1实例与per2实例的展开形式及对这个两个实例的说明如下图

理解原型对象：

实例的原型对象是构造器中的成员还加上Object的成员（成员：属性和方法）；拿上例说。per1的原型对象是Person构造器的props,name同时也有一些其他成员—— toString、valueOf 等等——这些成员定义在 Person() 构造器的原型对象、即 Object之上;

eg:

per1.valueOf
ƒ valueOf() { [native code] }

prototype 属性：继承成员被定义的地方
于是 Object.prototype.toString()、Object.prototype.valueOf() 等等成员，适用于任何继承自 Object() 的对象类型，包括使用构造器创建的新的对象实例。

Object.is()、Object.keys()，以及其他不在 prototype 对象内的成员，不会被“对象实例”或“继承自 Object() 的对象类型”所继承。这些方法/属性仅能被 Object() 构造器自身使用。

也就是说挂在prototype属性下的成员都可以被继承。其他都不行。

this 关键字没有指向当前对象的原型对象，原型对象是一个内部对象，应当使用__proto__ 访问

eg:

console.log(per1.__proto__.props) // "43d"

//使用create方法创建新对象,create() 实际做的是从指定原型对象创建一个新的对象,per1是指定的原型对象。创建了新对象per4

var per4 = Object.create(per1);

per4.__proto__===per1 // true

constructor属性

实例的.constructor属性返回的结果是这些实例的原始定义。

per1.constructor;

per2.constructor;

per3.constructor;

per4.constructor;

这四个都是可以打印出下面的结果

Person(name){

this.name = name

}

即都将返回 Person() 构造器，因为该构造器包含这些实例的原始定义。

constructor的妙用可以用来判断某个变量的类型

1.  var aa = [1,2];
   

console.log(aa.constructor===Array) // true,

2. bb =()=>{}
   

console.log(bb.constructor===Function) // true,

修改原型。从修改prototype的值那里可以改变原型的值

理解了原型与原型链，要探究下，继承的多种方法请移步本人的博客https://my.oschina.net/u/2542841/blog/2878806