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 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
BootStrap selectpicker
Jun 20 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
javascript实现倒计时提示框
Mar 02 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
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python金融数据可视化汇总
2017/11/17 Python
python3调用R的示例代码
2018/02/23 Python
对Python3中的input函数详解
2018/04/22 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
什么是会话Bean
2015/05/14 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
运动会广播稿50字
2014/01/26 职场文书
珍惜水资源建议书
2014/03/12 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
民族学专业求职信
2014/07/28 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书