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

Javascript中3种实现继承的方法和代码实例

萧焱
2023-03-14
本文向大家介绍Javascript中3种实现继承的方法和代码实例,包括了Javascript中3种实现继承的方法和代码实例的使用技巧和注意事项,需要的朋友参考一下

继承是我们在实现面向对象编程的时候很重要的一个手段。虽然我们讲不能过度继承,多利用组合代替继承,但是继承总是免不了的。这里要讨论的就是Javascript中的继承机制

Javascript中实际上是没有继承的概念的,但是我们可以通过一些手段来模仿实现它。这种继承实际上把一个对象复制到另外一个对象内部。你需要注意的是所有的本地类和宿主类是不能作为基类被继承的,主要是为了安全方面的考虑。

Javascript中的继承大约有三类:1.对象冒充;2.原型继承;3.二者的混合。

一、对象冒充

其实对象冒充是跟this关键字紧密联系在一起的(所以说充分理解Javascript中的this关键字是多么的重要:P)。构造函数使用this来给属性和方法赋值,而构造函数也可以看作为一个普通的函数,所以我们就可以使我们的基类的构造函数成为子类的构造函数,然后在子类的内部调用这个函数,那么子类就会得到父类的属性和方法。

原理很简单,那我们怎么实现呢?下面就以代码示例,实际的操作一下。

对象冒充实现方法一,我们最常用的新建对象的方法:


var classA = function(name){

 this.name = name;

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 this.myConstructor = classA;

 this.myConstructor(name);

 delete this.myConstructor;

 

 this.age = age;

 this.alertAge = function(){

  alert(this.age);

 }

}

为了验证以上的方法是否正确,你可以亲自测试下,我将测试用的代码写在下面:


var objA = new classA('DK');

objA.alertName();//DK

 

var objB = new classB('DS',20);

 

objB.alertName();//DS

objB.alertAge();//20

这就是所谓的对象冒充了,另外对象冒充还有另外两种实现的方式,虽然它们的实现手段不一样,但是它们的原理是一样的。

对象冒充实现方法二,使用call方法:


var classA = function(name){

 this.name = name;

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 classA.call(this,name);

 

 this.age = age;

 this.alertAge = function(){

  alert(this.age);

 }

}

通过代码也能看出来,第一种方法中我们新建了函数指针指向父类,调用函数,然后将指针删除。而这里我们之间用call方法在this对象下面运行父类的构造函数,实现了同样的目的。另外与call方法相对于的则就是apply方法啦。

对象冒充实现方法三,使用apply方法:


var classA = function(name){

 this.name = name;

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 classA.apply(this,new Array(name));

 

 this.age = age;

 this.alertAge = function(){

  alert(this.age);

 }

}

其实大家可以看到,apply方法跟call方法是非常类似的,只不过传递参数是略有不同罢了。

二、原型继承

大家应该对prototype对象有所了解,原型对象上的所有属性和方法将被传递给类的所有实例,所有当我们把父类的所有属性和方法付给子类的prototype对象时也就相当于实现了我们的继承。

子类想获得父类的所有属性和方法,那我们将父类的一个实例直接付给子类的prototype对象,那我们的子类不就相当于获取了父类的所有对象和方法?

代码示例伺候:


var classA = function(){

 this.name = 'DK';

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 this.name = name;

 this.age = age;

}

 

classB.prototype = new classA();

 

classB.prototype.alertAge = function(){

 alert(this.age);

}

注意这里的父类的构造函数需要确保没有参数。因为即使有构造参数在实现原型继承的时候你也无法传递=.=!

三、混合继承

顾名思义,混合继承就是前两种方式的混合使用了。


var classA = function(name){

 this.name = name;

}

 

classA.prototype.alertName = function(){

 alert(this.name);

}

 

var classB = function(name,age){

 classA.call(this,name);

 this.age = age;

}

 

classB.prototype = new classA();

 

classB.prototype.alertAge = function(){

 alert(this.age);

}

使用对象冒充实现了向父类传递参数,同时使用原型继承实现了对公有方法的继承。

说完了这三中继承方式了,下面该说到问题的时候了。

你可能会不解,为什么有了对象冒充,有了原型继承还要再弄出个什么混合继承,对,最重要的也就是这个问题。

1.如果你实际测试一下,你会发现通过对象冒充的方式实现的继承,子类是无法访问到父类的原型链上的方法的。

2.而用原型继承,则会把所有的属性变成共享的属性,如果你同一个子类实现两个实例,你会发现你的所有实例共享所有的属性。

3.但是这肯定是不合适的了。所以就有了混合继承的方式,让属性继续保持私有,同时让子类能够访问父类的原型链的方法。

你可以亲自动手试一下,在对象冒充继承的时候,子类无法访问父类的原型链方法,原型链继承子类的所有实例共享所有父类属性。这里我就不写例子了。

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

  • 本文向大家介绍JavaScript中实现继承的三种方式和实例,包括了JavaScript中实现继承的三种方式和实例的使用技巧和注意事项,需要的朋友参考一下 javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式。 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的

  • 本文向大家介绍JavaScript实现继承的4种方法总结,包括了JavaScript实现继承的4种方法总结的使用技巧和注意事项,需要的朋友参考一下 JavaScript虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现。 1、原型链继承: 优点:从instanceof关键字来看,实例既是父类的实例,又是子类的实例,看起来似乎是最纯粹的继承。 缺点:子类区别于父类的属性和方法,必须在Sub.

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

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

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