JavaScript 继承使用分析

深入学习javascript继承之前,先了解下面的几个概念:
父类:被继承的类
子类:由继承得来的类
超类:也就是父类
抽象类:一般不用来实例化的类,它的用途是用来给其他类继承.
基类:提供给其他类可以继承的类
派生类:由基类继承而来的类

javascript对象继承通常有下面的5种方式:
1.对象冒充
2.call()方式
3.apply()方式
4.原型链
5.混合方式

A.对象冒充
所谓对象冒充,就是新的类冒充旧的类(旧的类必须采用构造函数方式),从而达到继承目的.
eg.1


代码如下:

function people(name,sex,age){ //使用构造函数方式
this.name=name;
this.sex=sex;
this.age=age;
this.say=function(){
alert("My name is "+this.name);
};

this.doing=function(){
alert("I am speaking");
};
}
var Marry=new people("Marry","Woman","23");
Marry.say();
Marry.doing();

function white_people(name,sex,age){
this.inherit=people;
this.inherit(name,sex,age);
delete this.inherit;

this.area=function(){
alert("I am in Europe");
}
}
var Tom=new white_people("Tom","man","21");
Tom.say();
Tom.area();
alert(Tom.age);

上面的例子中,people是用来做white_people的基类,记住这个格式是用来对象冒充达到继承目的的
this.inherit=people; //冒充
this.inherit(name,sex,age); //继承
delete this.inherit; //删除继承
所有新属性和新方法都必须再删除了继承后定义,这样是为了避免覆盖父类的相关属性和方法.
另外,对象冒充支持多继承.
eg.2


代码如下:

function worker(pay,work){
this.pay=pay;
this.work=work;
}
function city_worker(name,sex,age,pay,work){
this.inherit=people;
this.inherit(name,sex,age);
delete this.inherit;

this.inherit=worker;
this.inherit(pay,work);
delete this.inherit;
}

var Jerry=new city_worker("Jerry","man","21","$1000","coder");
Jerry.say();
alert(Jerry.work);

对象冒充有一个不足的地方:多继承机制实现时,如果基类存在相同的属性或者方法,将从后面的类继承.

B.call()方式
只是封装的对象冒充的一个函数.这样,我们不再需要写"经典"的三句话,而是用下面这句话代替:
基类.call(对象,参数列表)
eg.1


代码如下:

function farmer(name,sex,age,pay,work){
people.call(this,name,sex,age);
worker.call(this,pay,work);
}

var Nicholas=new farmer("Nicholas","man","27","$3000","irrigator");
Nicholas.say();
alert(Nicholas.pay);

同样,call()存在同名属性和方法的小问题.

C.apply()方式
和call()一样.apply()也是对象冒充的一个封装函数.其格式为:
基类.apply(对象,参数数组);
eg.1


代码如下:

function white_collar(name,sex,age,pay,work){
people.apply(this,new Array(name,sex,age));
worker.apply(this,[pay,work]);
}

var Jiessie=new white_collar("Jiessie","woman","26","$2500","editor");
Jiessie.say();
alert(Jiessie.work);

同样,apply()存在同名属性和方法的小问题.

D.原型链
上面三种方式都是采用构造函数方式的继承,对应地,也具有原型函数方式的继承:原型链.
eg.1


代码如下:

function blue_collar(){
}
blue_collar.prototype.name="Jean";
blue_collar.prototype.age="33";
blue_collar.prototype.say=function(){
alert("my name is "+ this.name);
};

function city_blue_collar(){
}
city_blue_collar.prototype=new blue_collar();

var jj=new city_blue_collar;
jj.say();

原型链也具有了原型链的缺点:不能传递参数.另外,原型链不支持多继承,因为

E.混合方式
使用构造函数方式来写类的属性,对属性的继承采用call()或者apply()
使用原型方式来写的方法,对方法的继承采用原型链
eg.1


代码如下:

function beauty(name,age){
this.name=name;
this.age=age;
}
beauty.prototype.say=function(){
alert("小女叫"+this.name);
};

function china_beauty(name,age,area){
beauty.call(this,name,age);
this.area=area;
}
china_beauty.prototype=new beauty();
china_beauty.prototype.from=function(){
alert("我来自"+this.area);
};

var diaochan=new china_beauty("貂禅","16","临洮");
diaochan.say();
diaochan.from();
alert(diaochan.age);

(0)

相关推荐

  • JavaScript 继承使用分析

    深入学习javascript继承之前,先了解下面的几个概念: 父类:被继承的类 子类:由继承得来的类 超类:也就是父类 抽象类:一般不用来实例化的类,它的用途是用来给其他类继承. 基类:提供给其他类可以继承的类 派生类:由基类继承而来的类 javascript对象继承通常有下面的5种方式: 1.对象冒充 2.call()方式 3.apply()方式 4.原型链 5.混合方式 A.对象冒充 所谓对象冒充,就是新的类冒充旧的类(旧的类必须采用构造函数方式),从而达到继承目的. eg.1 复制代码 代

  • 由浅入深讲解Javascript继承机制与simple-inheritance源码分析

    老生常谈的问题,大部分人也不一定可以系统的理解.Javascript语言对继承实现的并不好,需要工程师自己去实现一套完整的继承机制.下面我们由浅入深的系统掌握使用javascript继承的技巧. 1. 直接使用原型链 这是最简粗暴的一种方式,基本没法用于具体的项目中.一个简单的demo如下: function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return th

  • JavaScript继承与多继承实例分析

    本文实例讲述了JavaScript继承与多继承.分享给大家供大家参考,具体如下: 虽然最新的EC6里边已经有了class的相关功能,但是从普及度上和阅读旧代码需求的方面来看,这点知识也得了解一下. 本文结构: ① 原理及分析 ② 简单封装后的运用 1. 继承 ① 原理及分析 先上一张图: 用这段代码的思想来实现继承,即: var inherit=function(objBase){ var F=function(){}; //第一步:定义一个函数F F.prototype=objBase; //

  • JavaScript继承定义与用法实践分析

    本文实例讲述了JavaScript继承定义与用法.分享给大家供大家参考,具体如下: javascript 继承 , 老生长谈的东西, 大家应该都很熟悉了, 平时工作基本不会直接使用, 这段时间不忙, 所以补习了下相关基础知识 ,自己动手实践, 加深理解: 基类定义如下: // base class function Animal(t) { if(typeof t==='string') this.type=t; else { if(t) this.type=t.toString(); else

  • javascript继承机制实例详解

    本文实例讲述了javascript继承机制.分享给大家供大家参考.具体分析如下: 初学javascript一般很难理解Javascript语言的继承机制它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解

  • JavaScript继承学习笔记【新手必看】

    JavaScript作为一个面向对象语言(JS是基于对象的),可以实现继承是必不可少的,但是由于本身并没有类的概念,所以不会像真正的面向对象编程语言通过类实现继承,但可以通过其他方法实现继承.实现继承的方法很多,下面就只是其中的几种. 一. 原型链继承 function Person() { //被继承的函数叫做超类型(父类,基类) this.name='mumu'; this.age='18'; } Person.prototype.name='susu';//当属性名相同时需就近原则,先在实

  • JavaScript 继承详解(五)

    在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance.  John Resig作为jQuery的创始人而声名在外.是<Pro JavaScript Techniques>的作者,而且Resig将会在今年秋天推出一本书<JavaScript Secrets>,非常期待. 调用方式 调用方式非常优雅: 注意:代码中的Class.extend._super都是自定义的对象,我们会在后面的代码分析中详

  • 详解Javascript继承的实现

    本文从以下四个方面展开话题: •1. 混合方式实现及问题 •2. 期望的调用方式 •3. 继承库的详细实现 •4. 总结 感兴趣的朋友可以继续往下阅读详情. 我最早掌握的在js中实现继承的方法是在xx学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现.它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用原型链继承父类prototype 对象的方法,满足我遇到过的所有继承的场景.正因如此,我从没想过下次写继承的时候,我要换一种方式来写,直到今天晚上看了三生

  • JavaScript 继承详解(六)

    在本章中,我们将分析Prototypejs中关于JavaScript继承的实现. Prototypejs是最早的JavaScript类库,可以说是JavaScript类库的鼻祖. 我在几年前接触的第一个JavaScript类库就是这位,因此Prototypejs有着广泛的群众基础. 不过当年Prototypejs中的关于继承的实现相当的简单,源代码就寥寥几行,我们来看下. 早期Prototypejs中继承的实现 源码: var Class = { // Class.create仅仅返回另外一个函

  • JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即"子类型.prototype = new 父类型();&qu

随机推荐