什么是js的原型链

简介: 什么是js的原型链

1.什么是原型链:当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会通过它的__proto__隐式属性,找到它的构造函数的原型对象,如果还没有找到就会再在其构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链。


1、__proto__


每个通过构造函数创建出来的实例对象,其本身有个属性__proto__,这个属性会指向该实例对象的构造函数的原型对象。


__proto__并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。生产环境中,我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型,然后再来为原型添加方法/属性。

    // 构造函数
    function Preson(name, age) {
      this.name = name;
      this.age = age;
    }
    // Person的构造函数的原型方法say
    Preson.prototype.say = function (word) {
      console.log(`${this.name}说:${word}`);
    }
 
    const p1 = new Preson('张三', 18); // 创建一个Person实例对象
    const p2 = new Preson('李四', 20); // 新创建一个Proson实例对象
    p1.say('hello world'); // 调用公共方法
    console.log(p1.hasOwnProperty('say')); // false
    p1.__proto__.do = function () {
      console.log('往原型对象中添加方法');
    }
    p2.do(); // 打印出往原型对象中添加方法

2.原型链的尽头:创建了一个A的构造函数,打印出它的prototype属性,我盟可以再浏览器中看到,它有个__proto__属性指向了一个Object对象。


原型链就是Prototype,他里面有很多方法,


该对象的构造函数为function Object,由此可以得到,所有的原型对象的__proto__属性都是指向function Object的原型对象。而function Object的原型对象在上图中我们可以得知是不存在__proto__这个属性的,它指向了null,我们就得知了原型链的尽头是null。


相关文章
|
4天前
|
JavaScript 前端开发
谈谈对 JavaScript 中的原型链的理解。
JavaScript中的原型链是实现继承和共享属性的关键机制,它通过对象的`prototype`属性连接原型对象。当访问对象属性时,若对象本身没有该属性,则会查找原型链。此机制减少内存占用,实现代码复用。例如,实例对象可继承原型对象的方法。原型链也用于继承,子类通过原型链获取父类属性和方法。然而,原型属性共享可能导致数据冲突,且查找过程可能影响性能。理解原型链对JavaScript面向对象编程至关重要。如有更多问题,欢迎继续探讨😊
16 3
|
4天前
|
JavaScript 前端开发
深入理解JavaScript中的原型链
本文将深入探讨JavaScript中的原型链机制,从根本上理解它的工作原理以及在开发中的应用。我们将介绍原型链的概念、如何创建和使用原型、原型链的继承机制以及一些常见的原型链相关问题。通过对原型链的详细解析,读者将能够更好地理解JavaScript中的继承、原型对象和原型链之间的关系,提高代码的质量和可维护性。
|
4天前
|
存储 前端开发 JavaScript
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
|
4天前
|
前端开发 JavaScript 开发者
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
|
4天前
|
存储 JavaScript 前端开发
原型链:揭开JavaScript背后的神秘面纱
原型链:揭开JavaScript背后的神秘面纱
|
4天前
|
前端开发 JavaScript
JavaScript中的原型和原型链
JavaScript中的原型和原型链
|
4天前
|
JavaScript 前端开发 安全
JavaScript原型链的使用
【4月更文挑战第22天】JavaScript中的原型链是理解继承的关键,它允许对象复用属性和方法,减少代码冗余。示例展示如何通过原型链实现继承、扩展内置对象、构造函数与原型链的关系以及查找机制。应注意避免修改`Object.prototype`,使用安全方式设置原型链,并谨慎处理构造函数和副作用。
|
4天前
|
JavaScript 前端开发
JavaScript原型,原型链
JavaScript原型,原型链
|
2天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
11 1
|
3天前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础