JS基础-该如何理解原型、原型链?

JS基础-该如何理解原型、原型链?

JS的原型原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个概念一知半解,碰到问题靠“猜”,却不理解它的规则!

prototype 只有函数有prototype属性 let a = {} let b = function () { } console.log(a.prototype) // undefined console.log(b.prototype) // { constructor: function(){...} } Object.prototype怎么解释?

其实Object是一个全局对象,也是一个构造函数,以及其他基本类型的全局对象也都是构造函数:

function outTypeName(data, type) { let typeName = Object.prototype.toString.call(data) console.log(typeName) } outTypeName(Object) //[object Function] outTypeName(String) // [object Function] outTypeName(Number) // [object Function] 为什么只有函数有prototype属性

JS通过new来生成对象,但是仅靠构造函数,每次生成的对象都不一样。

有时候需要在两个对象之间共享属性,由于JS在设计之初没有类的概念,所以JS使用函数的prototype来处理这部分需要被共享的属性,通过函数的prototype来模拟类:

当创建一个函数时,JS会自动为函数添加prototype属性,值是一个有constructor的对象。

以下是共享属性prototype的栗子:

function People(name) { this.name = name } People.prototype.age = 23 // 岁数 // 创建两个实例 let People1 = new People('OBKoro1') let People2 = new People('扣肉') People.prototype.age = 24 // 长大了一岁 console.log(People1.age, People2.age) // 24 24

为什么People1和People2可以访问到People.prototype.age

原因是:People1和People2的原型是People.prototype,答案在下方的:构造函数是什么以及它做了什么。

原型链 __proto__和Object.getPrototypeOf(target): 对象的原型

__proto__是对象实例和它的构造函数之间建立的链接,它的值是:构造函数的`prototype。

也就是说:__proto__的值是它所对应的原型对象,是某个函数的prototype

Object.getPrototypeOf(target)全等于__proto__。

它是ES6的标准,兼容IE9,主流浏览器也都支持,,本文将以Object.getPrototypeOf(target)指代__proto__。

不要再使用__proto__:

本段摘自,具体解析请点击链接查看

__proto__属性没有写入 ES6 的正文,而是写入了附录。

原因是它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6

标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的

所以无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,应该使用:Object.getPrototypeOf(target)(读操作)、Object.setPrototypeOf(target)(写操作)、Object.create(target)(生成操作)代替

构造函数是什么、它做了什么

出自《你不知道的在js》:在js中, 实际上并不存在所谓的'构造函数',只有对于函数的'构造调用'。

上文一直提到构造函数,所谓的构造函数,实际上就是通过关键字new来调用的函数:

let newObj = new someFn() // 构造调用函数

构造/new调用函数的时候做了什么

创建一个全新的对象。

这个新对象的原型(Object.getPrototypeOf(target))指向构造函数的prototype对象。

该函数的this会绑定在新创建的对象上。

如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。

我们称这个新对象为构造函数的实例。

原型继承就是利用构造调用函数的特性

SubType.prototype = new SuperType(); // 原型继承:SubType继承SuperType // 挂载SuperType的this和prototype的属性和方法到SubType.prototype上

构造调用的第二点:将新对象的Object.getPrototypeOf(target)指向函数的prototype

构造调用的第三点:该函数的this会绑定在新创建的对象上。

新对象赋值给SubType.prototype

原型类型有个缺点:多个实例对引用类型的操作会被篡改。

因为每次实例化引用类型的数据都指向同一个地址,所以它们读/写的是同一个数据,当一个实例对其进行操作,其他实例的数据就会一起更改。

原型链是什么

来看个例子:

js function foo() { } const newObj = new foo() // 构造调用foo 返回一个新对象 const newObj__proto__ = Object.getPrototypeOf(newObj) // 获取newObj的原型对象 newObj__proto__ === foo.prototype // true 验证newObj的原型指向foo const foo__proto__ = Object.getPrototypeOf(foo.prototype) // 获取foo.prototype的原型 foo__proto__ === Object.prototype // true foo.prototype的原型是Object.prototype `` 如果用以前的语法,从`newObj`查找`foo`的原型,是这样的:js
newObj.__proto__.__proto__ // 这种关系就是原型链
```

可以用以下三句话来理解原型链

每个对象都拥有一个原型对象: newObj的原型是foo.prototype。

对象的原型可能也是继承其他原型对象的: foo.prototype也有它的原型Object.prototype。

一层一层的,以此类推,这种关系就是原型链

一个对象是否在另一个对象的原型链上

如果一个对象存在另一个对象的原型链上,我们可以说:它们是继承关系。

判断方式有两种,但都是根据构造函数的prototype是否在原型链上来判断的:

instanceof: 用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpywdd.html