前端 JS 经典:原型和原型链

devtools/2024/9/22 16:11:18/

1. 前言

这个前言很重要,要理解原型、原型链,就需要理解前言里面的一些定义。开始!

所有对象都是通过 new 一个函数去创建的,而这个函数通常首字母大写,被称为构造函数。我们也可以通过自定义构造函数,去 new 一个对象。平时,我们通过语法糖直接赋值对象,但他本质是通过 new Object 来创建对象的。数组同理。函数也同理,但是不推荐通过 new Function 去创建函数。

所有的函数也是对象,包括构造函数,本质是通过 new Function 创建,那 Function 又是怎么来的呢,是直接放到内存里面的,就是 JS 引擎启动的时候,直接将 Function 放入内存中。不通过任何东西来创建。

所有对象都是引用类型,什么是引用类型呢,就是保存的是地址,赋值的也是地址,它们是引用传递。

// 创建对象
let obj = { name: "yqcoder" };
// 本质如下
let obj = new Object({name: "yqcoder",
});// 创建数组
let arr = [1, 2, 3];
// 本质如下
let arr = new Array(1, 2, 3);// 创建函数
let fn = function (str) {return str;
};
// 本质如下,不建议这样去创建
let fn = new Function("str", "return str");// 自定义构造函数创建对象
let Person = function (name, age) {this.name = name;this.age = age;
};
let yq = new Person("yqcoder", 18);
console.log(yq); // {name: 'yqcoder', age: 18}

2. 原型 prototype

所有函数都有一个属性 prototype,称之为函数原型。默认情况下,prototype 是一个对象,所以 prototype 是通过 new Object 创建的。而这个 prototype 对象里面默认有一个 constructor 属性,它也是一个对象,它指向构造函数本身。

let fn = function () {};
fn.prototype.constructor == fn; // true

3. 隐式原型 __proto__

所有对象都有一个属性 __proto__,称之为隐式原型。默认情况下,隐式原型指向创建该对象的构造函数的原型。

let Person = function (name, age) {this.name = name;this.age = age;
};
let yq = new Person("yqcoder", 18);yq.__proto__ === Person.prototype; // true

通过同一个构造函数产生的对象,它们有一块内存空间是公用的,哪一块空间共用呢,就是它们的隐式原型指向的内存空间是共用的。换句话说,就是它们的构造函数的原型是共用的。构造函数里共用的方法,一般写在 prototype 里,这样构建的对象,生成的方法是指向同一个地址的,节约了内存空间。同时还可以使用 this,谁调用这个方法,这个 this 就指向谁。效果如下:

// 构造函数 Person
let Person = function (name, age) {this.name = name;this.age = age;
};
Person.prototype.sayHello = function () {console.log(`${this.name} say hello`);
};let user1 = new Person("yy", 18);
let user2 = new Person("qq", 18);
user1.__proto__.sayHello == user2.__proto__.sayHello; // trueuser1.sayHello(); // yy say hello
user2.sayHello(); // qq say hello

4. 原型链

什么叫原型链,就是每一个对象都有隐式原型 __proto__,隐式原型的指向就形成了一个链条,可以称之为原型链。而 Function 的__proto__指向自身的原型。前言说过 Function 的特殊。Object 的 prototype 的__proto__指向 null。

当访问一个对象的成员时,访问步骤:先访问对象自身是否拥有该成员,如果有,直接使用,如果没有,再看该对象的隐式原型上有没有该成员,如果有直接使用。如果也没有,在原型链中依次查找。如上例子,为什么 user1 可以访问 sayHello,因为在隐式原型中有 sayHello。所以可以访问。

如下例子:先在自身找 sex,没有,然后在 yq.__proto__ 里找,因为 yq.__proto__ == Person.prototype,所以也没有,再在 Person.prototype.__proto__ 里找,因为 Person.prototype.__proto__ == Object.prototype,还是没有,最后在 Object.prototype.__proto__ 里找,因为 Object.prototype.__proto__ == null,所以 yq.sex == undefined;

let Person = function (name, age) {this.name = name;this.age = age;
};
let yq = new Person("yq", 18);
yq.sex; // undefined

5. 猴子补丁

什么叫猴子补丁,就是在函数原型中加入成员,以增强其对象的功能,但是猴子补丁会导致原型污染,所以使用需谨慎。


http://www.ppmy.cn/devtools/41678.html

相关文章

图文详解JUC:Wait与Sleep的区别与细节

目录 一.Wait() 二.Sleep() 三.总结Wait()与Sleep()的区别 一.Wait() 在Java中,wait() 方法是 Object类中的一个方法,用于线程间的协作。当一个线程调用wait() 方法时,它会释放对象的锁并进入等待状态,直到其他线程调用相同对…

练习题(2024/5/14)

1四数相加 II 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1a; 输入&#xff1a;n…

PyQt5 与 SIP 的版本对应关系

PyQt5 与 SIP 的版本对应关系 PyQt5 与 SIP 的版本之间有一定的对应关系&#xff0c;只有版本号相互匹配才能正确使用。一般来说&#xff0c;PyQt5 会支持多个版本的 SIP&#xff0c;但不同的 PyQt5 版本对应的 SIP 版本可能会有所不同。为了确保稳定性和兼容性&#xff0c;我…

1689 ssm社区老人危机干预系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java ssm社区老人危机干预系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主…

表字符集统一使用utf8mb4,核对规则为utf8mb4_bin

在 MySQL 数据库中&#xff0c;当提到“表字符集统一使用 utf8mb4&#xff0c;核对规则为 utf8mb4_bin”的时候&#xff0c;意思涉及到字符集和核对规则&#xff08;collation&#xff09;的设置。下面是这句话的具体解释&#xff1a; 字符集&#xff08;Character Set&#xf…

班组长不懂如何与下属沟通?教你用“三要四不要”沟通原则

班组长与员工关系和谐程度&#xff0c;对团队士气效率影响重大。 与员工关系融洽的班组长更能获得大家的信任和支持&#xff0c;还会促进团队凝聚力&#xff0c;激发员工的工作积极性和创新精神。 然而&#xff0c;有的班组长只有在安排工作、教导技能时充满自信&#xff0c;…

[蓝桥杯]真题讲解:AB路线(BFS+分层图)

[蓝桥杯]真题讲解&#xff1a;AB路线&#xff08;BFS分层图&#xff09; 一、视频讲解二、正解代码1、C2、python33、Java 一、视频讲解 [蓝桥杯]真题讲解&#xff1a;AB路线&#xff08;BFS分层图&#xff09; 二、正解代码 1、C #include<bits/stdc.h> #define INF …

5.9网络协议

由网卡发送数据通过网线进行发送&#xff0c;当网卡接收到信号以后将数据传给内核数据区&#xff0c;然后由操作系统交给相应的进程。 将数据进行发送的时候需要借助于网线实现&#xff0c;这个时候会出现当传输的数据比较远的时候就借助于中继器将信号进行再生扩大&#xff0…