javascript中如何实现继承

猿友 2021-02-01 13:53:26 浏览数 (2702)
反馈

类式继承

//声明父类
//声明父类
function SuperClass() {
  this.superValue = true;
}
//为父类添加共有方法
SuperClass.prototype.getSuperValue = function () {
  return this.superValue;
};
​
//声明子类
function SubClass() {
  this.subValue = false;
}
​
//继承父类
SubClass.prototype = new SuperClass();
//为子类添加共有方法
SubClass.prototype.getSubValue = function () {
  return this.subValue;
};
​
var instance = new SubClass();
console.log(instance.getSuperValue()); //true
console.log(instance.getSubValue()); //false

类式继承需要将父类的实例赋值给子类原型， subClass.prototype 继承了 superClass。 这种类式继承有两个缺点。其一，由于子类通过原型 prototype 对父类实例化，继承了父类，父类中的共有属性要是引用类型，就会在子类中被所有实例共用，因此一个子类的实例更改子类原型从父类构造函数中继承来的共有属性就会直接影响到其他子类，如下：

function SuperClass() {
    this.courses = ['语文', '数学', '英语']
}
function SubClass() {}
SubClass.prototype = new SuperClass();
​
var instance1 = new SubClass()
var instance2 = new SubClass()
​
console.log(instance2.courses) //['语文', '数学', '英语']
instance1.courses.push('化学')
console.log(instance2.courses) //['语文', '数学', '英语', '化学']

instance1 的修改直接影响了 instance2，这是一个灾难的陷阱。其二，由于子类实现的继承是靠其原型 prototype 对父类的实例化实现的，因此在创建父类的时候，是无法向父类传递参数的，因而在实例化父类的时候也无法对父类构造函数内的属性进行初始化。如何解决这个问题？请继续往下看。

构造函数继承

function SuperClass(current) {
  this.courses = ["语文", "数学", "英语"];
  this.current = current;
}
​
//父类声明原型方法
SuperClass.prototype.getCourses= function () {
  console.log(this.courses);
};
​
//声明子类
function SubClass(current) {
  SuperClass.call(this, current);
}
​
var instance1 = new SubClass("语文");
var instance2 = new SubClass("数学");
​
instance1.courses.push('化学')
console.log(instance1.courses); //["语文", "数学", "英语"， "化学"]
console.log(instance1.current); //语文
console.log(instance2.courses); //["语文", "数学", "英语"]
console.log(instance2.current); //数学
​
instance1.getCourses() //TypeError: instance1.getCourses is not a function

SuperClass.call(this, current) 这条语句是构造函数继承的精华。由于 call 这个方法可以更改函数的作用环境，因此在子类中，对 SuperClass 调用这个 call 就是将子类中变量在父类中执行一遍，由于父类中是给 this 绑定属性的，因此子类也就继承了父类的共有属性。 由于这种类型的继承没有涉及原型 prototype，所以父类的的原型方法不会被子类继承，要想被子类继承，只能将 showCourse 放在父类构造函数中，但是这样就违背了代码复用的原则。为了综合以上两种继承的优点，于是有了组合继承。

组合继承

//组合继承
​
function SuperClass(current) {
  //引用类型共有属性
  this.courses = ["语文", "数学", "英语"];
  // 值类型共有属性
  this.current = current;
}
​
SuperClass.prototype.getCourses = function () {
  console.log(this.courses);
};
​
SuperClass.prototype.getCurrent = function () {
  console.log(this.current);
};
​
// 声明子类
function SubClass(current, time) {
  //构造函数继承父类属性
  SuperClass.call(this, current);
  this.time = time;
}
//类式继承 子类原型继承父类
SubClass.prototype = new SuperClass();
//子类原型方法
SubClass.prototype.getTime = function () {
  console.log(this.time);
};

在子类构造函数中执行父类构造函数，在子类的原型上实例化父类就是组合模式，子类实例中更改父类继承下来的引用类型属性 courses 不会改变其他实例，测试如下

var instance1 = new SubClass("语文", "9:00");
instance1.getTime(); //9:00
instance1.courses.push('化学')
instance1.getCourses(); //["语文", "数学", "英语", "化学"]
instance1.getCurrent(); //语文
console.log(instance1.current)//语文
​
var instance2 = new SubClass("数学", "10:00");
instance2.getTime(); //10:00
instance2.getCourses(); //["语文", "数学", "英语"]
instance2.getCurrent(); //数学
console.log(instance2.current)//数学

但是该模式在执行子类构造函数时执行了一遍父类函数，在实现子类原型继承时又执行了一遍父类构造函数，调用了父类构造函数两遍，显然是一个设计缺陷，那还有更好的方式吗？针对该缺陷，出现了“寄生组合式继承”

寄生组合式继承

在介绍这种继承方式之前，需要先了解 “原型式继承”和“寄生式继承”

基础了解

原型式继承

function inheritObject(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
​
var course = {
  name: "语文",
  alikeCourse: ["数学", "英语"],
};
​
var newCourse = inheritObject(course);
newCourse.name = "化学";
newCourse.alikeCourse.push("物理");
​
var otherCourse = inheritObject(course);
otherCourse.name = "政治";
otherCourse.alikeCourse.push("历史");
​
console.log(newCourse.name); //化学
console.log(newCourse.alikeCourse); //["数学", "英语", "物理", "历史"]
​
console.log(otherCourse.name); //政治
console.log(otherCourse.alikeCourse); //["数学", "英语", "物理", "历史"]
​
console.log(course.name); //语文
console.log(course.alikeCourse); //["数学", "英语", "物理", "历史"]

inheritObject 可以看做是对类式继承的一种封装，其中的过度类 F 相当于类式继承中的子类。在类式继承中存在的共用引用类型的问题依然存在，但是过度类 F 构造函数中无内容，所以开销较小。

寄生式继承

“寄生式继承”是在“原型式继承”的基础上继续增强。

function inheritObject(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
​
var course = {
  name: "语文",
  alikeCourse: ["数学", "英语"],
};
​
function createCourse(obj) {
  //通过原型继承方式创建新对象
  var o = new inheritObject(obj);
  // 拓展新对象
  o.getName = function () {
    console.log(this.name);
  };
  return o;
}
​
const newCourse = createCourse(course)

这种方式在某个对象内部持续增长属性，像寄生式生长，所以称之为寄生继承。寄生继承是对原型继承的二次封装，并且在二次封装的过程中对继承的对象做了拓展，这样新创建的对象不仅仅有父类中的属性和方法，而且还添加了新的属性和方法。在这种思想的基础上，结合组合式继承，衍生了 “寄生组合式继承”

实现

function inheritObject(o) {
    function F() {}
    F.prototype = o;
    return new F();
  }
function inheritPrototype(subClass, superClass) {
    //复制一份父类的原型副本保存在变量中
    var p = inheritObject(superClass.prototype)
    //修正因为重写子类原型导致子类的constructor属性被修改
    p.constructor = subClass
    //设置子类的原型
    subClass.prototype = p
}

以上父类原型保存一个副本，赋值给子类原型，从而实现继承，且并未重新调用一次父类函数，测试如下，与组合继承模式相近

//test
​
function SuperClass(current) {
  //引用类型共有属性
  this.courses = ["语文", "数学", "英语"];
  // 值类型共有属性
  this.current = current;
}
​
SuperClass.prototype.getCourses = function () {
  console.log(this.courses);
};
​
SuperClass.prototype.getCurrent = function () {
  console.log(this.current);
};
​
// 声明子类
function SubClass(current, time) {
  //构造函数继承父类属性
  SuperClass.call(this, current);
  this.time = time;
}
​
//寄生式继承 子类原型继承父类
inheritPrototype(SubClass, SuperClass);
​
//类式继承 子类原型继承父类
// SubClass.prototype = new SuperClass();
​
//子类原型方法
SubClass.prototype.getTime = function () {
  console.log(this.time);
};
​
var instance1 = new SubClass("语文", "9:00");
var instance2 = new SubClass("数学", "10:00");
​
instance1.getTime(); //9:00
instance1.courses.push("化学");
instance1.getCourses(); //["语文", "数学", "英语", "化学"]
instance1.getCurrent(); //语文
console.log(instance1.current); //语文
​
instance2.getTime(); //10:00
instance2.getCourses(); //["语文", "数学", "英语"]
instance2.getCurrent(); //数学
console.log(instance2.current); //数学

区别仅在

//寄生式继承 子类原型继承父类
inheritPrototype(SubClass, SuperClass);
​
//类式继承 子类原型继承父类
// SubClass.prototype = new SuperClass();

从而实现多个子类多个实例不相互影响，父类构造函数仅仅调用一次，堪当 JavaScript 继承的终极模式。


JavaScript

0 人点赞

©w3cschool编程狮闽ICP备15016281号-3

违法和不良信息举报电话：173-0602-2364|举报邮箱：jubao@eeedong.com