下面是小结的js四种方式实现的继承
<script>
<!--继承-->
<!--方式一:原型链-->
function Parent(idea) {
this.idea=idea;
this.arr=[1]
}
Parent.prototype.give=function () {
alert(JSON.stringify(this.arr));
};
function Son(name,age) {
this.name=name;
this.age=age;
}
Son.prototype=new Parent("心境");
var son1=new Son();
var son2=new Son();
son1.give();//[1]
son2.arr.push(2);
son1.give();[1,2]
//缺点:原型共用,当son2中的arr修改后,所有实例中的arr都会被修改;
//优点:简单容易理解
<!--方式二:构造函数模式-->
function Parent(idea) {
this.idea=idea;
this.arr=[1];
this.give=function () {
alert(JSON.stringify(this.arr));
};
}
function Son(name,age,idea) {
this.name=name;
this.age=age;
Parent.call(this,idea)
}
var son1=new Son("","","心境1");
var son2=new Son("","","心境2");
son1.give();//[1]
console.log(son1.idea);//心境1
console.log(son2.idea);//心境2
son2.arr.push(2);
son1.give();//[1]
//优点:解决子类实例共享父类引用属性的问题
//缺点:无法实现函数复用,每个实例都有一个新的函数,内存性能问题
<!--方式三:组合继承模式-->
function Parent(idea) {
this.idea=idea;
this.arr=[1];
}
Parent.prototype.give=function () {
alert(JSON.stringify(this.arr));
};
function Son(name,age,idea) {
this.name=name;
this.age=age;
Parent.call(this,idea)
}
Son.prototype=new Parent();
var son1=new Son("","","心境1");
var son2=new Son("","","心境2");
son1.give();//[1]
console.log(son1.idea);//心境1
console.log(son2.idea);//心境2
son2.arr.push(2);
son1.give();//[1]
//优点:不存在引用属性共享问题;函数不可用
//缺点:子类原型上有一份多余的父类实例属性;
<!--方式四:寄生组合继承模式-->
function dealPrototy(obj) {
var F=function () {};
F.prototype=obj;
return new F();
}
function Parent(idea) {
this.idea=idea;
this.arr=[1];
}
Parent.prototype.give=function () {
alert(JSON.stringify(this.arr));
};
function Son(name,age,idea) {
this.name=name;
this.age=age;
Parent.call(this,idea)
}
var proto=dealPrototy(Parent.prototype);//*
proto.constructor=Parent;//*
Son.prototype=proto;//*
var son1=new Son("","","心境1");
var son2=new Son("","","心境2");
son1.give();//[1]
console.log(son1.idea);//心境1
console.log(son2.idea);//心境2
console.log(son2 instanceof Son);//心境2
son2.arr.push(2);
son1.give();//[1]
//优点:解决了子类原型上有一份多余的父类实例属性(组合模式存在的问题)
</script>