JavaScript中如何实现继承

admin 0
JS如何实现继承 在 JavaScript 中,继承是其中一个最重要的概念之一。JS 实现继承的方法主要有4种,分别是构造函数继承、原型链继承、组合继承、寄生式继承和原型式继承。 构造函数继承 构造函数继承说白了就是通过调用父类的构造函数,在子类中创建通过父类构造函数创建的属性和方法,从而实现继承的目的。下面是实现代码: ``` function Father(name){ this.name = name; this.sayName = function(){ console.log(this.name); } } function Son(name){ Father.call(this, name); } var boy = new Son('Tom'); boy.sayName(); // Tom ``` 构造函数继承的优缺点: 优点: 1. 可以实现多继承 2. 实例之间不会共享属性和方法 3. 能够在创建子类时向父类传递参数 缺点: 1. 不能继承原型链上的属性和方法 2. 每个子类都会创建一份独立的属性和方法,浪费内存 3. 无法实现函数复用 原型链继承 原型链继承本质上是通过让子类的原型对象指向父类的实例来达到继承的目的。下面是实现代码: ``` function Father(){ this.property = true; } Father.prototype.getSuperValue = function(){ return this.property; } function Son(){ this.subproperty = false; } Son.prototype = new Father(); Son.prototype.getSubValue = function(){ return this.subproperty; } var boy = new Son(); console.log(boy.getSuperValue()); // true console.log(boy.getSubValue()); // false ``` 原型链继承的优缺点: 优点: 1. 父类的属性和方法可以被多个子类共享使用 2. 可以让子类继承到父类原型对象中的属性和方法 缺点: 1. 无法实现多继承 2. 所有子类都会共享父类的属性和方法,造成内存浪费 3. 无法向父类传递参数 组合继承 组合继承是通过将构造函数继承和原型链继承结合起来使用的一种继承方式。它的实现过程是先通过构造函数继承的方式创建子类实例,然后再通过原型链继承的方式继承父类的原型链上的属性和方法。下面是实现代码: ``` function Father(name){ this.name = name; } Father.prototype.sayName = function(){ console.log(this.name); } function Son(name, age){ Father.call(this, name); // 构造函数继承 this.age = age; } Son.prototype = new Father(); // 原型链继承 Son.prototype.constructor = Son; Son.prototype.sayAge = function(){ console.log(this.age); } var boy = new Son('Tom', 18); boy.sayName(); // Tom boy.sayAge(); // 18 ``` 组合继承的优缺点: 优点: 1. 可以同时继承构造函数中的属性和父类原型上的属性和方法 2. 可以向父类构造函数传递参数 3. 可以实现多继承 4. 不会出现父类属性和方法被多个子类共享的情况 缺点: 1. 会执行两次父类的构造函数,造成性能上的浪费 2. 子类的 constructor 属性会发生改变,不再指向本身 寄生式继承 寄生式继承的核心思想是创建一个用于封装继承过程的函数,通过在这个函数中创建一个对象,这个对象可以继承另一个已有的对象,然后再给这个对象添加属性和方法,最终返回这个对象。下面是实现代码: ``` function inheritObject(obj){ function F(){} F.prototype = obj; return new F(); } var a = { name: 'Tom' } var b = inheritObject(a); b.age = '18'; console.log(b.name, b.age); //Tom 18 ``` 寄生式继承的优缺点: 优点: 1. 可以实现寄生组合式继承,提高继承效率 2. 不用修改原型对象,无需创建构造函数 缺点: 1. 对象及其原型上的所有属性和方法都会被复制或覆盖 2. 无法实现函数复用 原型式继承 原型式继承的本质是利用一个已有的对象作为原型,然后再通过丰富这个对象的属性和方法来达到继承的目的。下面是实现代码: ``` var person = { name: 'Tom', age: '18', sayName: function(){ console.log(this.name); } } var boy = Object.create(person, {gender: {value: 'male'}}); console.log(boy.name, boy.age, boy.gender); boy.sayName(); ``` 原型式继承的优缺点: 优点: 1. 可以从一个已有的对象中继承属性和方法 2. 可以实现对象之间的差异化,从而实现多继承 3. 可以向父类传递参数 缺点: 1. 不能实现函数复用 2. 子类对象和原型对象之间的关系比较混乱,不便于维护 总结 不同的继承方式各有优缺点。在实际开发中,需要根据实际情况选择合适的继承方式。构造函数继承适用于单继承,原型链继承适用于多继承,组合继承结合了构造函数继承和原型链继承的优点,比较常用。而寄生式继承和原型式继承则可以用来处理对象间的差异化,实现函数和属性的扩展复用等。