JavaScript 原型继承之构造函数继承


Posted in Javascript onAugust 26, 2011

上回说到《JavaScript 原型继承之基础机制》,这一篇将具体说说构造函数的继承。

从一个简单的示例开始,创建描述人类的 People 构造函数:

function People(){ 
this.race = '愚蠢的人类'; 
}

然后,创建描述黄种人的 Yellow 构造函数:
function Yellow(name, skin){ 
this.name = name; 
this.skin = skin; 
}

要使得黄种人 Yellow 能继承人类 People 对象,在 JavaScript 中可以通过多种方式模拟实现。

1、对象冒充(Object Masquerading)

对象冒充,简单地说就是把一个定义抽象类的构造函数当作常规函数使用,实现伪继承:

function Yellow(name, skin) { 
this._extend = People; 
this._extend(); 
delete this._extend; //删除对 People 的引用 
this.name = name; 
this.skin = skin; 
} 
//实例化 yellow1 
var yellow1 = new Yellow('小明', '黄皮肤'); 
console.log(yellow1.name); //小明 
console.log(yellow1.race); //愚蠢的人类

在这段代码中,为 Yellow 添加私有方法 _extend,由于函数本身只是以引用的形式存在,执行时会自动调用 People方法,并传入 Yellow 构造函数的 name 参数。而 Yellow 对象的自身属性和方法,必须在上述过程结束,清空对外部方法的引用后再进行定义。

注:通过对象冒充可以实现多重继承

2、call / apply 方法

通过 call / apply 方法实现继承可能更为简单,不需要任何繁琐的操作:

function Yellow(name, skin) { 
People.apply(this, arguments); 
this.name = name; 
this.skin = skin; 
} 
//实例化 yellow2 
var yellow2 = new Yellow('大卫', '黑皮肤') 
console.log(yellow2.name); //大卫 
console.log(yellow2.race); //愚蠢的人类 
这里为 apply 传入 arguments 数组,也可以使用 new Array 或字面量数组。

3、原型链(Prototype Chaining)

第一种原型继承方法是把对象的原型指向父类的某个实例:

Yellow.prototype = new People(); 
Yellow.prototype.constructor = Yellow; //初始的 prototype 被完全清空,所以最好将 constructor 重置 
var yellow3 = new Yellow('小王', '黄皮肤'); 
console.log(yellow3.race); //愚蠢的人类

以上代码可以这样反向理解,yellow3 实例本身找不到 race 属性,而它原型上的 race 属性又恰好是 People 对象的实例的 race 属性。

如果对于 People 对象来说,其属性写入了原型中,则无需实例化,只需将 Yellow 的 prototype 属性指向 People的 prototype 属性:

function People(){}; 
People.prototype.race = '愚蠢的人类'; 
Yellow.prototype = People.prototype; 
Yellow.prototype.constructor = Yellow;

这样做不进行实例化操作,只是指针的改变,非常环保。但由于引用类型的关系,Yellow 和 People 指向了同一个原型对象,也就是说对 Yellow.prototype.constructor 的修改实际上破坏了 People 的原型对象。

既然如此,可以借助一个空的中继对象,绕过父类的原型:

var F = function(){}; 
F.prototype = People.prototype; 
Yellow.prototype = new F(); 
Yellow.prototype.constructor = Yellow;
Javascript 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
JavaScript原型继承之基础机制分析
Aug 26 #Javascript
自己动手开发jQuery插件教程
Aug 25 #Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
Aug 23 #Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 #Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 #Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 #Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 #Javascript
You might like
php MYSQL 数据备份类
2009/06/19 PHP
ini_set的用法介绍
2014/01/07 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
Python清空文件并替换内容的实例
2018/10/22 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
党员创先争优公开承诺书
2014/03/28 职场文书
先进集体申报材料
2014/12/25 职场文书
保送生自荐信
2015/03/06 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫