js——proto&constructor&prototype

最新推荐文章于 2023-02-16 16:24:47 发布

意瑚琏

最新推荐文章于 2023-02-16 16:24:47 发布

阅读量96

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40422539/article/details/108515415

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

引用博文.

总述：

我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。
__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就相当于在null上取值，会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，即f1.proto === Foo.prototype。
constructor属性的含义就是指向该对象的构造函数，所有函数（此时看成对象了）最终的构造函数都指向Function。

图示

在这里插入图片描述

1._proto_

首先，我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的。但是由于JS中函数也是一种对象，所以函数也拥有__proto__和constructor属性，这点是致使我们产生困惑的很大原因之一。上图有点复杂，我们把它按照属性分别拆开，然后进行分析：

proto
在这里插入图片描述

第一，这里我们仅留下 proto 属性，它是对象所独有的，可以看到__proto__属性都是由一个对象指向一个对象，即指向它们的原型对象（也可以理解为父对象），那么这个属性的作用是什么呢？它的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（可以理解为父对象）里找，如果父对象也不存在这个属性，则继续往父对象的__proto__属性所指向的那个对象（可以理解为爷爷对象）里找，如果还没找到，则继续往上找…直到原型链顶端null（可以理解为原始人。。。），再往上找就相当于在null上取值，会报错（可以理解为，再往上就已经不是“人”的范畴了，找不到了，到此结束，null为原型链的终点），由以上这种通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。
其实我们平时调用的字符串方法、数组方法、对象方法、函数方法等都是靠__proto__继承而来的。

指向它们的原型对象（也可以理解为父对象）

2.prototype

在这里插入图片描述

prototype是函数所独有的，它是从一个函数指向一个对象。它的含义是函数的原型对象，也就是这个函数（其实所有函数都可以作为构造函数）所创建的实例的原型对象，由此可知：f1.proto === Foo.prototype，它们两个完全一样。
作用:包含可以由特定类型的所有实例共享的属性和方法，也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候，其实会默认同时创建该函数的prototype对象。

某个函数实例化了很多对象，但是原型对象有公用的属性，所以就在函数内保留了原型对象的地址。

3.constructor

在这里插入图片描述

constructor属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数，每个对象都有构造函数（本身拥有或继承而来，继承而来的要结合__proto__属性查看会更清楚点，如总图所示），从上图中可以看出Function这个对象比较特殊，它的构造函数就是它自己（因为Function可以看成是一个函数，也可以是一个对象），所有函数和对象最终都是由Function构造函数得来，所以constructor属性的终点就是Function这个函数。

就是对象找哪个是自己的构造函数

实操

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script>
     function Foo(name) {
         var name;
         this.name=name;
     };
     let f1 = new Foo("张三");
     console.log(f1.__proto__);
     console.log(Foo.prototype);
     console.log(f1.constructor);
    </script>
</body>

</html>

f1.__proto__是指向f1的原型对象,f1的原型对象为Object
console.log(f1)

在这里插入图片描述
2. prototype
函数独有的。指向原型对象，（公有对象）
f1.proto === Foo.prototype

在这里插入图片描述

3.constructor
对象找构造函数

console.log(f1.constructor); 在这里插入图片描述

意瑚琏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js——__proto__&constructor&prototype

今天看深入浅出vue.js看到Array的变化侦测，遇到prototype和proto感到很陌生，于是就探索了一番引用博文.总述：我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，.
复制链接

扫一扫