• js中的原型链理解


     JavaScript 中,当创建一个函数的时候,这个函数就会自动创建一个 prototype 属性,该属性指向的就是原型对象。

    1. // 构造函数
    2. function Me() {
    3. this.uName = "shuang";
    4. this.sayName = function () {
    5. console.log(this.uName);
    6. };
    7. }
    8. let m1 = new Me(); // 创建实例
    9. console.log(m1.uName) // shuang;
    10. m1.sayName(); // shuang
    11. Me.prototype.sex = "男";
    12. Me.prototype.saySex = function () {
    13. console.log(this.sex);
    14. }
    15. console.log(m1.sex); // 男
    16. m1.saySex(); // 男

    通过上面的案例可以很清楚的认识到,可以通过 prototype 指向的原型对象中添加新的属性和方法,并且可以通过实例进行访问。

    何为原型链?

    在JavaScript中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止(person → Person → Object),这样就形成了一个原型指向的链条,专业术语称之为原型链

    当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型,Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined。注意:Object对象是老祖宗,没人比他更大了,所以Object的_proto_为空, 即原型链的尽头一般来说都是 Object.prototype

    原型链图

     

    原型就是 prototype, 是每个函数都具有的属性

    原型链就是 __proto__, 是每个对象都具有的属性

     原型链指向

    1. p.__proto__ // Person.prototype
    2. Person.prototype.__proto__ // Object.prototype
    3. p.__proto__.__proto__ //Object.prototype
    4. p.__proto__.constructor.prototype.__proto__ // Object.prototype
    5. Person.prototype.constructor.prototype.__proto__ // Object.prototype
    6. p1.__proto__.constructor // Person
    7. Person.prototype.constructor // Person
    1. console.log(person.__proto__ === Person.prototype)//true
    2. console.log(Person.prototype.constructor===Person)//true
    3. console.log(Object.prototype.__proto__ === null) // true
    4. //顺便学习一个ES5的方法,可以获得对象的原型
    5. console.log(Object.getPrototypeOf(person) === Person.prototype) // true

  • 相关阅读:
    基于微信小程序的健身小助手打卡预约教学系统(源码+lw+部署文档+讲解等)
    华为OD机试 - 数组组成的最小数字(Java 2023 B卷 100分)
    栈——算法专项刷题(六)
    2022年十次最大的云中断
    [附源码]计算机毕业设计Springboot电影推荐网站
    贷款问题——C语言
    DAB-DETR源码最全讲解
    管道实现进程间通信之命名管道
    如何使用idea创建纯净版web工程?
    818专业课【考经】—《信号系统》之章节概要:第二章 连续时间信号的时域分析
  • 原文地址:https://blog.csdn.net/weixin_39907729/article/details/126131552