JS继承主要有以下几种:
1.原型链继承:将父类的实例作为子类的原型
function Parent() {
this.isShow = true
this.info = {
name: "yhd",
age: 18,
};
}
Parent.prototype.getInfo = function() {
console.log(this.info);
console.log(this.isShow); // true
}
function Child() {};
// 最关键的一行
Child.prototype = new Parent();
2.构造函数继承:通过在子类构造函数中调用父类构造函数,可以在子类构造函数中使用call()
和apply()
方法。
function Parent() {
this.info = {
name: "yhd",
age: 19,
}
}
function Child() {
// 通过 call 方法将 child构造函数调用时产生的实例对象作为parent的函数上下文
,因此继承了parent的引用属性info。
Parent.call(this)
}
let child1 = new Child();
child1.info.gender = "男";
console.log(child1.info); // {name: "yhd", age: 19, gender: "男"};
let child2 = new Child();
console.log(child2.info); // {name: "yhd", age: 19}
通过使用这两个方法,Parent
构造函数在 new 一个 child 实例对象的上下文中执行了,就相当于新创建的实例对象运行了 Parent()
函数中的所有初始化代码,结果就是每个实例都有自己的info
属性。
优点:对比原型链继承,构造函数继承的一个优点是子类构造函数可以向父类构造函数传参;父类的的引用属性不会被共享
缺点:子类不能访问父类原型上的方法,(即不能访问Parent.prototype上定义的方法),因此所有方法属性都写在构造函数中,每次创建实例都会初始化
function Parent(name) {
this.info = { name: name };
}
function Child(name) {
//继承自Parent,并传参
Parent.call(this, name);
//实例属性
this.age = 18
}
let child1 = new Child("yhd");
console.log(child1.info.name); // "yhd"
console.log(child1.age); // 18
上面实例中得知,父类构造函数Parent接受到一个参数name,并将它赋值给属性name,在Child
构造函数中调用 Parent
构造函数时传入这个参数,实际上会在Child
实例上定义name
属性。
3.组合继承
结合原型链继承和构造函数继承的优点:基本思路是使用原型链继承原型上的属性和方法,使用构造函数继承实例属性。
function Parent(name) {
this.name = name
this.colors = ["red", "blue", "yellow"]
}
Parent.prototype.sayName = function () {
console.log(this.name);
}
function Child(name, age) {
// 继承父类属性
Parent.call(this, name)
this.age = age;
}
// 继承父类方法
Child.prototype = new Parent();
Child.prototype.sayAge = function () {
console.log(this.age);
}
let child1 = new Child("yhd", 19);
child1.colors.push("pink");
console.log(child1.colors); // ["red", "blue", "yellow", "pink"]
child1.sayAge(); // 19
child1.sayName(); // "yhd"
let child2 = new Child("wxb", 30);
console.log(child2.colors); // ["red", "blue", "yellow"]
child2.sayAge(); // 30
child2.sayName(); // "wxb"
从上面的例子可知,Parent构造函数定义了两个属性name和colors,然后在他的原型上定义了sayName()方法,Child 构造函数内部调用了 Parent 构造函数,同时传入了参数name,同时Child.prototype
也被赋值为Parent实例
,然后又在他的原型上添加了个sayAge()
方法。
这样就创建了两个实例child1 child2,让两个实例都有自己的属性,而且还共享了父类的sayName方法。
总结:组合类继承的优点有三个,父类的方法可以共用、父类构造函数的引用属性不会共享、子类构造函数可以传参。
4.原型式继承
对参数对象的一种浅复制
// 在普通函数里面调用构造函数创建一个实例对象,并将被复制对象作为参数,赋值给这个实例对象,
从而实现继承
function objectCopy(obj) {
function Fun() { };
Fun.prototype = obj;
return new Fun()
}
let person = {
name: "yhd",
age: 18,
friends: ["jack", "tom", "rose"],
sayName:function() {
console.log(this.name);
}
}
let person1 = objectCopy(person);
person1.name = "wxb";
person1.friends.push("lily");
person1.sayName(); // wxb
let person2 = objectCopy(person);
person2.name = "gsr";
person2.friends.push("kobe");
person2.sayName(); // "gsr"
console.log(person.friends); // ["jack", "tom", "rose", "lily", "kobe"]
缺点:父类的引用属性会被共享(例子中的friends)、子类不能向父类传参。
5.寄生式继承
使用原型式继承实现对目标对象的浅复制,同时增强浅复制的能力
function objectCopy(obj) {
function Fun() { };
Fun.prototype = obj;
return new Fun();
}
function createAnother(original) {
let clone = objectCopy(original);
clone.getName = function () {
console.log(this.name);
};
return clone;
}
let person = {
name: "yhd",
friends: ["rose", "tom", "jack"]
}
let person1 = createAnother(person);
person1.friends.push("lily");
console.log(person1.friends); // ["rose", "tom", "jack", "lily"]
person1.getName(); // yhd
let person2 = createAnother(person);
console.log(person2.friends); // ["rose", "tom", "jack", "lily"]
6.寄生式组合继承(是引用类型继承的最佳模式 )
function objectCopy(obj) {
function Fun() { };
Fun.prototype = obj;
return new Fun();
}
function inheritPrototype(child, parent) {
let prototype = objectCopy(parent.prototype); // 创建对象
// 这两行代码形成闭环,prototype上的属性constructor指向child构造函数,child构造函数
上的属性prototype 指向它的原型prototype对象
prototype.constructor = child; // 增强对象
Child.prototype = prototype; // 赋值对象
}
function Parent(name) {
this.name = name;
this.friends = ["rose", "lily", "tom"]
}
Parent.prototype.sayName = function () {
console.log(this.name);
}
function Child(name, age) {
Parent.call(this, name);
this.age = age;
}
//与组合继承的区别在于这一句代码
inheritPrototype(Child, Parent);
// 在组合式继承中,是继承父类方法
// Child.prototype = new Parent();
Child.prototype.sayAge = function () {
console.log(this.age);
}
let child1 = new Child("yhd", 23);
child1.sayAge(); // 23
child1.sayName(); // yhd
child1.friends.push("jack");
console.log(child1.friends); // ["rose", "lily", "tom", "jack"]
let child2 = new Child("yl", 22)
child2.sayAge(); // 22
child2.sayName(); // yl
console.log(child2.friends); // ["rose", "lily", "tom"]
优点:
-
父类的方法可以复用
-
可以在Child构造函数中向Parent构造函数中传参
-
父类构造函数中的引用属性不会被共享
-
只调用一次构造函数