当前位置: 首页 > 编程笔记 >

JavaScript实现继承的4种方法总结

骆昊阳
2023-03-14
本文向大家介绍JavaScript实现继承的4种方法总结,包括了JavaScript实现继承的4种方法总结的使用技巧和注意事项,需要的朋友参考一下

JavaScript虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现。

1、原型链继承:


var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var Sub = function()  

{  

};  

Sub.prototype = new Base();  

Sub.prototype.name = "sub";

优点:从instanceof关键字来看,实例既是父类的实例,又是子类的实例,看起来似乎是最纯粹的继承。

缺点:子类区别于父类的属性和方法,必须在Sub.prototype = new Base();这样的语句之后分别执行,无法被包装到Sub这个构造器里面去。例如:Sub.prototype.name = “sub”;无法实现多重继承

2、构造继承:


var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var Sub = function()  

{  

    Base.call(this);  

    this.name = "sub";  

};

优点:可以实现多重继承,可以把子类特有的属性设置放在构造器内部。

缺点:使用instanceof发现,对象不是父类的实例。

3、实例继承:


var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var Sub = function()  

{  

    var instance = new Base();  

    instance.name = "sub";  

    return instance;  

};

优点:是父类的对象,并且使用new构造对象和不使用new构造对象,都可以获得相同的效果。

缺点:生成的对象实质仅仅是父类的实例,并非子类的对象;不支持多继承。

4、拷贝继承:


var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var Sub = function()  

{  

    var base = new Base();  

    for(var i in base)  

        Sub.prototype[i] = base[i];  

    Sub.prototype["name"] = "sub";  

};

优点:支持多继承。

缺点:效率较低;无法获取父类不可枚举的方法。

这几种形式各有特点,仅就我提供的代码而言,满足下面的表格:

2012-1-10:补充,如果我们不需要类继承,只需要对象继承,对于支持 ECMAScript 5 的浏览器来说,还可以用Object.create方法来实现:


var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var sub = Object.create(new Base());  

sub.name = "sub";

 类似资料:
  • 本文向大家介绍javascript中的3种继承实现方法,包括了javascript中的3种继承实现方法的使用技巧和注意事项,需要的朋友参考一下 使用Object.create实现类式继承 下面是官网的一个例子 此时Rectangle原型的constructor指向父类,如需要使用自身的构造,手动指定即可,如下 Rectangle.prototype.constructor = Rectangle;

  • 本文向大家介绍JavaScript的9种继承实现方式归纳,包括了JavaScript的9种继承实现方式归纳的使用技巧和注意事项,需要的朋友参考一下 不同于基于类的编程语言,如 C++ 和 Java,JavaScript 中的继承方式是基于原型的。同时由于 JavaScript 是一门非常灵活的语言,其实现继承的方式也非常多。 首要的基本概念是关于构造函数和原型链的,父对象的构造函数称为Parent

  • 本文向大家介绍JavaScript模拟实现继承的方法,包括了JavaScript模拟实现继承的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript模拟实现继承的方法。分享给大家供大家参考。具体分析如下: 我们都知道,在JavaScript中只能模拟实现OO中的"类",也就意味着,在JavaScript中没有类的继承。我们也只能通过在原对象里添加或改写属性来模拟实现。 先

  • 本文向大家介绍浅谈Javascript实现继承的方法,包括了浅谈Javascript实现继承的方法的使用技巧和注意事项,需要的朋友参考一下 S1:js中一切皆对象,想想如果要实现对父对象属性和方法的继承,最初我们会怎样子来实现呢,考虑到原型的概念,最初我是这样来实现继承的 从上面可以看到实现对Parent的继承主要是覆写了Son的prototype,这样便把Parent的属性和方法过给了Son的原

  • 本文向大家介绍js中实现继承的五种方法,包括了js中实现继承的五种方法的使用技巧和注意事项,需要的朋友参考一下 借用构造函数 这种技术的基本思想很简单,就是在子类型构造函数的内部调用超类型的构造函数。另外,函数只不过是在特定环境中执行代码的对象,因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数。 从中可以看到,继承来的只有实例属性,而原型上的属性是访问不到的。这种模式

  • 本文向大家介绍Javascript中3种实现继承的方法和代码实例,包括了Javascript中3种实现继承的方法和代码实例的使用技巧和注意事项,需要的朋友参考一下 继承是我们在实现面向对象编程的时候很重要的一个手段。虽然我们讲不能过度继承,多利用组合代替继承,但是继承总是免不了的。这里要讨论的就是Javascript中的继承机制。 Javascript中实际上是没有继承的概念的,但是我们可以通过一