JavaScript原型链

var xl = new Student(18,‘小熊’);

var wh = new Student(17,‘王欢’);

xl.score();

当打印这个构造函数创建的实例时,可以发现:

console.log(xl);

在这里插入图片描述

我们创建的这个实例继承了该构造函数的属性和方法。

可以表示为:

在这里插入图片描述

再打印实例对象看内部有哪些属性。

console.log(xl);

在这里插入图片描述

可以发现,该实例内部具有一个对象原型__proto__,并且其指向构造函数的原型对象。

尝试调用实例对象的score方法

xl.score()

在这里插入图片描述

调用成功,可是xl实例对象上并没有该方法,那么,它是如何调用的呢?

接下来,我们先判断实例对象的对象原型和构造函数的原型对象是否相等

console.log(xl.proto === Student.prototype);

打印结果为:

在这里插入图片描述

二者相等。所以,我们明白了:当我们要得到实例对象xl的score方法时,首先看xl对象身上是否具有score这个方法,因为有__proto__的存在,就去构造函数原型对象prototype身上去查找该方法。

可以得到如下的图示:

在这里插入图片描述

不管打印构造函数的prototype还是实例对象的__proto__,我们都可以发现他们都有一个constructor属性。并且都指向Student构造函数。

console.log(Student.prototype);

console.log(xl.proto);

在这里插入图片描述

所以我们又可以得到下图:

在这里插入图片描述

我们知道Student原型对象prototype也是一个对象,而每一个对象都有__proto__属性,我们来打印一下,看看是否可以得到__proto__属性

console.log(Student.prototype);

在这里插入图片描述

可知该对象的确有一个__proto__属性,并且指向Object对象,而且在它的内部,又有一个contructor属性,指向Object原型对象prototype

通过下述代码验证:

console.log(Student.prototype.proto === Object.prototype);

得到的结果为:

在这里插入图片描述

所以我们又可以得到下图:

在这里插入图片描述

同理,我们可以知道object原型对象prototype是由Object构造函数创建的,并且该构造函数可以通过prototype对象得到该原型对象。故而,该原型对象里面还有一个constructor属性指向Object构造函数。

可以得到:

在这里插入图片描述

最后,我们的Object原型对象prototype又指向什么呢?

输出如下代码:

### JavaScript 原型链详解 JavaScript原型链是实现对象继承的一种机制。每个对象在创建时都会关联一个原型对象,并从该原型继承属性和方法。这种原型关系可以形成一条链式结构,称为原型链。 #### 1. 原型链的基本概念 每个 JavaScript 对象都有一个内部属性 `[[Prototype]]`,它指向该对象的原型对象。当尝试访问对象的一个属性或方法时,如果对象本身没有该属性或方法,JavaScript 引擎会沿着原型链向上查找,直到找到该属性或方法,或者到达原型链的末端(即 `null`)[^2]。 #### 2. 原型链的工作机制 以下是一个简单的代码示例来说明原型链的工作原理: ```javascript function Person(name) { this.name = name; } Person.prototype.greet = function() { return `Hello, my name is ${this.name}`; }; const person1 = new Person("Alice"); console.log(person1.greet()); // 输出: Hello, my name is Alice ``` - 在上述代码中,`person1` 是通过 `new Person()` 创建的实例对象。 - `person1` 自身并没有 `greet` 方法,但它的 `[[Prototype]]` 指向了 `Person.prototype`,而 `Person.prototype` 中定义了 `greet` 方法。 - 因此,当调用 `person1.greet()` 时,JavaScript 引擎会在 `person1` 的原型链上找到 `greet` 方法并执行[^3]。 #### 3. 原型链的继承 原型链不仅可以用于单层继承,还可以用于多层继承。例如: ```javascript function Animal() {} Animal.prototype.eat = function() { return "I am eating"; }; function Dog() {} Dog.prototype = Object.create(Animal.prototype); Dog.prototype.bark = function() { return "Woof!"; }; const myDog = new Dog(); console.log(myDog.eat()); // 输出: I am eating console.log(myDog.bark()); // 输出: Woof! ``` - 在这个例子中,`Dog.prototype` 被设置为 `Animal.prototype` 的实例,因此 `Dog` 的实例可以继承 `Animal` 的方法。 - 当调用 `myDog.eat()` 时,JavaScript 引擎会沿着原型链找到 `Animal.prototype.eat` 方法并执行[^1]。 #### 4. 注意事项 - 原型链的末端总是 `null`,因为所有原型链最终都会指向 `Object.prototype`,而 `Object.prototype` 的 `[[Prototype]]` 是 `null`。 - 如果在原型链上修改共享的属性或方法,可能会对所有继承该原型的对象产生影响。因此,在设计继承结构时需要特别小心。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值