原型屬性,指向建構子 |
|
在JavaScript中,每个函数都有一个prototype属性,当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(设置实例的proto
属性),也就是说,所有实例的原型引用的是构造函数的prototype属性。同时在原型对象中,包含一个"constructor"属性,这个属性对应创建所有指向该原型的实例的构造函数(有点拗口,就是constructor
属性指向构造函数)。这三者的关系可以用下面的示例图表示:
所以构造函数通过 prototype 属性指向自己的原型。 构造函数的实例在创建后通过 proto
属性指向构造函数的 prototype 的对象,即实例函数也指向原型。构造函数和实例都通过属性指向了原形。
代码示例:
function Person () {}
let manPerson = new Person()
manPerson.proto === Person.prototype // true
Person.prototype.constructor === Person // true
manPerson.constructor === Person.prototype.constructor // true
manPerson
是构造函数Person
的实例
manPerson
的proto
属性与Person
的prototype
属性保存的值相等,即他们指向同一个对象原形
。
Person 的原形(Person.prototype)通过constructor
属性指向 构造函数 Person ,即 Person
和他的原形
实现了相互引用
实例的constructor
属性与原形的constructor
属性相等。这里实例的constructor
属性是继承自原形的constructor
属性。
反过来原型和构造函数是没有指向实例的引用,因为一个构造函数会有N个实例。javascript通过实例的 proto
属性来访问共同的原形。
所有函数都是 Function 构造函数的实例,而且函数也是一个对象
同时函数实例的字面量方式创建 function too(){} 等同于构造函数方式创建 let foo = new Function()
foo instanceof Function // true
too instanceof Function // true
foo.proto === too.proto // true
foo.proto === Function.prototype // true foo是Function的实例
所以too、foo都是Function的实例,他们的_proto
指向的是Function构造函数的原型。
通过上面的示例代码分析,这里主要涉及到 prototype
、proto
、constructor
这3个属性的关系。
我们再次梳理一下:
对于所有的对象,都有proto
属性,这个属性对应该对象的原型
对于函数对象,除了proto
属性之外,还有prototype
属性,当一个函数被用作构造函数来创建实例时,该函数的prototype
属性值将被作为原型赋值给所有对象实例(也就是设置实例的proto属性)
所有的原型对象都有constructor
属性,该属性对应创建所有指向该原型的实例的构造函数
函数对象和原型对象通过prototype
和constructor
属性进行相互关联
所以上面的关系图其实可以于理解为:
题外话:
Function.prototype === Function.proto
先有鸡还是先有蛋?怎么 Function 作为构造函数 与 Function 作为实例对象的原型相等
在JavaScript中,Function构造函数本身也算是Function类型的实例吗?Function构造函数的prototype属性和proto属性都指向同一个原型,是否可以说Function对象是由Function构造函数创建的一个实例?
相关问题
JavaScript 里 Function 也算一种基本类型?
在JavaScript中,Function构造函数本身也算是Function类型的实例吗?
对于这类问题也可以不用深究。
constructor
原型的constructor属性指向对应的构造函数
function Person() {
}
console.log(Person === Person.prototype.constructor); // true
原型链
当理解了原形的概念后,原形链就比较好理解了。
因為每個物件和原型都有原型,物件的原型指向物件的父,而父的原型又指向父的父,這種原型層層連接起來的就構成了原型鏈。 .JavaScript 物件透過proto
指向原型物件的鏈。原形鏈的概念不難理解,當訪問一個對象的屬性時,它不僅僅在該對像上搜尋,還會搜尋該對象的原型,以及該對象的原型的原型,依次層層向上搜索,直到找到一個名字相符的屬性或到達原型鏈的結尾,找到就傳回該屬性的值否則就回傳undefind
(原形鏈的末端是null)。
關於javascript 中各資料類型原形之間的關係可以參考下圖理解:
#相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
React-router v4使用步驟詳解
nodejs express設定自簽名https伺服器步驟詳解
#