龙空技术网

JavaScript常用的继承方式

MAO大侠 82

前言:

此刻我们对“js中的继承方式”大约比较讲究,咱们都需要分析一些“js中的继承方式”的相关内容。那么小编也在网络上搜集了一些关于“js中的继承方式””的相关文章,希望看官们能喜欢,你们快快来学习一下吧!

JavaScript常用继承方式主要分为(7种):原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承以及继承多个对象。

1:原型链继承(核心:将父类的实例作为子类的原型)

基本概念:重写原型对象,赋予一个新的对象的实例。基本思想就是让一个原型对象指向另一个父类的实例。

function Super() { //基本数据类型 this.text = 'Hello';}Super.prototype.getSuperText = function() { return this.text;}function Sub() { this.subText = 'Word';}​Sub.prototype = new Super();​const instance = new Sub();console.log(instance);

特点:非常纯粹的继承关系,实例是子类的实例,也是父类的实例。父类新增原型方法或属性,子类都能访问到。

优点:简单易于操作

缺点:对引用类型数据操作会互相(多个实例之间)影响

function Super() { //复杂对象,也就是引用类型 this.value = [1, 2, 3, 4];}Super.prototype.getSuperValue = function() { return this.value;}function Sub() { this.subText = 'Word';}​Sub.prototype = new Super();​const instance1 = new Sub();const instance2 = new Sub();​instance1.value.push(5);console.log(instance2.value);​// (5) [1, 2, 3, 4, 5]
2:构造函数继承
//定义构造函数function Super(){ this.value = [1, 2, 3, 4];}//新增属性getSuperValueSuper.prototype.getSuperValue = function() { return this.value;}//sub每次执行都要重新调用function Sub(){ Super.call(this);}​const instance1 = new Sub();instance1.value.push(5);console.log(instance1.value);// (5) [1, 2, 3, 4, 5]​const instance2 = new Sub();console.log(instance2.value);// (4) [1, 2, 3, 4]

构造函数的特点:(对引用数据类型没有影响)上面的代码输出instance1是1,2,3,4,5,instance2是1,2,3,4。这是因为sub每次在执行时都是重新调用了一个super.call(),而且构造函数在构建对象的过程中,每次都是创建了一个新的object,因此每次调用sub都会执行一遍super,每次执行时都会有申请一个新的内存空间,所以得到的两个value值是不一样互不影响的。

缺点:在整个构造函数的基础过程中,上面的代码并没有使用proto和prototype的属性,没有使用的话那么原型链就没有接上。所以说,构造函数基础只能继承父类的实例属性和方法,不能继承原型链上的属性和方法。

3:组合继承

通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用。

保留了构造函数继承与原型链继承的优点。但是执行了两次Person,属性重复了。

function Person(name) { this.name = name; this.value = ["head", "body", "legs"];}Person.prototype.getName = function() { return this.name;};​// 构造函数继承function Teacher(name, school){ // 执行又一次Person Person.call(this, name); this.school = school;}​// 原型链继承// 执行一次PersonTeacher.prototype = new Person(); const Eric = new Teacher("Eric",27);Eric.getName();// 输出:Eric​​​// prototype构造器指回自己 Teacher.prototype.constructor = Teacher;​Teacher.prototype.getSchool = function() { return this.school;};

特点:既可以继承实例属性和方法,也可以继承原型属性和方法。既是子类的实例也是父类的实例,不存在引用属性共享的问题。可以传参,函数可复用。

缺点:调用两次父类构造函数,生成了两份实例。

4:原型式继承

借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型。

原理:(本质)利用一个空对象作为一个中介。

const lakers = { name: "lakers", value: ["Micheal", "Wade", "Kobe"]};​const lakers1 = Object.create(lakers);const lakers2 = Object.create(lakers);​lakers1.value.push('Fish');console.log(lakers);

模拟Object.create()

object.create()原理:用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了一个可以随意添增属性的实例或对象。

Object.prototype.create = function(obj) { function Fun() {} Fun.prototype = obj; return new Fun();}

缺点有两点:第一点是无法传递参数,第二点是引用类型存在变量的污染。

5:寄生式继承

寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数。

目的:在原型式继承的基础上,寄生增加了一些新的方法和属性。

它的特点同原型式继承一样,也是无法传递参数,而且引用的数据类型也容易存在样式污染。

Object.createNew()

Object.prototype.createNew = function(obj){ var newObj = Object.create(obj); //获取长度等于一个function newObj.getLength = function(){ ... }; return newObj;}
6:寄生组合继承

目的:为了解决数据重复拷贝两遍的问题。

Super只执行一次。

//定义Super构造函数function Super(name) { this.name = name; this.value = ["Hello", "Word"];}//在super的原型链添加一个getNameSuper.prototype.getName = function() { return this.name;};//定义Subfunction Sub(name, age) { //调用构造函数继承 Super.call(this, name); this.age = age;}​let prototype = Object.create(Super.prototype);prototype.constructor = Sub;Sub.prototype = prototype;​Sub.prototype.getAge = function(){ return this.age;}​const instance1 = new Sub("Eric", 23);const instance2 = new Sub("Vico", 23);instance1.value.push("!");instance2.value.push("!!");
7:继承多个对象

借助原型式继承Object.create拿到SuperClass,也就是父类,拿到父类的prototype之后把它赋给ClassOne,

再然后我们将ClassTwo的prototype使用一个Object.assign,一个对象的拷贝,把它拷贝到ClassOne里面来,

然后最后ClassOne.prototype.constructor等于ClassOne

也就是使用一个Class.assign把所有我们想要继承的父类的prototype全部组合到一起完成一个拷贝,之后再赋给对象。

function ClassOne.prototype = Object.create(SuperClass.prototype);Object.assign(ClassOne.prototype, ClassTwo.prototype);ClassOne.prototype.constructor = ClassOne;

标签: #js中的继承方式 #js类继承方法