你会知道有关原型与原型链题的那些事~

最新推荐文章于 2024-09-14 19:44:09 发布

AI画手小王

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量240

点赞数

文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/qq_53225741/article/details/127328587

版权

你还会想知道的有关的原型

在之前总结中，有总结到一些关于原型与原型链的知识点。本来还想加一下各类笔试中，有关原型与原型链的题目，后面忙着忙着给忘了，现在补上，同时也加深一下自己的理解。

首先还是得把这个图先放置出来，重新好好理解，_{方便给后面的解释能好好摸鱼}

特别需要提醒一点：

Object 实例化对象的 __proto__ 是指向 Object.prototype

而 Object 本身 __proto__ 是指向 Function.prototype

即是任何一个能new对象的构造器，都是Function实例化的结果（正如函数是一类公民的说法一样

简单说就是构造器 __proto__ 是指向 Function.prototype

基础

function f1(tname) {if(tname) {this.tname = tname
  }
}
f1.prototype.tname = 'change'
Object.prototype.tname = 'Object change'
Function.prototype.tname = 'function change'
const ff = new f1()
console.log(ff.tname) // change

解释：(直接上图理解

所以在实例后的f，找属性，在本身找不到的情况下，会向原型对象去查找

最终输出 change

同理如果题目改成：

function f1(tname) {
++this.tname = tname
}
f1.prototype.tname = 'change'
Object.prototype.tname = 'Object change'
Function.prototype.tname = 'function change'
const ff = new f1('no change')
console.log(ff.tname)

那最终会输出 no change

进阶

Array.a =1
Array.prototype.a = 2
Function.prototype.a = 3
Object.prototype.a = 4
var arr = []
console.log(arr.a);
console.log(arr.length.a);
console.log(arr.forEach.a);
console.log(Function.a);
console.log(Object.a);

输出结果为：

不知道这次伙伴们能不能做对呢，可能在最后一个输出上有点疑惑，现在就好好学习加以解释一下

解释：

第一个输出: console.log(arr.a) // 2

首先要明确一点 arr = [] 和 arr = new Array() 的申明方式是一样的

因此会存在 arr.__proto__ = Array.prototype

所以 arr 在本身中找不到原型就向原型对象查找最后是找到 2 的数据

第二个输出：console.log(arr.length.a) // 4

首先先进行一层层解析

arr.length 输出的是 arr 数组的长度再去输出该长度下 a 的值

有一点很特殊：长度？（Number数据类型原始数据类型会有 a 的属性？）

所以，在这里需要转一个弯

原始数据会有自己的 __proto__ 指向他的构造器的原型对象的

const num = 1
const str = 'str'
const bool = true
const tbigint = 10n

console.log(num.__proto__) // 输出Number原型对象
console.log(str.__proto__) // 输出String原型对象
console.log(bool.__proto__) // 输出Boolean原型对象
console.log(tbigint.__proto__) // 输出Bigint原型对象

console.log(num.__proto__.__proto__ === Object.prototype) //true
console.log(str.__proto__.__proto__ === Object.prototype) //true
console.log(bool.__proto__.__proto__ === Object.prototype) //true
console.log(tbigint.__proto__.__proto__ === Object.prototype) //true

所以最终都会指向 Object.prototype，输出 4

第三题输出：console.log(arr.forEach.a) // 3

大概解释和上面差不多的，同样需要一层层解构

先对 arr.forEach 的 a 属性进行输出

而 arr.forEach 是一个方法，所以先在本身方法查找有无该属性，没有就从原型对象查找 Funtion.prototype

最终输出 3

第四题输出：console.log(Function.a) // 3

还是之前的知识点