当前位置:首页 > Web开发 > 正文

一文看懂JS继承

2024-03-31 Web开发

继承是OOP中大家最喜欢谈论的内容之一,一般来说,继承都两种方式:接口继承和实现继承而JavaScript中没有接口继承需要的方法,因此只能依靠实现继承。
在讲继承的实现之前,我们首先来回顾一下什么是继承?继承的作用是什么?

它可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展。
通过继承创建的新类称为“子类”或“派生类”。
被继承的类称为“基类”、“父类”或“超类”。
在清楚继承的作用之后,下面我们来探讨一下JS中的几种继承实现的方式:
//混入式继承(拷贝)//obj2继承到obj1中的成员,可以直接将obj1中的成员拷贝到obj2中即可var obj1 = {name:"zs",age:10};var obj2 = {};// 将obj1中的成员拷贝到obj2中for (var key in obj1) {
obj2[key] = obj1[key];
}console.log(obj1);console.log(obj2);
最终得到的obj2中的成员和obj1中的成员完全一致,当然,我们需要清除的是,此时的obj1和obj2是两个不同的对象。
混入式继承方式看似很简单,但是存在共享数据安全的问题。
var obj1 = {name:"zs",age:10,car:{name:"mini"}};var obj2 = {};// 将obj1中的成员拷贝到obj2中for (var key in obj1) {
obj2[key] = obj1[key];
}//修改obj1对象中的car属性
obj1.car.name = "bus";
console.log(obj1);console.log(obj2);
当我们需要修改某些对象中的引用类型对象的时候,会造成其他相关的对象也被修改,这是我们不希望看到的。
原型式继承的实现
回想一下,当我们在访问一个对象中的成员的时候,首先是在当前对象中查找,如果找不到,就往上,在原型链中依次查找,如果在整个原型链中也不存在该成员,那么就返回undefined。
所以,我们想要在A对象中访问到B对象中的成员,除了将B中的成员添加到A中,如:混入式,我们也可以考虑将B中成员添加到A的原型链中,实现对象成员的共享。
function Animal() {
}
Animal.prototype.name="animal";function Person() {
}//修改Person的原型对象
Person.prototype= Animal.prototype;

Person.prototype.useTool = function () {
console.log("use fire");
}var p = new Person();console.log(p);var ani = new Animal();console.log(ani);
画图分析:

最初,Animal和Person的两个对象没有任何关系,所以各自只能访问各自的成员

现在,Person对象如果想要继承Animal对象,只需要将Person的原型对象修改为Animal的原型对象即可

技术图片


这种方式实现的继承称之为原型继承,实现也是比较方便的,当时和混入式一样,存在数据共享的问题。
原型链继承的实现
原型式继承
在前面的课程中,我们讲了原型式的继承,这种继承方式是修改子类对象原型指向父类对象的原型,如前面的MyArray执行的是Array的原型对象。
这种方式存在问题是,只能继承父类对象原型上的成员,但无法继承父类对象中的成员。
function Animal() {
this.color="red";
}
Animal.prototype.weight=100;function Person() {
}
Person.prototype = Animal.prototype;var p = new Person();console.log(p);
Person.prototype = Animal.prototype;原型式的继承
此时创建出来的Person对象p可以访问Animal中的weight属性,但是无法访问color属性。看图理解

技术图片


那么,如果我们既要继承原型对象中的成员,也要继承实例对象中的成员,就应该使用这一节中的原型链继承
function Animal() {
this.color="red";
}
Animal.prototype.weight=100;function Person() {
}
Person.prototype = new Animal();var p = new Person();console.log(p.color);//red

技术图片


使用原型链继承方式能够继承到更多的成员。但是依然存在问题:

共享的问题

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/39635.html