javascript关于继承的用法汇总


Posted in Javascript onDecember 20, 2014

本文实例汇总了javascript关于继承的用法。分享给大家供大家参考。具体如下:

例子:

/**

* 实现子类继承父类,但不会产生多余的属性和方法

* @returns {Function}

*/

define(function(){

return function(subType, superType){

var proto = new Object(superType.prototype);

proto.constructor = subType;

subType.prototype = proto;

};

});

//——————————————————————————

define(function(){

function ostring(s)

{

this.str = s;

this.length = this.str.length;

}

ostring.prototype.show = function(){

alert(this.str);

};

return ostring;

});

//——————————————————————————

define(['inherit', 'ostring'], function(inherit, ostring){

function wstring(s){

//用call实现调用父类构造函数

ostring.call(this, s);

this.chlength = 2 * s.length;

}

//继承其他的属性

inherit(wstring, ostring);

wstring.prototype.add = function(w)

{

alert(this.str + w);

};

return wstring;

});

再看例子
一、用function实现:

function Person(name) {

    this.name = name;

}

Person.prototype.getName = function() {

    return this.name;

}

function Author(name, books) {

    this.inherit=person;

    this.inherit(name);

    this.books = books;

    

}

var au=new Author("dororo","Learn much");

au.name

或者同等效力的:
function Person(name) {

    this.name = name;

}

Person.prototype.getName = function() {

    return this.name;

}

function Author(name, books) {

    Person.call(this, name);

    this.books = books;

    

}

var au=new Author("dororo","Learn much");

au.getName

由于这只是将this作为参数,调用父类Person的构造函数,把赋予父类的所有域赋予Author子类,所以任何父类Person构造函数之外的定义的域(原型prototype),子类都不会继承。所以上面例子中,au.getName将是没有被定义的(undefined),因为getName是在Person的原型对象中定义的。

而且,子类的构造函数要在定义自己的域之前调用父类构造函数,免得子类的定义被父类覆盖掉。也就是说,Author定义属性book要在Person.call之后,否则会被Person中属性覆盖。同时,在子类中也最好不要用prototype来定义子类的函数域,因为在一个子类被new,实例化之后就要执行prototype,然后才是调用父类的构造函数,这样也容易被父类的属性覆盖掉。

二、用prototype实现:

function Person(name) {

    this.name = name;

}

Person.prototype.getName = function() {

    return this.name;

}

function Author(name, books) {

    this.books = books;  

}

Author.prototype=new Person(name);

Author.prototype.constructor=Author;

Author.prototype.getBooks = function() {

    return this.books;

}

var au1=new Author("dororo1","Learn much");

var au2=new Author("dororo2","Learn less");

alert(au1.getName());

alert(au2.getName());

这种方法避免了function实现中,无法继承prototype的问题。因为 Author.prototype=new Person(name);new Person()实例会调用Person构造和原型的所有属性。但是缺点是已经实例化了Author.prototype。所以当子类实例化的时候,所有非基本数据类型都是reference copy。所以上面例子中,无论实例au1,还是au2返回的值都是dororo1.

三、用“混合”实现

function Person(name) {

    this.name = name;

}

Person.prototype.getName = function() {

    return this.name;

}

function Author(name, books) {

    this.base = new Person(name);

    for(var key in this.base){

        if(!this[key]){

           this[key]=this.base[key];

           }

           }

    this.book=books;

}

var au1=new Author("dororo1","work");

var au2=new Author("dororo2","play");

alert(au1.getName());

alert(au2.getName());

au1.book;

au2.book;

 
属于扩展,把父类的所有域都拷贝到子类。完全没有上述两方面的问题。
寄生组合模式)

JS的继承包括属性的继承和方法的继承,他们分别通过不同的方法来实现。
1.属性的继承

属性的继承通过改变函数的执行环境来实现的。而改变函数的执行环境可以使用call()和apply()两种方法来实现。

我们首先创建一个Animal“类”(因为JS中没有类的概念,这里只是一个模拟,它实际上只是一个Function函数对象)。

function Animal(typeName) {

//为当前方法的执行环境(this)添加一个属性typeName

//但是执行环境(this)要执行这个函数的时候才能确定

this.typeName = typeName;

this.colors = ["red","while"];

}

//想函数的原型里 添加 两个(对象共享的)的方法

Animal.prototype.Shout = function () { alert("我是:--" + this.typeName);};

Animal.prototype.Eat = function () { alert("我是:--" + this.typeName) };

//--定义一个狮子--“类”(其实就是一个函数)

function Lion(tn) {

//--执行Animal方法,并通过apply的第一个参数 修改了Animal的执行环境为Lion的this

//同样的,Lion的this,也要在执行的时候才能确定是谁

Animal.apply(this,["狮子"]);//--继承了父类的变量属性,this因为是new了Lion,this是Lion

}

Lion.prototype = Animal.prototype; //继承父类的方法,搞定--但是这写不好,当子类再添加方法时候,父类同样也有此方法,这是指针引用

Lion.prototype.Hunt = function () {

alert("我是:狮子,我要去捕猎~~·~");

}

var aminm = new Animal();

aminm.Hunt(); //---可以访问到子类的方法,这样就不好了

//----那么如何解决这个问题呢》??????

//---解决方案:继承方法时候可以这样写:

Lion.prototype = new Animal();//继承父类的方法,把Animal对象赋给了prototype原型,其实它里面也有属性

var lion = new Lion(); //new 关键字除了创建的,还会修改Lion对象的执行环境为Lion对象本身

// ---换句话说,就是new完了之后,Lion函数里的this就是Lion函数本身了,然后调用Lion函数

分析一下new关键字:

而new关键字是十分伟大的,在上段代码中,new关键字完成了以下几项工作:
1)开辟堆空间,以准备存储Lion对象
2)修改Lion对象本身的执行环境,使得Lion函数的this指向了Lion函数对象本身。
3)调用Lion“类”的“构造函数”,创建Lion对象
4)将Lion函数对象的堆地址赋值给变量l,这个时候l就指向了这个Lion函数对象
lion.Shout();
lion.Eat();
但是这种继承有个缺点:就是父类的构造函数的被调用了两次,call一次,然后new又一次。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
js实现九宫格抽奖
Mar 19 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 #Javascript
jQuery的text()方法用法分析
Dec 20 #Javascript
jQuery中click事件的定义和用法
Dec 20 #Javascript
javascript中String对象的slice()方法分析
Dec 20 #Javascript
javascript中Number对象的toString()方法分析
Dec 20 #Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 #Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 #Javascript
You might like
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python通过文件头判断文件类型
2015/10/30 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Python中断多重循环的思路总结
2019/10/04 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
劳资员岗位职责
2013/11/11 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
计划生育标语
2014/06/23 职场文书
长城英文导游词
2015/01/30 职场文书
建党伟业的观后感
2015/06/01 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
Python如何使用循环结构和分支结构
2022/04/13 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库