阅读本文需要:3分钟
原型和原型链是 JS 中的重点和难点,我看了几次其实都不是特别清晰。这次复习在看了一些优秀文章后整理出以下 精简总结 ,终于捋清楚了。
如果需要详细理解,可以查看本文的 最后 部分,都是我看过的很好理解的文章。
用例:
function Person() {};
let person = new Person();
直接上干货:
📝总结
-
通过构造函数和
new
可以创建一个 实例对象 。(这一次,彻底搞懂 —— 构造函数和new) -
每个对象在创建的时候会关联另一个对象,它就是 原型 ,每一个对象都会从原型 继承 属性,实现继承的主要方式 即 原型链。
-
每个函数都有一个
prototype
属性,即 显式原型对象 ,它指向使用这个函数创建的 实例的原型 。在例子中,
Person.prototype
即实例原型。 -
每个对象都有一个 内部隐藏属性
[[Prototype]]
属性,即 隐式原型对象 ,可以使用obj.__proto__
访问它(__proto__
是[[prototype]]
的 getter/setter),它指向该对象的原型。person.__proto__ === Person.prototype
-
每个原型都有一个
constructor
属性,它指向关联的构造函数。Person.prototype.constructor = Person
-
Object.getPrototypeOf()
可以获得对象原型Object.getPrototypeOf(person) === Person.prototype
-
当读取实例的属性时,如果找不到,就会查找该对象原型中的属性,如果还找不到,就查找原型的原型,直到顶层,这种规则就是 原型链 。
-
原型对象就是通过 Object 构造函数生成的。
Person.prototype.__proto__ === Object.prototype
-
Object.prototype
的原型是null
Object.prototype.__proto__ === null
null
表示“没有对象”,即该处不应该有值。所以
Object.prototype.__proto__
的值为null
跟Object.prototype
没有原型,是一个意思。所以查找属性的时候查到
Object.prototype
就可以停止查找了。 -
一张图解释原型链:
-
构造函数、原型和实例的关系:
每一个构造函数都有一个原型对象,原型对象又包含一个指向构造函数的指针,而实例包含一个原型对象的指针。
-
JavaScript 规范中规定,
__proto__
是过时的且 不推荐 使用,因为 proto 必须仅在浏览器环境下才能得到支持。 -
设置和直接访问原型 的现代方法有:
Object.create(proto, [descriptors])
—— 利用给定的 proto 作为[[Prototype]]
(可以是 null)和可选的属性描述来创建一个空对象。Object.getPrototypeOf(obj)
—— 返回对象 obj 的[[Prototype]]
(与 proto 的 getter 相同)。Object.setPrototypeOf(obj, proto)
—— 将对象 obj 的[[Prototype]]
设置为 proto(与 proto 的 setter 相同)。
-
Object.create(null)
可以创建一个没有__proto__
的非常干净的空对象。
🎈最后
🥺如有问题,请大佬指正~
🥺如有帮助,希望能够点赞评论收藏~
参考: