概念:
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