Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Javascript原型链您了解多少

Javascript原型链您了解多少

作者头像
切图仔
发布于 2022-09-08 07:07:36
发布于 2022-09-08 07:07:36
19200
代码可运行
举报
文章被收录于专栏:生如夏花绚烂生如夏花绚烂
运行总次数:0
代码可运行

JS面向对象中的原型 每一个函数都有一个属性 即原型对象(显式原型:prototype)这个原型对象默认指向一个Object空对象,同时每一个原型对象(prototype)都有一个属性(constructor)又指向构造函数(构造函数和它的原型对象相互引用),同时每一个实例对象又有一个__proto__属性(隐式原型),这个属性指向其构造函数的原型对象 (Fn.prototype===fn.__proto__)。

需要注意的是每个函数也有一个隐式属性__proto__,因为函数是Function的实例

理解上面概念,引入“原型链” 如下新建一个构造函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Student(name,sex,age){
        this.name = name;
        this.sex = sex;
        this.age = age;
    }

打印这个构造函数,发现其具有prototype属性,这个属性就是构造函数的原型对象,同时这个原型对象有具有一个属性constructor属性,这个属性指向构造函数

实例化构造函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var stu1 = new Student('te','m',12);
 console.dir(stu1);

打印结果,印证上面所说的每一个对象又有一个__proto__属性,这个属性是指向构造函数的原型对象的所以proto ==构造函数的prototype

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 console.log(stu1.__proto__ === Student.prototype)
 //返回true

综上我们可以得出 构造函数 原型对象 以及对象之间的关系 如图

方便理解为每个步骤列图 1.当创建构造函数时 此时在栈区创建了一个函数名(Student)存储的是地址值(0x123)指向堆区的Function对象,这个对象会有一个prototype属性,指向默认的空Object对象

2.当实例化构造函数时 在栈取创建了一个stu1存储的是地址值(0x345)执行堆区的Student实例对象,这个对象会生成一个隐式原型__proto__属性,这个属性也执行prototype指向的对象(__proto__=Student.prototype)

3.当为原型对象添加方法时

对象通过构造函数创建,而每一个对象有一个__proto__属性,这个属性是指向原型对象的,而每一个原型对象又有一个constructor属性,这个属性指向构造函数,上面说到每一个构造函数具有一个prototype属性,这个属性就是原型对象 由此可以得到一个简单得三角关系。 如果你仔细观察可以发现原型对象也有一个__proto__属性,这并不奇怪,因为每一个对象都有一个__proto__属性这个属性是指向他构造函数的原型对象。 查看原型对象的指向

可以看到原型对象的__proto__属性(这个属性指向Object的原型对象)里面的constructor属性指向其构造函数Object 那么原型对象也是由构造函数创建,这个构造函数就是Object。上面说到只要是对象就会有一个__proto__属性,这个属性指向构造函数的的原型对象,那么Object的原型对象的原型对象又是什么呢?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 var stu1 = new Student('te','m',12);
 var o = stu1.__proto__;
 console.log(o);//构造函数的原型对象
 console.log(o.__proto__.__proto__);//Object的原型对象的原型对象

可以看到Object的原型对象的原型对象为空null那么null有原型对象吗,会不会一直循环下去?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   console.log(o.__proto__.__proto__.__proto__);//null的原型对象

抛出异常,说明最顶层的原型对象就是null,因此我们可以得出一个简单的原型链图

我们通过构造函数创建一个对象,因为每一个对象有一个__proto__属性,这个属性就指向该对象构造函数的原型对象,由于原型对象也有一个__proto__属性,这个属性指向原型对象的原型对象,我们可以看到原型对象的原型对象的构造函数为Object而原型对象是具有__proto__属性的,而Object的原型对象的原型对象指向null所以我们说最顶层的原型对象为null

说了那么多根据原型链我们可以得出对象查找/设置属性和方法的规则

结论

查找:对象在调用属性或方法时,会先在当前对象查找是否有相关属性或方法 如果没有就在当前对象的构造函数的原型对象上查找,如果还是没有则继续在原型对象的原型对象上查找直到指向null这就是我们所说的原型链。 如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Student(name,sex,age){
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.method = function(){
            console.log(123)
        }
    }//构造函数
    Student.prototype.method=function(){
        console.log(321)
    }

   var stu1 = new Student('te','m',12);
   stu1.method()

我们分别在原型对象和构造函数中写入了相同的方法,结果输出123 如果我们将构造函数中的method方法去掉则会调用原型对象上的方法输出321 同时我们可以原型链的查找规则使用Object中的属性或方法,以toString为例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 console.log(stu1.toString());
 //返回[object Object]字符串

设置:对象在设置属性/方法时,如果当前对象没有该属性或方法,则重新在当前对象创建一个同名属性/方法,并不会影响原型链上具有的属性或方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Student(name,sex,age){
        this.name = name;
        this.sex = sex;
        this.age = age;
    }//构造函数
    Student.prototype.method=function(){
        console.log(123);
    }

   var stu1 = new Student('te','m',12);
   stu1.method=function(){
       console.log(321)
   }
  
   var stu2 = new Student('w','w',13);
   stu1.method();
   stu2.method()
   // console.dir(

可以看到stu1并没有修改原型链上的方法

instanceof是如何判断的

表达式 A instanceof B 如果B函数的显示原型对象在A对象的原型链上,返回true,否在返回false

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-04-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript原型链与继承
只要是对象,一定有原型对象,就是说只要这个东西是个对象,那么一定有proto属性。(错的)
用户7043603
2022/02/26
1.6K0
从零开始学 Web 之 JS 高级(二)原型链,原型的继承
原型链表示的是实例对象与原型对象之间的一种关系,这种关系是通过__proto__原型来联系的。
Daotin
2018/08/31
2.4K0
从零开始学 Web 之 JS 高级(二)原型链,原型的继承
Javascript原型,原型链?有什么特点?
     继承: 在创建子对象时,new的第2步自动设置子对象继承构造函数的原型对象
TimothyJia
2022/05/05
7510
Javascript原型,原型链?有什么特点?
关于javascript的原型和原型链,看我就够了(二)
Object就是一个构造函数,是js内置的构造函数,上面的例子中Object就是obj的构造函数,这个例子似乎不太明显,我们继续看
陌上寒
2019/04/02
5090
关于javascript的原型和原型链,看我就够了(二)
JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
关于原型在JavaScript 进阶教程(1)--面向对象编程这篇文章已经讲过了,今天简单来复习一下。
AlbertYang
2020/09/08
5260
JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
​JavaScript 原型与原型链:深入理解 JavaScript 的核心机制
JavaScript 是一门非常灵活和强大的编程语言,它的核心机制之一就是原型和原型链。理解 JavaScript 原型和原型链对于成为一名优秀的 JavaScript 开发者是非常重要的。因此在这篇博客中,我将深入探讨 JavaScript 原型和原型链,帮助开发者更好地理解 JavaScript 的核心机制。
Front_Yue
2023/12/25
6700
​JavaScript 原型与原型链:深入理解 JavaScript 的核心机制
JavaScript学习总结(四)——this、原型链、javascript面向对象
根据题目要求,对给定的文章进行摘要总结。
张果
2018/01/04
1.5K0
JavaScript学习总结(四)——this、原型链、javascript面向对象
JS面试必问-JS原型及原型链
在js中万物皆对象,对象可以说是重中之重了。每一个对象都拥有自己的属性。但是在这个世界中有很多东西都是相似的,可以归为一类,他们有共同的方法和属性。不可能让每一个对象都定义一个属性吧。那样太消耗内存了。所以,在js中怎么才能让多个对象共享一个或多个方法呢?原型的出现就是为了解决这个问题。
用户10106350
2022/10/26
1.7K0
JS面试必问-JS原型及原型链
原型与原型链
网上有太多关于原型的资料,不是一上来就各种概念,让人看到摸不着头脑,就是贴各种代码,少个通俗的解释,所以才有了这一篇文章。
前端程序之路
2021/03/28
6230
原型与原型链
来自原形与原型链的拷问
在JS中,我们经常会遇到原型。字面上的意思会让我们认为,是某个对象的原型,可用来继承。但是其实这样的理解是片面的,下面通过本文来了解「原型与原型链」的细节,再顺便谈谈继承的几种方式。
JowayYoung
2020/04/01
5020
来自原形与原型链的拷问
关于javascript的原型和原型链,看我就够了(一)
关于js的原型和原型链,有人觉得这是很头疼的一块知识点,其实不然,它很基础,不信,往下看 要了解原型和原型链,我们得先从对象说起
陌上寒
2019/04/02
3680
关于javascript的原型和原型链,看我就够了(一)
[我的理解]Javascript的原型与原型链
一、原型与原型链的定义 原型:为其他对象提供共享属性的对象     注:当构造器创建一个对象,为了解决对象的属性引用,该对象会隐式引用构造器的"prototype"属性。程序通过constructor.prototype可以直接引用到构造器的"prototype"属性。并且添加到对象原型里的属性,会通过继承与所有共享此原型的对象共享。 原型链:每个由构造器创建的对象,都有一个隐式引用(叫做对象的原型)链接到构造器的"prototype"属性。再者,原型可能有一个非空隐式引用链接到它自己的原型,以此类推,这叫
sam dragon
2018/01/17
8960
[我的理解]Javascript的原型与原型链
JavaScript难点:原型、原型链、继承、new、prototype和constructor
原型(prototype)是 JavaScript 中对象的一个特殊属性,它用于实现属性和方法的继承。
人人都是码农
2023/12/21
1530
JavaScript难点:原型、原型链、继承、new、prototype和constructor
深入JavaScript原型链污染
相比其他语言(如Java、python等传统OOP语言),JavaScript的机制和类完全不同。
raye
2024/02/04
2361
一篇JavaScript技术栈带你了解继承和原型链
在学习JavaScript中,我们知道它是一种灵活的语言,具有面向对象,函数式风格的编程模式,面向对象具有两点要记住,三大特性,六大原则。
达达前端
2019/11/19
4670
Javascript 原型链
每个实例对象(object)都有一个私有属性(称之为 __proto__ )指向它的构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象(__proto__),层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。
超级大帅比
2021/09/06
5950
【前端基础进阶】JS原型、原型链、对象详解
在上面的例子中 o1 o2 o3 为普通对象, f1 f2 f3 为函数对象。 怎么区分,其实很简单,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。 f1,f2,归根结底都是通过 new Function()的方式进行创建的。
super.x
2019/04/12
8010
【前端基础进阶】JS原型、原型链、对象详解
原型和原型链 prototype和proto的区别
原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性
小丞同学
2021/08/16
4290
JavaScript继承与原型链
当谈到继承时,JavaScript 只有一种结构:对象。每个实例对象(object)都有一个私有属性(称之为 __proto__)指向它的构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象(__proto__),层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。
Andromeda
2023/10/21
1870
JavaScript继承与原型链
这些js原型及原型链面试题你能做对几道
在面试过程中,频频被原型相关知识问住,每次回答都支支吾吾。后来有家非常心仪的公司,在二面时,果不其然,又问原型了!
loveX001
2022/10/02
5220
推荐阅读
相关推荐
JavaScript原型链与继承
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验