Javascript学习笔记9 prototype封装继承


Posted in Javascript onJanuary 11, 2010

好,那就让我们一步步打造,首先让我们来看下继承原本的写法:

<script> 
var Person = function(name, age) { 
this.name = name; 
this.age = age; 
} 
Person.prototype.SayHello = function () { 
alert(this.name + "," + this.age); 
}; 
var Programmer = function (name, age, salary) { 
Person.call(this, name, age); 
this.salary = salary; 
}; 
Programmer.prototype = new Person(); 
var pro = new Programmer("kym", 21, 500); 
pro.SayHello(); 
</script>

我们看到,在实际上,继承的根本就在于这一步Programmer.prototype=new Person()。也就是说把Person加到原型链上。这一点在Javascript学习笔记7——原型链的原理 已经有过比较详尽的解释。
那也就是说,我们实现的关键就在于原型链的打造。
在上文中,我们用JSON来打造了一个原型,其原型链是p.__proto__=Person。那么我们希望在这个上封装继承,那么原型链应该是p.__proto__.__proto__=SuperClass,也就是说Person.__proto__=SuperClass。但是按照我们上面代码的继承方法,原型链关系是Person.__proto__=SuperClass.prototype。
这个和我们在上文中一样,我们的办法就是借助一个辅助函数,将原来的函数内的属性赋给X,然后令X.prototype=SuperClass即可,也就是说我们将子原型进行一个封装。
好,就按照这个思路,我们来实现利用原型链的继承关系的封装。
<script> 
var Factory = { 
Create: function (className, params) { 
var temp = function () { 
className.Create.apply(this, params); 
}; 
temp.prototype = className; 
var result = new temp(); 
return result; 
}, 
CreateBaseClass: function (baseClass, subClass) { 
var temp = function () { 
for (var member in subClass) { 
this[member] = subClass[member]; 
} 
}; 
temp.prototype = baseClass; 
return new temp(); 
} 
}; 
var People = { 
Create: function (name, age) { 
this.name = name; 
this.age = age; 
}, 
SayHello: function () { 
alert("Hello,My name is " + this.name + ".I am " + this.age); 
} 
}; 
var Temp = { 
Create: function (name, age, salary) { 
People.Create.call(this, name, age); 
this.salary = salary; 
}, 
Introduce: function () { 
alert(this.name + "$" + this.age + "$" + this.salary); 
} 
}; 
var Programmer = Factory.CreateBaseClass(People, Temp); 
var pro = Factory.Create(Programmer, ["kym", 21, 500]); 
pro.SayHello(); 
</script>

这样就完成了我们对继承关系的封装。当然,我们也可以不单独写一个变量:
var Programmer = Factory.CreateBaseClass(People, 
{ 
Create: function (name, age, salary) { 
People.Create.call(this, name, age); 
this.salary = salary; 
}, 
Introduce: function () { 
alert(this.name + "$" + this.age + "$" + this.salary); 
} 
});

当然,这全凭个人爱好了,个人认为第一种办法相对更清晰一些,但是第二种办法则更优雅。
Javascript 相关文章推荐
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
js 幻灯片的实现
Dec 06 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
浅谈javascript中return语句
Jul 15 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 #Javascript
Javascript学习笔记7 原型链的原理
Jan 11 #Javascript
Javascript学习笔记6 prototype的提出
Jan 11 #Javascript
Javascript学习笔记5 类和对象
Jan 11 #Javascript
Javascript学习笔记4 Eval函数
Jan 11 #Javascript
Javascript学习笔记2 函数
Jan 11 #Javascript
Javascript学习笔记1 数据类型
Jan 11 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
js 颜色选择插件
2017/01/23 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
三星英国官网:Samsung英国
2018/09/25 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Python实现日志实时监测的示例详解
2022/04/06 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js