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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
编写v-for循环的技巧汇总
Dec 01 Javascript
js作用域及作用域链工作引擎
Jul 07 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中防止伪造跨站请求的小招式
2011/09/02 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
php实现递归的三种基本方式
2020/07/04 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
Python入门篇之字典
2014/10/17 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python科学画图代码分享
2017/11/29 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
铭立家具面试题
2012/12/06 面试题
家长会邀请书
2014/01/25 职场文书
上班离岗检讨书
2014/01/27 职场文书
学生感冒英文请假条
2014/02/04 职场文书
2015年教师新年寄语
2014/12/08 职场文书
检讨书怎么写
2015/05/07 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
2016国庆促销广告语
2016/01/28 职场文书