JAVASCRIPT实现继承的几种方式

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JAVASCRIPT实现继承的几种方式相关的知识，希望对你有一定的参考价值。

  1. 对象冒充（多继承）：
    a. 代码：

    function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
    console.log(this.color);
};
}
function ClassB(sName) {
this.name = sName;
this.sayName = function () {
    console.log(this.name);
};
}
function ClassC(sColor, sName) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;

this.newMethod = ClassB;
this.newMethod(sName);
delete this.newMethod;
}
var objA = new ClassA("blue");
var objC = new ClassC("red", "John");
objA.sayColor();
objC.sayColor();
objC.sayName();

    b. 输出：

    blue
red
John
  2. call()方法（推荐）：
    a. 代码： 
    function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
    console.log(this.color);
};
}
function ClassB(sName) {
this.name = sName;
this.sayName = function () {
    console.log(this.name);
};
}
function ClassC(sColor, sName) {
ClassA.call(this,sColor)
ClassB.call(this,sName)
}
var objA = new ClassA("blue");
var objC = new ClassC("red", "John");
objA.sayColor();
objC.sayColor();
objC.sayName();

    b. 输出：

    blue
red
John
  3. apply()方法（推荐）：
    a. 代码： 
    function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
    console.log(this.color);
};
}
function ClassB(sName) {
this.name = sName;
this.sayName = function () {
    console.log(this.name);
};
}
function ClassC(sColor, sName) {
ClassA.apply(this,new Array(sColor))
ClassB.apply(this,new Array(sName))
}
var objA = new ClassA("blue");
var objC = new ClassC("red", "John");
objA.sayColor();
objC.sayColor();
objC.sayName();

    b. 输出：

    blue
red
John
  4. 原型链（单继承）：
    a. 代码： 
    function ClassA(color) {
this.color = color
this.sayColor = function () {
    console.log(this.color);
};
}
function ClassB(name) {
this.name = name
this.sayName = function () {
    console.log(this.name);
};
}
ClassB.prototype = new ClassA("red");
var objA = new ClassA("blue");
var objB = new ClassB("John");
objA.sayColor();
objB.sayColor();
objB.sayName();

    b. 输出：

    blue
red
John
  5. 混用对象冒充与原型链（多继承）：
    a. 代码： 
    function ClassA(sColor) {
this.color = sColor;
this.sayColor = function(){
    console.log(this.color)
}
}
function ClassB(sName) {
this.name = sName;
this.sayName = function(){
    console.log(this.name)
}
}
function ClassC(sColor, sName) {
ClassA.call(this, sColor);
ClassB.call(this, sName);
}
ClassC.prototype = new ClassA();
ClassC.prototype = new ClassB();
var objA = new ClassA("blue");
var objC = new ClassC("red", "John");
objA.sayColor();
objC.sayColor();
objC.sayName();

    b. 输出：

    blue
red
John
  6. 说明： 
    推荐使用call()方法或apply()方法

以上是关于JAVASCRIPT实现继承的几种方式的主要内容，如果未能解决你的问题，请参考以下文章

javascript中实现继承的几种方式

javascript实现继承的几种方式

JavaScript实现继承的几种方式总结一

JavaScript 实现继承的几种方式

Javascript实现继承的几种方式

JavaScript继承的几种实现