推荐JavaScript实现继承的最佳方式


Posted in Javascript onNovember 11, 2014

   实现JavaScript继承的最简单的方式是call方法(或者apply方法)及原型链方法,但这两种方法都有缺陷,而其混合体就是很好的继承实现方式。下面举例说明:

function Animal(age){

    this.age = age;

}

Animal.prototype.sayAge = function(){

    window.alert("My age is "+this.age+"!");

};

function Dog(age,name){

    Animal.call(this,age);

    this.name = name;

}

Dog.prototype = new Animal();

Dog.prototype.sayName = function(){

    window.alert("I am a "+this.name+"!");

};

var dog = new Dog(15,"dog");

dog.sayName();

dog.sayAge();

    对于类Animal来说,它有一个字段属性age及函数属性sayAge,sayAge方法的定义采用的是原型方式。Dog类要继承Animal,其字段属性除了age外还有name,通过Animal.call(this,age);可以实现Dog继承Animal的字段属性age并将其初始化了。call方法的第一个参数为继承的类的this指针,第二个参数为Animal类的构造函数的参数。实际上,只是通过call方法就可以实现继承,但唯一的要求是父类的函数属性要在构造函数中定义,这对于这里的函数属性使用原型方式定义来说就不适合了(采用原型方式定义函数属性比在构造函数内定义更直观一些)。要想继承Animal的原型方式定义的函数属性,需要的语句就是“Dog.prototype = new Animal();”。而Dog类中的sayName()函数则是其自身的函数属性了。

 除了这个最经典的实现继承的方式外,目前还有一些免费的库可供使用。但想到形形色色的库,头就大了,有时间有必要时再研究吧!

Javascript 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
关于JS中prototype的理解
Sep 07 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
使用 js+正则表达式为关键词添加链接
Nov 11 #Javascript
jQuery 动态云标签插件
Nov 11 #Javascript
javascript 回调函数详解
Nov 11 #Javascript
JSON格式化输出
Nov 10 #Javascript
再谈javascript原型继承
Nov 10 #Javascript
让angularjs支持浏览器自动填表
Nov 10 #Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 #Javascript
You might like
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
vue-music关于Player播放器组件详解
2017/11/28 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
提升python处理速度原理及方法实例
2019/12/25 Python
django rest framework使用django-filter用法
2020/07/15 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
自荐信格式范文
2013/10/07 职场文书
医学毕业生自荐信
2013/10/11 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
一年级家长会邀请函
2014/01/25 职场文书
趣味游戏活动方案
2014/02/07 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android