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

继承是我们在实现面向对象编程的时候很重要的一个手段。虽然我们讲不能过度继承,多利用组合代替继承,但是继承总是免不了的。这里要讨论的就是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.但是这肯定是不合适的了。所以就有了混合继承的方式,让属性继续保持私有,同时让子类能够访问父类的原型链的方法。

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

时间: 2025-01-27 04:09:46

Javascript中3种实现继承的方法和代码实例_javascript技巧的相关文章

JavaScript数组去重的3种方法和代码实例_javascript技巧

数组去重的方法有很多,到底哪种是最理想的,自己不清楚.于是自己测试了下数组去重的效果和性能.测试十万个数据,代码和所耗大概时间如下. 到底采用哪种方法,根据实际情况而定吧. /*方法一: 1,'1' 会被认为是相同的; 所有hash对象,如:{x;1},{y:1}会被认为是相同的 //10ms */ Array.prototype.unique=function(){ var newArr=[],obj={}; for(var i=0,len=this.length;i<len;i++){ if

JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例_javascript技巧

javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,单是不同浏览器创建方式不同 (2).请求路径 (3).使用open方法绑定发送请求 (4).使用send() 方法发送请求 (5).获取服务器返回的字符串   xmlhttpRequest.responseText; (6).获取服务端返回的值,以xml对象的形式存储  xmlhttpRequest.responseXML; (7).使用W3C

JavaScript中5种调用函数的方法

 这篇文章主要介绍了JavaScript中5种调用函数的方法,本文详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助,需要的朋友可以参考下     这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下

JavaScript中5种调用函数的方法_javascript技巧

这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的

JavaScript中函数声明与函数表达式的区别详解_javascript技巧

前言 在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明.对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终带有一个标识符(Identifier),也就是我们所说的函数名,而函数表达式则可以省略.下面看看这两者的详细区别介绍. 什么是 Function Declaration(函数声明)? Function Declaration 可以定义命名的函数变量,而无需给变量赋值.Function Declaration 是一种独立的结构,不能

JavaScript中的ajax功能的概念和示例详解_javascript技巧

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时),必须重载整个网页页面. 示例: html代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

javascript中使用new与不使用实例化对象的区别_javascript技巧

我们先来看个实例 function Me(name,age,job){ this.name = name; this.age = age; this.job = job; } 请问这以下两种实例化对象方式有什么区别呢? var mefun1 = new Me('fei','20','it'); var mefun2 = Me('fei','20','it'); 简单的说 第一种是构造函数式,即通过new运算符调用构造函数Function来创建函数 第二种不是实例化,只是调用函数把返回值赋给变量.

javascript中的变量是传值还是传址的?_javascript技巧

这个标题念起来有点拗口,但却是理解数据结构的关键.标题中的4个术语,对应的英文分别是:shallow copy(注意,不是shadow copy).deep copy.pass by value.pass by reference(或pass by address).传址和传引用是一回事. 一门编程语言的核心是数据结构,粗略来讲,可以把数据结构分成不可变类型(immutable)和可变类型(mutable).为什么这么分呢?这涉及到内存分配问题.对于不可变类型,只要分配有限的内存空间即可,而对于

javascript中负数算术右移、逻辑右移的奥秘探索_javascript技巧

javascript中负数的算术右移和逻辑右移都十分的让人迷惑,特别是逻辑右移>>>,你会发现即使一个很小的负数,右移之后,也会得到一个无比巨大的数,这是为什么呢? 原来在逻辑右移中符号位会随着整体一起往右移动,这样就是相当于无符号数的移动了,最后得到的就是一个正数,因为符号位不存在了.首先逻辑右移产生的一定是32位的数,然后负数的符号位为1,这意味着从第32位到符号位的位置全部由1填充,这样的数能不大吗例如-1,逻辑右移0位表现形式就是1111 1111 1111 1111 1111