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函数
Apr 09 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 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
通过html表格发电子邮件
2006/10/09 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
网页常用特效代码整理
2006/06/23 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
vue底部加载更多的实例代码
2018/06/29 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python实现二维数组输出为图片
2018/04/03 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
网络体系结构及协议的定义
2014/03/13 面试题
周鸿祎:教你写创业计划书
2013/12/30 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
人事聘任通知
2015/04/21 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL