Javascript学习笔记9 prototype封装继承
Javascript学习笔记9 prototype封装继承
发布时间:2016-12-30 来源:查字典编辑
摘要:好,那就让我们一步步打造,首先让我们来看下继承原本的写法:复制代码代码如下:varPerson=function(name,age){thi...

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

复制代码 代码如下:

<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教程学习
编程开发子分类