如果面试官问:请解释下原型链的工作原理。然后你咋说?

开发 前端
当我们访问student1的name​属性时,它直接存在于student1对象中。但是当我们调用sayHello​方法时,这个方法不在student1​对象中,因此会沿着原型链查找,并最终在Person.prototype中找到。

1. 解释原型链的工作原理

原型链是JavaScript中实现继承和查找属性的一种机制。

在JavaScript中,每个函数都有一个prototype属性,它指向一个对象,这个对象包含可以被该函数实例共享的属性和方法。

当创建一个对象时,该对象会从它的构造函数那里继承prototype对象。

当尝试访问一个对象的某个属性或者方法时,如果该对象本身没有这个属性或方法,JavaScript引擎会沿着原型链向上查找,直到找到这个属性或方法为止。

如果在整个原型链上都没有找到,则认为该属性或方法不存在。

1.1. 原型链工作原理的一个简要概述:

对象与原型:

  • 每个对象都有一个内部链接[[Prototype]],指向它的原型对象。
  • 普通对象的原型通常是Object.prototype。
  • 函数对象也有一个prototype属性,用于作为其构造函数创建的对象的原型。

构造函数与原型:

  • 构造函数创建的对象会继承该构造函数的prototype对象。
  • 构造函数的prototype对象通常包含一些共享的方法和属性。

原型链的查找:

  • 当访问一个对象的属性或方法时,如果该对象自身没有这个属性或方法,则JavaScript引擎会查找该对象的[[Prototype]]。
  • 如果在[[Prototype]]中也没有找到,则继续沿着[[Prototype]]链向上查找。
  • 查找过程一直持续到Object.prototype,这是原型链的终点,其[[Prototype]]值为null。

1.2. 一个简单的示例来说明原型链的运作方式:

function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
};

function Student(name, grade) {
    Person.call(this, name); // 调用父类构造函数
    this.grade = grade;
}

// 设置Student的原型为Person的实例
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student; // 修复constructor指向

Student.prototype.study = function(subject) {
    console.log(this.name + ' is studying ' + subject);
};

const student1 = new Student('Alice', 10);

console.log(student1.name); // "Alice"
student1.sayHello(); // "Hello, Alice"
student1.study('Math'); // "Alice is studying Math"

在这个例子中:

  • Person构造函数定义了一个sayHello方法。
  • Student构造函数继承自Person。
  • Student还添加了自己的study方法。
  • 创建了一个Student实例student1。

当我们访问student1的name属性时,它直接存在于student1对象中。

但是当我们调用sayHello方法时,这个方法不在student1对象中,因此会沿着原型链查找,并最终在Person.prototype中找到。

这就是原型链的基本工作原理。

通过这种方式,JavaScript实现了基于原型的继承机制。

责任编辑:武晓燕 来源: 前端爱好者
相关推荐

2024-08-27 12:36:33

2021-06-02 11:25:18

线程池Java代码

2023-11-29 08:00:53

JavaTreeMap底层

2024-02-21 16:42:00

2024-02-27 15:23:48

RedLock算法Redis

2020-07-28 00:58:20

IP地址子网TCP

2024-01-29 10:08:11

零拷贝Zero-copyCPU 拷贝

2023-12-29 13:45:00

2020-07-30 07:58:36

加密算法

2024-03-11 18:18:58

项目Spring线程池

2022-01-05 09:55:26

asynawait前端

2021-07-28 10:08:19

类加载代码块面试

2015-08-13 10:29:12

面试面试官

2023-09-12 14:56:13

MyBatis缓存机制

2021-12-25 22:31:10

MarkWord面试synchronize

2021-11-08 09:18:01

CAS面试场景

2021-03-16 22:25:06

作用域链作用域JavaScript

2021-03-17 08:39:24

作用域作用域链JavaScript

2022-11-04 08:47:52

底层算法数据

2022-06-07 12:03:33

Java内存模型
点赞
收藏

51CTO技术栈公众号