js继承六种方式:
1.原型链继承
2.构造函数(经典继承)
3.组合继承
4.原型式继承
5.寄生式继承
6.寄生组合式继承
什么是继承?
一个类获取另一个或者多个类的属性或者方法。继承可以使得子类具有父类的各种方法和属性。以免重复输出很多代码。
继承的原理?
复制父类的方法和属性来重写子类的原型对象。
// 原型链继承
function Person(){
this.name = 'xiaopao';
}
Person.prototype.getName = function(){
console.log(this.name);
}
function Child(){
}
Child.prototype = new Person();
var child1 = new Child();
child1.getName(); // xiaopao
缺点:
引用类型的属性被所有实例共享
在创建Child 的实例时, 不能向Person传参
// 构造函数继承(经典继承) 复制父类构造函数内的属性
function Person(){
this.name = 'xiaopao';
this.colors = ['red', 'blue', 'green'];
}
Person.prototype.getName = function(){
console.log(this.name);
}
function Child(){
Person.call(this);
}
var child1 = new Child();
var child2 = new Child();
child1.colors.push('yellow');
console.log(child1.name);
console.log(child1.colors); // ["red", "blue", "green", "yellow"]
console.log(child2.colors); // ["red", "blue", "green"]
优点:
1.避免了引用类型的属性被所有实例共享
2.可以在Child中向Parent传参
缺点:
1.只是子类的实例,不是父类的实例
2.方法都在构造函数中定义,每次创建实例都会创建一遍方法
//组合继承 思路:使用原型链实现对原型方法的继承,而通过借用构造函数来实现对实例属性的继承。
function Parent(name){
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function(){
console.log(this.name);
}
function Child(name,age){
Parent.call(this,name);// 第二次调用 Parent()
this.age = age;
}
Child.prototype = new Parent(); // 第一次调用 Parent()
var child1 = new Child('xiaopao',18);
var child2 = new Child('lulu',19);
child1.getName(); // xiaopao
child2.getName(); // lulu
console.log(child1.age); // 18
console.log(child2.age); // 19
child1.colors.push('yellow');
console.log(child1.colors); // ["red", "blue", "green", "yellow"]
console.log(child2.colors); // ["red", "blue", "green"]
console.log(child1 instanceof Child); // true
console.log(child1 instanceof Parent); // true
优点:融合原型链继承和构造函数的优点,是JavaScript中最常用的继承模式
缺点:调用了两次父类构造函数
// 原型式继承
//因为我们找对象上的属性时,总是先找实例上对象,没有找到的话再去原型对象上的属性。
//实例对象和原型对象上如果有同名属性,总是先取实例对象上的值
function CreateObj(o){
function F(){}
F.prototype = o;
console.log(o.__proto__ === Object.prototype);
console.log(F.prototype.constructor === Object); // true
return new F();
}
var person = {
name: 'xiaopao',
friend: ['daisy','kelly']
}
var person1 = CreateObj(person);
// var person2 = CreateObj(person);
person1.name = 'person1';
// console.log(person2.name); // xiaopao
person1.friend.push('taylor');
// console.log(person2.friend); // ["daisy", "kelly", "taylor"]
// console.log(person); // {name: "xiaopao", friend: Array(3)}
person1.friend = ['lulu'];
// console.log(person1.friend); // ["lulu"]
// console.log(person.friend); // ["daisy", "kelly", "taylor"]
缺点: 包含引用类型的属性值始终都会共享相应的值, 这点跟原型链继承一样
// 寄生式继承 可以理解为在原型式继承的基础上增加一些函数或属性
var ob = {
name: 'xiaopao',
friends: ['lulu','huahua']
}
function CreateObj(o){
function F(){}; // 创建一个构造函数F
F.prototype = o;
return new F();
}
// 上面CreateObj函数 在ECMAScript5 有了一新的规范写法,Object.create(ob) 效果是一样的 , 看下面代码
var ob1 = CreateObj(ob);
var ob2 = Object.create(ob);
console.log(ob1.name); // xiaopao
console.log(ob2.name); // xiaopao
function CreateOb(o){
var newob = CreateObj(o); // 创建对象 或者用 var newob = Object.create(ob)
newob.sayName = function(){ // 增强对象
console.log(this.name);
}
return newob; // 指定对象
}
var p1 = CreateOb(ob);
p1.sayName(); // xiaopao
缺点:跟借用构造函数一样,每次创建对象都会创建一遍方法
// 寄生组合式继承
思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型的原型的一个副本而已。
本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给予类型的原型。
function Parent(name){
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.sayName = function(){
console.log(this.name);
}
function Child(name,age){
Parent.call(this,name);
this.age = age;
}
function CreateObj(o){
function F(){};
F.prototype = o;
return new F();
}
// Child.prototype = new Parent(); // 这里换成下面
function prototype(child,parent){
var prototype = CreateObj(parent.prototype);
prototype.constructor = child;
child.prototype = prototype;
}
prototype(Child,Parent);
var child1 = new Child('xiaopao', 18);
console.log(child1);
优点:
这种方式的高效率体现它只调用了一次Parent构造函数,
并且因此避免了再Parent.prototype上面创建不必要的,多余的属性。
普遍认为寄生组合式继承是引用类型最理想的继承方式