概念:

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实例的展开形式及对这个两个实例的说明如下图

透析原型与原型链-LMLPHP

理解原型对象:

实例的原型对象是构造器中的成员还加上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

02-11 20:48