繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript学习笔记9 prototype封装继承
- Javascript
- JavaScript 语言精粹学习笔记
- 有关div页面拖动、缩放、关闭、遮罩效果代码
- JQuery this 和 $(this) 的区别
- JS 时间显示效果代码
- jquery 表单进行客户端验证demo
- JS 获取span标签中的值的代码 支持ie与firefox
- JavaScript 获取用户客户端操作系统版本
- 可以读取EXCEL文件的js代码
- JS去除字符串的空格增强版(可以去除中间的空格)
- 监控用户是否关闭浏览器的js代码
- javascript 继承实现方法
- JSON 入门指南 想了解json的朋友可以看下
- javascript 函数调用规则
- 动态表格Table类的实现
- JSON 客户端和服务器端的格式转换
- jQuery ui1.7 dialog只能弹出一次问题
- javascript 遍历验证所有文本框的值
- 关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
- javascript 简练的几个函数
- csdn 博客中实现运行代码功能实现
Javascript学习笔记9 prototype封装继承
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-20 浏览: 320 ::
收藏到网摘: n/a
在上文中，我利用prototype的原理做了一个封装的New，然后我就想到，我是否可以用prototype的原理进一步封装面向对象的一些基本特征呢？比如继承。 好，那就让我们一步步打造，首先让我们来看下继承原本的写法：
复制代码 代码如下:
<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);
}
});
当然，这全凭个人爱好了，个人认为第一种办法相对更清晰一些，但是第二种办法则更优雅。
评论 (0) All
