-
原型链继承
function Parent() { this.familyName = '张'; } Parent.prototype.getLanguage = function() { return 'chinese'; } function Child(age, gender) { this.age = age || 0; this.gender = gender || '未知'; } Child.prototype = new Parent(); let daughter = new Child(2, '女'); let son = new Child(10, '男'); //daughter: {age: 2, gender: '女'} daughter.getLanguage(): 'chinese' daughter.familyName: '张' //son: {age: 10, gender: '男'} son.getLanguage(): 'chinese' son.familyName: '张'
缺点:原型被所有子类的实例共享,一个子类更改原型上的属性,会同时更改其他子类的属性(所有子类公用是同一个对象);子类拥有父类实例的属性和方法。
-
经典继承(构造方法继承)
在子类的构造函数中使用call()或者apply()调用父类构造函数function Parent(age, gender) { this.familyName = '王'; this.age = age || 0; this.gender = gender || '未知'; } Parent.prototype.getLanguage = function() { return 'chinese'; } function Child(age, gender){ Parent.call(this, age, gender); } let daughter = new Child(2, '女'); let son = new Child(10, '男');
缺点:子类不是父类的实例,只是借用了父类的构造函数,给自己赋值;不能继承父类原型链。
-
组合继承:原型链继承+经典继承
function Parent(age, gender) { this.age = age || 0; this.gender = gender || '未知'; this.familyName = '李';//父类实例才有的属性 } Parent.prototype.getLanguage = function () { return 'chinese'; } function Child(age, gender) { Parent.call(this, age, gender); } Child.prototype = new Parent(); Child.prototype.constructor = Child; let son = new Child(10, '男');
特点:结合原型式继承和构造函数继承
缺点:子类具有父类实例的属性和方法(son.familyName
:‘李’ )。 -
原型式继承
const parent = { familyName: '赵', member: [], } const child1 = Object.create(parent); child1.member.push(child1); const child2 = Object.create(parent); child2.member.push(child2); //child2.member: [child1, child2]; child1.__proto__ === child2.__proto__
let child = Object.create(parent)
相当于创建一个child对象,并把这个child对象的原型(__proto__
)指向parent。(child.__proto__=parent
)
缺点:所有子类实例共享parent,一个子类实例更改parent属性,其他的也会改变。 -
寄生式继承(跟原型继承相似,可以给新创建的对象添加额外的属性和方法)
function factoryFun(obj) { let newObj = Object.create(obj); newObj.getLanguage = function () { return 'chinese'; } return newObj; }
缺点:每次创建对象都会创建一遍方法。
-
寄生组合式继承(最完美的方式)
function Parent(age, gender) { this.age = age || 0; this.gender = gender || '未知'; this.familyName = '钱'; } function Child(age, gender) { Parent.call(age, gender); } Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child;
JS的继承方式
于 2022-04-08 15:16:01 首次发布