JavaScript深入系列之JavaScript原型

最新推荐文章于 2024-10-11 17:39:47 发布

shuzhen779779

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量409

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/Susan_Q/article/details/110148703

版权

文章目录

原型
- 1、Prototype
- - 1.1、 prototype的定义

原型

说到原型跟原型链，网络上有各种说法，甚至有许多关系复杂的连线图，下面参考《JavaScript权威指南》《es2020》，一些个人理解，会先从介绍原型是什么作为切入点，去介绍原型的概念。

1、Prototype

先从es2020 规范开始，看看里面如何介绍 Prototype。

1.1、 prototype的定义

4.3.5 prototype
object that provides shared properties for other objects

在规范里，prototype被定义为：给其他对象提供共享属性的对象。也就是prototype也是一个对象，不过承担某种职能。

因此，prototype 描述的是两个对象之间的某种关系（其中一个，为另一个提供属性访问权限）。它是类似 father 父亲一样的称谓，而不是具有超能力的异常对象。

所有对象，都可以作为另一个对象的 prototype 来用。

那么，一个对象，具体如何为另一个对象提供属性访问呢？

1.1.1 所有object对象都有一个隐式引用

Every object has an implicit reference (called the object’s prototype)

规范里面明确描述了所有的对象，都有一个隐式引用，它被称为这个对象的 prototype原型

什么是隐式引用？

如上图所示，在我们编写的代码里，只声明了 obj 对象的 a 和 b 两个属性。

在控制台却可以发现它有 __proto __ 属性，这意味着 obj 被隐式地挂载了另一个对象的引用，置于 __proto __ 属性中。

也就是说，所谓的隐式，是指不是由开发者(你和我)亲自创建/操作。

1.1.2、历史问题:proto

前面“隐式地挂载引用”，这跟规范里描述的“隐式引用”，有一定的差别。

它们是两个维度。

一个是在操作层面上的隐式：是否偷偷做了挂载属性的动作。

一个是在关系层面上的隐式：这个属性能不能被直接访问。

__proto __ 的例子，说起来比较复杂，可以说是一个历史问题。

JavaScript权威指南中写到：
_prototype_
总之，ECMAScript 规范描述 prototype 是一个隐式引用，但之前的一些浏览器，已经私自实现了 __proto __ 这个属性，使得可以通过 obj.__proto __ 这个显式的属性访问，访问到被定义为隐式属性的 prototype。

因此，情况是这样的，ECMAScript 规范说 prototype 应当是一个隐式引用:
1）通过 Object.getPrototypeOf(obj) 间接访问指定对象（obj）的 prototype 对象。
2）通过 Object.setPrototypeOf(obj, anotherObj) 间接设置指定对象（obj）的 prototype 对象。
3）部分浏览器提前开了 __proto __ 的口子，使得可以通过 obj.__proto __ 直接访问原型，通过 obj.__proto __ = anotherObj 直接设置原型。
4）ECMAScript 2015 规范只好向事实低头，将 __proto __ 属性纳入了规范的一部分。

下面是关于规范对__proto __的定义：
es2010:_prototype_
在 Object.prototype 上有 __proto __ 属性，它是一个 accessor property，在 get 方法里调用 getPrototypeOf，在 set 方法里调用 setPrototypeOf。如此，可以让之前浏览器的不规范做法，作为规范的特殊场景。

像这种访问器属性，如果我们愿意，也随时可以实现出来：

var test = {
        get a() {
            return Object.getPrototypeOf(this)
        },
        set a(value) {
            return Object.setPrototypeOf(this, value)
        }
    }
    
    console.log(test.a === test.__proto__); // true
/*
如上，我们也基于 getter/setter 和 getPrototyoeOf/setPrototyoeOf，
封装了一个指向对象 prototype 的属性。为了表明这种做法的任意性，我随意选择了 a 作为属性名。
*/