Javascript继承模式(上)
1.传统继承(原型链)
缺点:过多继承了没用的属性。
以下是一个原型链,three只想使用一个name的属性,结果自身多继承了age,sex等属性
<script type="text/javascript">
One.prototype.name = 'test';
function One() {
this.age = 1;
}
var one = new One();
Two.prototype = one;
function Two() {
this.sex = 'male';
}
var two = new Two();
Three.prototype = two;
function Three() {
}
var three = new Three();
</script>
2.借用构造函数(call和apply)
缺点:使用call和apply不能继承该构造函数的原型。
每次执行构造函数都要多走一个函数,示例:
每次执行构造函数People时都会执行Person.call去引用Person里的值。
这种方法只是减少了代码量,运行步骤一点也没减小。
<script type="text/javascript">
function Person(name, age) {
this.name = name;
this.age = age;
}
function People(name, sex, height, age) {
Person.call(this, name, age);
this.sex = sex;
this.height = height;
}
var people = new People('墨小白', 'male', 172, 18);
</script>
在做开发的时候,如果有以上的那种需求的话(一个函数完全包含了另一个函数),还是建议使用这种方法的。
3.共享原型
缺点:不能随便改动自己的原型
因为原型是共享的,一旦有一个构造函数对自己的原型进行了修改,都会影响到其他构造函数。
<script type="text/javascript">
Father.prototype.lastName = '白';
function Father() {
}
function Son () {
}
Son.prototype = Father.prototype;
var son = new Son();
</script>
可以把这种操作封装成一个方法,以便随时调用。
<script type="text/javascript">
Father.prototype.lastName = '白';
function Father() {
}
function Son () {
}
function inherit(Target, Origin) {
Target.prototype = Origin.prototype;
}
inherit(Son, Father);
var son = new Son();
</script>
4.圣杯模式
利用原型链,加一个中间层。
在共享原型的基础上,自己修改原型也不会影响到其他构造函数。
<script type="text/javascript">
Father.prototype.lastName = '白';
function Father() {
}
function Son () {
}
function Lk() {}//加一个中间层Lk
Lk.prototype = Father.prototype;//使Lk的原型为Father的原型
Son.prototype = new Lk();//Son的原型为Lk对象
var son = new Son();//此时Son修改原型的话修改的是Lk对象,调用的话还是调用的Father的原型。
</script>
可以封装成方法,以便使用。
<script type="text/javascript">
Father.prototype.lastName = '白';
function Father() {
}
function Son () {
}
function inherit(Target, Origin) {
function Lk() {};
Lk.prototype = Origin.prototype;
Son.prototype = new Lk();
}
inherit(Son, Father);//传参使用
var son = new Son();
</script>
原创博客,盗版必究