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开发时的五个注意事项
Dec 08 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
详解javascript高级定时器
Dec 31 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
深入理解vue Render函数
Jul 19 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
vue配置接口域名方法总结
May 12 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP eval函数使用介绍
2013/12/08 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
javascript常见操作汇总
2014/09/03 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Django框架安装方法图文详解
2019/11/04 Python
tensorflow常用函数API介绍
2020/04/19 Python
Django数据统计功能count()的使用
2020/11/30 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
委托公证书格式
2015/01/26 职场文书
经理岗位职责范本
2015/04/15 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
求职信如何撰写?
2019/05/22 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers