详解JS原型与原型链的关系

1、构造函数原型prototype

(1)、构造函数通过原型分配的函数是所有对象所共享的;
(2)、JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象;
(3)、注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有;

function student(age, name) {
	this.age = age;
	this.name = name;
}
student.prototype.school = function() {
	console.log('理工大学');
}
var stu1 = new student('小王', 18);
var stu2 = new student('小张', 22);

(4)、看到这里原型是什么,他就是一个对象,我们称prototype为原型对象;
(5)、原型的作用是什么呢?四个字,共享方法

2、对象原型__proto__

(1)、对象都会有一个属性__ proto__指向构造函数的 prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有_ proto_ 原型的存在。
(2)、在对象身上系统自己添加了一个__proto__指向我们构造函数的原型对象,所以__proto__对象原型和原型对象prototype是等价的。
(3)、我们验证一下,看看会输出什么:

console.log(stu1.__proto__ === student.prototype);

 答案:输出是true,证明对象原型__proto__和原型对象protptype是等价的

(4)、所以方法的查找规则就是首先看test对象身上是否有school方法,如果有就执行这个对象上的school,如果没有school这个方法, 因为有__proto__的存在,就去构造函数原型对象prototype身上去查找school这个方法。
(5)、如果觉得还是不太明白是什么关系,下图可以搞懂你的疑问:

3、constructor构造函数

(1)、对象原型(__proto__) 构造函数( prototype )原型对象,里面都有一个属性是constructor属性,称为constructor为构造函数,因为它指回构造函数本身。
(2)、我们打印一下student.prototype和stu1.__type__看看是否存在constructor属性:

console.log(student.prototype);
console.log(stu1.__proto__);

(3)、如上图所示,可以看到里面都有constructor属性,那constructor有什么作用呢?
(4)、constructor主要用于记录该对象引用是哪个构造函数,它可以让原型对象重新指向原来的构造函数。
(5)、现在我们重新更新一下构造函数、实例、原型对象三者之间的关系图:

4、原型链

(1)、因为student原型对象(prototype)也是一个对象,我们之前说了只要是对象就有对象原型
(2)、那我们打印一下原型对象看看里面是否有原型:

function student(age, name) {
	this.age = age;
	this.name = name;
}
student.prototype.school = function() {
	console.log('理工大学');
}
var stu1 = new student('小王', 18);
var stu2 = new student('小张', 22);
console.log(student.prototype);

(3)、可以看到student原型对象里也有一个原型,又因为原型指向的是原型对象,那么我们这个student.prototype里面的__proto__指向的是谁呢?
(4)、我们打印一下:

console.log(student.prototype.__proto__);

(5)、可以看到指向的是这个constructor指向的是Object原型对象

(6)、Object原型对象是由谁创建出来的呢,毫无疑问是Object构造函数创建出来的,那Object原型对象也是一个对象,那它也有一个原型,这个原型指向的又是谁呢?

(7)、我们打印一下:

console.log(Object.prototype.__proto__);

(8)、如上图所示,打印为null,这样就到了原型链的最顶层了,这样我们把这些串起来就能得到一个完整的原型链图:

  • 14
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 原型 在 JavaScript 中,每个对象都有一个原型对象,原型对象是一个普通的对象,其中包含了一些属性和方法。当我们访问对象的属性或方法时,如果该对象本身没有该属性或方法,JavaScript 引擎会自动去该对象的原型对象中查找,如果原型对象中仍然没有,则会在原型对象的原型对象中查找,一直查找到 Object.prototype,最后如果还没有找到,则会返回 undefined 。 2. 继承 在 JavaScript 中,我们可以通过继承来实现代码复用和对象之间的关系。JavaScript 中的继承有两种方式:通过原型链继承和通过构造函数继承。 3. 原型继承 原型继承是指在 JavaScript 中通过设置对象的原型来实现继承的方式。具体的实现方式有很多种,其中一种比较常见的方式是使用 Object.create() 方法来创建一个新对象,并将原型指定为另一个对象。示例如下: ``` let animal = { eat() { console.log("eating"); } }; let rabbit = Object.create(animal); rabbit.eat(); // 输出 "eating" ``` 在上面的示例中,我们首先定义了一个 animal 对象,它包含一个 eat() 方法。然后我们通过 Object.create() 方法创建了一个新对象 rabbit,并将其原型设置为 animal,这样就实现了 rabbit 对象从 animal 对象继承 eat() 方法的功能。我们可以通过调用 rabbit.eat() 来验证该方法确实存在于 rabbit 对象中。 4. 关键字 在 JavaScript 中,有一些关键字和函数可以用来实现原型继承。其中最常用的关键字是 extends 和 super。 extends 关键字可以用来继承一个类,示例如下: ``` class Animal { eat() { console.log("eating"); } } class Rabbit extends Animal { run() { console.log("running"); } } let rabbit = new Rabbit(); rabbit.eat(); // 输出 "eating" rabbit.run(); // 输出 "running" ``` 在这个示例中,我们首先定义了一个 Animal 类,并为其定义了一个 eat() 方法。然后我们定义了一个 Rabbit 类,该类使用 extends 关键字继承了 Animal 类,并为其定义了一个 run() 方法。我们通过实例化 Rabbit 类来创建一个 rabbit 对象,并通过调用 rabbit.eat() 和 rabbit.run() 来验证其继承效果。 super 函数用于在子类中调用父类的同名方法。示例如下: ``` class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + " makes a noise."); } } class Dog extends Animal { constructor(name) { super(name); } speak() { console.log(this.name + " barks."); } } let dog = new Dog("Rex"); dog.speak(); // 输出 "Rex barks." ``` 在这个示例中,我们首先定义了一个 Animal 类,并为其定义了一个构造函数和一个 speak() 方法。然后我们定义了一个 Dog 类,该类继承了 Animal 类,并为其定义了一个构造函数和一个 speak() 方法。 在 Dog 类的构造函数中,我们调用了父类的构造函数,并传入了 name 参数。在 Dog 类的 speak() 方法中,我们使用 super 函数调用了父类的同名方法,并将其重写为输出“barks.”。我们通过实例化 Dog 类来创建一个 dog 对象,并通过调用 dog.speak() 来验证其继承效果。 总结 在 JavaScript 中,原型继承是一种非常重要的对象复用和代码组织方式。我们可以使用原型对象来实现原型继承,也可以使用关键字和函数来简化继承的过程。在实际开发中,我们需要根据具体的业务场景和需求来选择最合适的继承方式和实现方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值