`
sungang_1120
  • 浏览: 323853 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

JavaScript 中的继承

 
阅读更多

继承是面向对象语言基本特征之一,通过继承可以将父类所具有的特性遗传到子类。ECMAScript中的继承不像Java、C++等语言那么明显,直接通过关键字来实现,通常它是通过模拟方式来实现继承功能的,并且实现方式有多种。

在继承中引入this关键字,使用构造器方法定义类来实现继承。一个构造器是一个函数,因此可以将父类的构造器作为子类的一个方法使用并进行调用。

function ClassA(id) {
this .id = id;
this .sayId = function () {
alert(
this .id);
}
;
}


function ClassB(id, name) {
this .newMethod = ClassA;
this .newMethod(id);
delete this .newMethod;

this .name = name;
this .sayName = function () {
alert(
this .name);
}
;
}


注意,子类中所有新的属性和方法都必需在删除newMethod后引入,否则,可能存在用父类的属性和方法重写子类属性和方法的危险。另外,使用这种方法还可以实现多重继承,此时如果两个父类具有相同的属性或方法时,最后的类具有优先级。由于这种继承方法比较流行,ECMAScript第三版引入了两个 Function对象:call()和apply()。

call()

call()方法是最接近上述继承方式的方法,它的第一个参数是this指向的对象,所有的其他参数都直接传到function。

function sayMessage(first, last) {
alert(first
+ this .logic + last);
}
;

varobj
= new Object();
obj.logic
= " or " ;

sayMessage.call(obj,
" Coffee " , " Tea " ); // 输出"Coffee or Tea"


用call()方法来实现继承,只需要this.newMethod相关的三行代码。

function ClassB(id, name) {
// this.newMethod = ClassA;
// this.newMethod(id);
// delete this.newMethod;
ClassA.call( this , id); // this指向ClassB的对象

this .name = name;
this .sayName = function () {
alert(
this .name);
}
;
}


apply()

apply()方法需要两个参数:this所指向的对象,和传到function的由参数组成的array。

function sayMessage(first, last) {
alert(first
+ this .logic + last);
}
;

var obj = new Object();
obj.logic
= " or " ;

sayMessage.apply(obj,
new Array( " Coffee " , " Tea " )); // 输出"Coffee or Tea"


同样,使用 apply() 实现继承可以通过如下方法实现。

function ClassB(id, name) {
// this.newMethod = ClassA;
// this.newMethod(id);
// delete this.newMethod;
ClassA.apply( this , new Array(id)); // this指向ClassB的对象

this .name = name;
this .sayName = function () {
alert(
this .name);
}
;
}


当父类构造器的参数和子类构造器参数的顺序一致时,可以使用子类的arguments对象作为第二个参数。否则,必需创建一个array来传递参数,或是使用call()方法。

Prototype

在《JavaScript中的对象 》一文中,我们了解到任何prototype的属性和方法都会被传递到该类的所有实例中,利用这一特性,使用prototype也能实现继承。

function ClassA() {
}


ClassA.prototype.id
= 1998 ;
ClassA.prototype.sayId
= function () {
alert(
this .id);
}
;

functionClassB()
{
}


ClassB.prototype
= newClassA();
ClassB.prototype.name
= "" ;
ClassB.prototype.sayName
= function () {
alert(
this .name);
}


需要注意的是,这种实现继承的方法不能将参数传入到ClassA的构造器中,是一个缺陷。ClassB的所有属性和方法必需在将ClassB的 prototype对象指向ClassA的实例之后进行附值。这样做是因为,prototype指向一个新的对象,在此之前prototype的属性和方法都被覆盖销毁。

对代码进行测试:

var obj1 = new ClassA();
var obj2 = new ClassB();
obj1.id
= 1998 ;
obj2.id
= 2000 ;
obj2.name
= " 悉尼奥运会 " ;
obj1.sayId();
// 输出"1998"
obj2.sayId(); // 输出"1998"
obj2.sayName(); // 输出"悉尼奥运会"

alert(obj2instanceofClassA);
// 输出"true"
alert(obj2 instanceofClassB); // 输出"true"


在上述代码中可以看出,使用prototype实现继承,instanceof操作符出现了另外的用途,在用构造起定义类实现继承时,instanceof不会出现这种效果。但是使用prototype不能支持多重继承。

使用构造器定义类实现继承和使用prototype实现继承均存在各自的缺陷,要避免出现这些情况,只有将两者混合使用。

混合方法

JavaScript中的对象 》一文中曾经论述,创建一个类的最佳方法,是使用构造器的方法去定义属性,使用prototype定义方法。在继承中同样如此。

function ClassA(id) {
this .id = id;
}


ClassA.prototype.sayId
= function () {
alert(
this .id);
}
;

function ClassB(id, name) {
ClassA.call(
this , id);
this .name = name;
}


ClassB.prototype
= new ClassA();
ClassB.prototype.sayName
= function () {
alert(
this .name);
}

 

分享到:
评论

相关推荐

    JavaScript中继承原理与用法实例入门

    JavaScript中的继承是面向对象编程的重要概念,它允许一个对象(子对象)继承另一个对象(父对象)的属性和方法。在JavaScript中,由于其动态类型和基于原型的特性,实现继承的方式比传统的面向对象语言更为灵活,但...

    JavaScript中继承用法实例分析

    在给定的文件内容中,我们看到一个具体的JavaScript继承的例子,主要分为以下几个步骤: 1. 定义父类`Person`,这个类有一个原型方法`walk`和`sayHello`,它们分别用于定义行走和打招呼的行为。 ```javascript ...

    JavaScript中继承的一些示例方法与属性参考

    JavaScript继承是面向对象编程(OOP)中的一个核心概念,它允许一个对象(称为子类或派生类)继承另一个对象(称为父类或基类)的属性和方法。JavaScript是一种基于原型的编程语言,它实现继承的方式与其他基于类的...

    base-object:JavaScript 中继承的实现

    JavaScript 中继承的实现 怎么建? git clone 这个仓库 切换到新目录 npm install npm run build 用法 var Person = BaseObject . extend ( { init : function ( name , age ) { this . name = name ; this . ...

    JavaScript继承

    JavaScript中的继承是一个核心概念,它在面向对象编程中扮演着至关重要的角色。与其他面向对象语言相比,JavaScript的继承机制更为复杂。在Java或C++等语言中,继承通常只需要一个关键字,如`extends`,但在...

    JavaScript中实现继承的八种方式

    详细介绍了JavaScript中继承的实现方式以及其优缺点分析。

    JavaScript实现继承的几种方式

    寄生组合继承解决了组合继承中父类构造函数会被调用两次的问题,通过创建父类的一个不被使用的实例,然后将子类的原型指向这个实例的原型。 ```javascript function inheritPrototype(subType, superType) { let ...

    JavaScript学习之三 — JavaScript实现继承的7种方式

    在JavaScript中,选择合适的继承方式取决于具体需求。理解并熟练掌握这些继承方式,能让你在编写代码时更加游刃有余。文章中的`inheritance.html`和`inheritance.js`文件可能包含示例代码,帮助你直观地了解每种继承...

    javascript控件开发之继承关系

    在这个主题中,“javascript控件开发之继承关系”主要探讨的是如何利用JavaScript的面向对象特性来构建和组织控件的层次结构,以及如何通过继承来实现代码的复用和模块化。 在JavaScript中,继承是基于原型...

    JavaScript中的类继承

    JavaScript中的类继承是一种模拟传统面向对象编程中类概念的方式,因为JavaScript本身是一种基于原型的面向对象语言。在JavaScript中,对象可以直接从其他对象继承属性和方法,而不是通过类的实例化。这种继承机制...

    实现JavaScript中继承的三种方式

    在原型链继承中,子类型的原型对象指向父类型的实例,从而使得子类型的实例可以继承父类型原型上的属性和方法。原型链继承允许子类型访问父类型的实例属性和方法,这在JavaScript中是通过设置子类型的prototype指向...

    学习javascript面向对象 javascript实现继承的方式

    本文将详细介绍六种实现JavaScript继承的方法。 1. 原型链继承 原型链继承是通过改变子类型的原型对象来实现继承的。子类型构造函数的原型被替换为超类型构造函数的一个实例,这样子类型就可以继承超类型的所有属性...

    javascript继承之为什么要继承.docx

    JavaScript 中的继承机制是指子类继承父类的属性和方法,使得子类可以拥有父类的所有特征。继承是面向对象编程的基本机制之一,它可以实现代码复用、提高编程效率和增强代码的可维护性。 在 JavaScript 中,继承是...

    理解Javascript原型继承原理

    在JavaScript中,原型继承是一种非常核心且独特的机制,它使得对象能够继承其他对象的属性和方法。本文旨在深入探讨这一机制,并通过具体的示例代码帮助读者更好地理解其中的概念。 #### 二、基本概念 在JavaScript...

    JavaScript继承机制研究.pdf

    在本文中,我们将深入探讨JavaScript继承机制的实现方式,并对基于原型的继承、构造函数方式继承、组合继承、寄生式继承等继承机制进行了总结归纳和分析。 基于原型的继承 JavaScript是一门基于原型的语言,它不像...

Global site tag (gtag.js) - Google Analytics