码迷,mamicode.com
首页 > 编程语言 > 详细

JAVASCRIPT实现继承的几种方式

时间:2018-03-19 10:24:48      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:JAVASCRIPT实现继承的几种方式

  • 对象冒充(多继承):
    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
  • 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
  • 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
  • 原型链(单继承):
    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
  • 混用对象冒充与原型链(多继承):
    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
  • 说明:
    推荐使用call()方法或apply()方法
  • JAVASCRIPT实现继承的几种方式

    标签:JAVASCRIPT实现继承的几种方式

    原文地址:http://blog.51cto.com/12173069/2088336

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!