4.JavaScript 原型和原型链
4.1 概念介绍
-
原型和原型对象
原型也是对象,叫原型对象。所以,原型和原型对象是一回事,只不过有人说的简洁,有人说的是全称。
-
原型链
原型 (原型对象)、构造函数和(对象) 实例构成了原型链。原型链的核心就是依赖对象的__proto__
指向,当检索依赖对象本身不存在的属性时,就会一层一层地向上去查找创建对象的构造函数,一直找到Object
,就没有__proto__
的指向了。
-
构造函数
首字母大写的函数。例如:function Person() {}
-
对象实例
对象有两种:- 函数对象:通过
new Function();
创建的对象; - 普通对象:除了函数对象之外的所有对象;
- 函数对象:通过
4.2 概念之间的关系
- 每一个函数都有一个
prototype
属性; - 每一个 JavaScript 对象 (null 除外) 都具有一个属性,叫做
__proto__
,这个属性指向该对象的原型(prototype
); - 每一个原型都有一个
constructor
属性指向关联的构造函数,
4.3 示例
-
使用构造函数创建对象:
function Person() {} var person = new Person(); person.name = "Kevin"; console.log(person.name); // "Kevin"
Person 就是一个构造函数,我们使用
new
创建了一个实例对象 person。
-
prototype
每个函数都有一个prototype
属性
每一个 JavaScript 对象 (null
除外)在创建的时候就会与之关联另一个对象,这个对象就是我们说的原型,每一个对象都会从原型“继承”属性。
function Person() {} // 注意:prototype 是函数才会有的属性 // 而__proto__是对象才会有的属性 Person.prototype.name = "Kevin"; var person1 = new Person(); var person2 = new Person(); console.log(person1.name); // "Kevin" console.log(person2.name); // "Kevin"
-
proto
function Person() {} var person = new Person(); console.log(person.__proto__ === Person.prototype); // true
-
constructor
function Person() {} console.log(Person === Person.prototype.constructor); // true
4.4 总结
理解原型和原型链的前提是,弄清楚这里面一共有多少个概念,以及概念和概念之间的关系。
这里面涉及到的概念有:原型 、 原型对象 、 构造函数 、 对象(实例)、prototype、proto、constructor。
他们之间的关系是怎样的呢?
- 首先,当我们创建一个大写字母开头的函数的时候,这个函数就是 构造函数;
- 当我们
new
一个这个构造函数的实例对象的时候,这个实例就是我们说的对象(实例),它具有 proto 属性; - 原型和原型对象是一回事,他们是基于构造函数
new
出来的对象,也就是函数对象而存在的,它具有prototype
属性; - 原型和原型对象也有一个
contructor
属性(或者叫做 指针),它指向关联的构造函数。 - 每一个对象都有一个 proto 属性指向原型对象,这个原型对象还可以有它自己的原型,以此类推,形成了一个原型链。当查找特定属性的时候,先去这个对象里面查找,如果没有找到,那么就去它的原型对象里面找,如果还是没有,再去原型对象的原型对象里面去查找。这个操作被委托在整个原型链上,也就是我们所说的原型链了。
参考链接:
https://www.jianshu.com/p/be7c95714586
https://blog.csdn.net/xiaotao_css/article/details/72782416
https://blog.csdn.net/shuixiou1/article/details/81048816
https://www.cnblogs.com/zhengyeye/p/8986836.html
https://blog.csdn.net/m0_37585915/article/details/80843945
https://www.jianshu.com/p/08c07a953fa0
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
https://blog.csdn.net/lyt_angularjs/article/details/100729591
https://www.cnblogs.com/jianghao233/p/8983176.html
https://blog.csdn.net/m0_37585915/article/details/80843945
https://zhuanlan.zhihu.com/p/23090041?refer=study-fe
https://www.jianshu.com/p/dee9f8b14771
https://www.cnblogs.com/libin-1/p/5820550.html
https://blog.csdn.net/yucihent/article/details/79424506
https://zhuanlan.zhihu.com/p/22787302