html继承有哪几种方式,【42】JS实现继承的6种方式

最新推荐文章于 2023-12-22 10:10:53 发布

蓝小狗

最新推荐文章于 2023-12-22 10:10:53 发布

阅读量321

点赞数

文章标签： html继承有哪几种方式

JavaScript实现继承的6种方式

**1 、原型链继承**

将构造函数的原型设置为另一个构造函数的实例对象，这样就可以继承另一个原型对象的所有属性和方法，可以继续往上，最终形成原型链。

第一个问题是，当实现继承后，另一个原型的实例属性，变成了现在这个原型的原型属性，然后该原型的引用类型属性会被所有的实例共享，这样继承原型引用类型属性的实例之间不再具有自己的独特性了。

第二个问题是，在创建子类型的实例时，没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数。

**2、借用构造函数继承**

为了解决原型中包含引用类型值的问题，开始使用借用构造函数，也叫伪造对象或经典继承

```

function SuperType() {

this.colors = ["red", "blue", "green"];

}

function SubType() {

//继承SuperType

SuperType.call(this);

}

var instance1 = new SubType();

instance1.colors.push("black");

alert(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();

alert(instance2.colors); //"red,blue,green"

```

将SuperType函数在SubType构造函数中调用，在每个实例中执行，这样每个实例中都会有一份SuperType中的属性方法的副本，也就实现了继承SuperType。

这种模式的优势就是可以在子类型构造函数中向超类型构造函数传递参数。

存在的问题就是，所有的类型都只能使用构造函数模式(因为超类型的原型中定义的方法对于子类型不可见)，因此方法都在构造函数中定义，函数复用就无从谈起了。

**3、组合继承**

也叫伪经典继承，将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型属性和方法的继承，而通过构造函数来实现对实例属性的继承。

```

function SuperType(name) {

this.name = name;

this.colors = ["red", "blue", "green"];

}

SuperType.prototype.sayName = function() {

alert(this.name);

}

function SubType(name, age) {

// 继承属性

SuperType.call(this, name);

this.age = age;

}

// 继承方法

SubType.prototype = new SuperType();

SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function() {

alert(this.age);

};

var instance1 = new SubType("Nicholas", 29);

instance1.colors.push("black");

alert(instance1.colors); //"red,blue,green,black"

instance1.sayName(); //"Nicholas";

instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);

alert(instance2.colors); //"red,blue,green"

instance2.sayName(); //"Greg";

instance2.sayAge(); //27

```

将SubType的原型指定为SuperType的一个实例，大致步骤和原型链继承类似，只是多了在SubType中借调SuperType的过程。

实例属性定义在构造函数中，而方法则定义在构造函数的新原型中，同时将新原型的constructor指向构造函数。

可以通过instanceof和isPrototypeOf()来识别基于组合继承创建的对象。

避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为JS中最常用的继承模式。

实际上是借用了构造函数，以覆盖的方式，解决了在原型链继承中原型的引用类型属性共享在所有实例中的问题。

因为在子类型中借调构造函数(SuperType.call(this))时，会在自己的所有实例中执行一遍SuperType中的代码，由于每个实例this都是不同的，因此SuperType中定义的属性会在每个实例中有一份副本，也就避免了原型链继承中，原型属性共享的问题(覆盖了原型属性)。

**4.、原型式继承**

不自定义类型的情况下，临时创建一个构造函数，借助已有的对象作为临时构造函数的原型，然后在此基础实例化对象，并返回。

```

function object(o){

function F(){}

F.prototype = o;

return new F();

```

本质上是object()对传入其中的对象执行了一次浅复制

```

var person = {

name: "Nicholas",

friends: ["Shelby", "Court", "Van"]

};

var anotherPerson = object(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

```

原型的引用类型属性会在各实例之间共享。

当只想单纯地让一个对象与另一个对象保持类似的情况下，原型式继承是完全可以胜任的。

注意:

ES5 通过新增 Object.create()方法规范化了原型式继承。这个方法接收两个参数：一个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下，Object.create()与这里的object()方法的行为相同。第二个参数与Object.defineProperties()方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的。

**5、寄生式继承**

其实就是在原型式继承得到对象的基础上，在内部再以某种方式来增强对象，然后返回。

```

function createAnother(original) {

var clone = object(original);

clone.sayHi = function() {

alert("hi");

};

return clone;

}

```

思路与寄生构造函数和工厂模式类似。