avatar

目录
JavaScript的原型,原型链到底是什么!看完这篇绝对会有感悟_

JavaScript 原型链

平常老听别人说什么原型链,我总是半知半解的,终于有时间好好梳理一下!给大家介绍我老婆。

图解

我们先来看一下这张图,不理解没关系,我来慢慢解释,先有个印象!当然结衣父母也可以生男孩(我觉得还是生女孩好 ohhhhhh)
在这里插入图片描述

关卡1:通过构造函数 => new一个对象

听说您还没有对象?没关系,我来给你new一个!

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. 首先通过构造函数,初始化一个女孩儿
function Girl(name, age, bustSize) {
this.name = name;
this.age = age;
this.bustSize = bustSize;
this.show = function () {
console.log(`初次见面,我叫${this.name},请多指教!`);
}
}

// 2. 实例化一个女朋友
var girlfriend1 = new Girl('唐泽雪穗', 22, 'D');

// 3. 女朋友的自我介绍
girlfriend1.show(); //初次见面,我叫唐泽雪穗,请多指教!

以上实例,我们可以知道,通过构造函数能够new一个老婆对象 出来。

关卡2:实例化对象 => 原型对象

我们再来看看 girlfriend1里都有些什么吧!

javascript
1
console.log(girlfriend1);

在这里插入图片描述

  • 我们发现,除了我们定义的年龄,胸围,名字和show方法之外,又多了一个__proto__,这个我们没写呀!!对,这个__proto__就是浏览器帮我们写的
  • 其实,每一个对象都会有__proto__,他是实例化对象的原型对象
  • 你可以理解为:我的对象,石原里美,她不是石头缝里蹦出来的石猴,而是我的可爱的老丈人生的,原型对象相当于爹

我再给大家介绍另一个我的老婆。

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Girl(name, age, bustSize) {
this.name = name;
this.age = age;
this.bustSize = bustSize;
}
// 1. 这次我在Girl的原型上添加show方法
Girl.prototype.show = function () {
console.log(`初次见面,我叫${this.name},请多指教!`);
}

// 2. 实例化新老婆
var girlfriend2 = new Girl('新垣结衣', 30, '');

// 3. 老婆的自我介绍
girlfriend2.show();

// 4. 打印老婆
console.log(girlfriend2);

在这里插入图片描述

  • 我们发现,Girl类中并没有show方法,而我在原型(爹)上添加了show方法,于是新垣结衣就问她的爹有没有show方法,哎有!那就用!

关卡3.1:原型对象 => 构造函数

  • 我们可以通过原型对象(结衣的爸爸),通过constructor知道他们的小孩(构造函数)长什么样(毕竟有一半的染色体呢)
    在这里插入图片描述

关卡3.2:构造函数 => 原型对象

  • 我们也可以通过小孩的特点(构造函数),通过DNA鉴定(prototype)来找到谁是我的亲生父亲(原型)。
    在这里插入图片描述

    最终关卡:无线循环

  • 不知道您有没有发现,一个神奇的循环

在这里插入图片描述

  • 是不是有点理解了,又有点不理解了,发出猪叫 ,回过头看看我的第一张图~

    隐藏关卡

    原型链的机制

  • 举个栗子:为什么数组的方法那么多呢?我们不妨打印一下:
javascript
1
2
var arr = ['苍井玛丽亚', '小原好美', '雪之下雪乃'];
console.log(arr);

在这里插入图片描述

  • 我们可以看到,数组的原型上有好多好多的方法,数组没有这种方法的话,就会找原型!
  • 我在数组的原型上添加个新的方法
javascript
1
2
3
4
5
6
var arr = ['苍井玛丽亚', '小原好美', '雪之下雪乃'];
Array.prototype.show = function () {
console.log(1);
}
arr.show(); // 1
console.log(arr);

在这里插入图片描述

  • 那我在Object上添加这个方法,数组还能使用吗???
    在这里插入图片描述

  • 总结一下:对象本身没有这个方法的话,就去像他爹要,如果爹也没有的话,就去找爷爷。

  • 新垣结衣本身没有show方法,就去找他的爹要show方法,爹要是没有,就去找爷爷。

  • 其实通过实践,你也可以知道最大的爹是谁:Object,也就是说,如果Object也没有 这个方法了,那么就GG了。输出Uncaught TypeError: arr.show is not a function。也就是找不到,抛出错误。

各种等式

我们还是以这个为基础

javascript
1
2
3
4
5
6
7
8
9
function Girl(name, age, bustSize) {
this.name = name;
this.age = age;
this.bustSize = bustSize;
}
Girl.prototype.show = function () {
console.log(`初次见面,我叫${this.name},请多指教!`);
}
var girlfriend2 = new Girl('新垣结衣', 30, '');

这里仅仅是举几个例子抛砖引玉

javascript
1
2
3
4
5
// 新垣结衣的爸爸 == 新垣结衣兄弟的爸爸
console.log(girlfriend2.__proto__ == Girl.prototype); // true

// 新垣结衣的爸爸的孩子 == 新垣结衣的兄弟s
console.log(girlfriend2.__proto__.constructor == Girl); // true
文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/d3a0134f.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论