继承与原型链

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

继承与原型链

引子

前不久因为被某位同学灵魂提问,“JavaScript中的class关键词是怎么实现的?”,脱口而出:原型链。但是之后细想,似乎又好久没看这一块的东西,有一些生疏,故决定回顾梳理一下。

基于原型链的继承

对于使用过基于类的语言 (如 Java 或 C++) 的开发人员来说,JavaScript 有点令人困惑,因为它是动态的,并且本身不提供一个 class 实现。(在 ES2015/ES6 中引入了 class 关键字,但那只是语法糖,JavaScript 仍然是基于原型的)。

那么问题来了,这里就出现了一个概念,原型,在js中,每一个对象都有一个私有属性__proto__这个属性指向这个对象的原型(原型对象),而对于函数来说,则对应有prototype这个属性,来指向这个函数的原型对象。

我们要记住的是,对于一个对象来说,他有__proto__这个属性,而对于一个函数来说,则有prototype这个属性

好的,我们接下来将他们联系起来,在js中,创建对象有很多种方式,但是如果我们要把函数和对象联系起来,请看下面这个例子。

// 让我们从一个自身拥有属性a和b的函数里创建一个对象o:
let f = function () {
this.a = 1;
this.b = 2;
}


let obj = new f();//通过函数创造一个对象

console.log(f.prototype === obj.__proto);//true

最后一行,我们可以得知,已知函数f,对象obj,对象obj由f创建,则obj的__proto__严格 等于f的prototype

继承属性

同样是上面的例子,我们利用原型来探究属性的继承。

// 让我们从一个自身拥有属性a和b的函数里创建一个对象o:
let f = function () {
this.a = 1;
this.b = 2;
}

let o = new f(); // {a: 1, b: 2}

// 在f函数的原型上定义属性
f.prototype.b = 3;
f.prototype.c = 4;



//上面展示的是这个对象的原型链 {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null

console.log(o.a); // 1
// a是o的自身属性吗?是的,该属性的值为 1

console.log(o.b); // 2
// b是o的自身属性吗?是的,该属性的值为 2
// 原型上也有一个'b'属性,但是它不会被访问到。
// 这种情况被称为"属性遮蔽 (property shadowing)"

console.log(o.c); // 4
// c是o的自身属性吗?不是,那看看它的原型上有没有
// c是o.[[Prototype]]的属性吗?是的,该属性的值为 4

console.log(o.d); // undefined
// d 是 o 的自身属性吗?不是,那看看它的原型上有没有
// d 是 o.[[Prototype]] 的属性吗?不是,那看看它的原型上有没有
// o.[[Prototype]].[[Prototype]] 为 null,停止搜索
// 找不到 d 属性,返回 undefined

给对象设置属性会创建自有属性。获取和设置属性的唯一限制是内置 getter 或 setter 的属性。

继承方法

JavaScript 并没有其他基于类的语言所定义的“方法”。在 JavaScript 里,任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别,包括上面的“属性遮蔽”(这种情况相当于其他语言的方法重写)。

这里唯一要注意的点可能就是this指针的指向问题,当继承的函数被调用时,this 指向的是当前继承的对象,而不是继承的函数所在的原型对象。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看