经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS中的六种继承方式以及优缺点总结
来源:jb51  时间:2021/10/11 15:53:35  对本文有异议

前言

继承是JS世界中必不可少的一个环节,号称JS的三座大山之一,使用这种方式我们可以更好地复用以前的开发代码,缩短开发的周期、提升开发效率

在ES6之前,JS中的类都是通过构造函数模拟的,并不存在真正意义上的类,虽然ES6的类知识一个语法糖😂,这个时期的类是可以当作函数直接使用的,到了ES6之后,类是不可以再当作函数使用了

在开始聊继承之前,首先需要明确的是类中存在两种属性:实例上的属性和公共属性,接下来谈到的所有继承方式都是围绕这两点来展开

  1. function Animal(name) {
  2. // 实例上的属性
  3. this.name = name;
  4. }
  5.  
  6. // 公共属性
  7. Animal.prototype.eat = function() {
  8. // todo ...
  9. }

如何避免将ES6之前的构造函数直接当作函数调用?

ES5时期解决方案:

  1. function Animal() {
  2. // 若是直接调用, 不是使用 new调用, 抛出异常
  3. if (!(this instanceof Animal)) {
  4. // new的原理, 使用new的时候, this是Animal的实例, 则 this instanceof Animal 为true
  5. throw new Error("请勿直接调用构造函数");
  6. }
  7. }

ES6之后解决方案:

  1. function Animal() {
  2. // 若是使用new, 则new.target指向自身, 否则为undefined, 但是在继承的时候不能使用,因为继承实例上属性的时候, 原来的es5是使用 Animal.call(this)的方式
  3. if (!new.target) {
  4. throw new Error("请勿直接调用构造函数");
  5. }
  6. }
  7.  

上述两种方案都可以解决直接当作函数调用,若是直接调用控制台会报错:Uncaught Error: 请勿直接调用构造函数

接下来便一起看看JS中有哪些继承方式

原型链继承

原型链继承是比较常见的继承方式之一,其中涉及的构造函数、原型和实例,三者之间存在着一定的关系,即每一个构造函数都有一个原型对象,原型对象又包含一个指向构造函数的指针,而实例则包含一个原型对象的指针。

  1. function Person(name) {
  2. this.name = name;
  3. this.permission = ["user", "salary", "vacation"];
  4. }
  5.  
  6. Person.prototype.say = function () {
  7. console.log(`${this.name} 说话了`);
  8. };
  9.  
  10. function Staff(age) {
  11. this.age = age;
  12. }
  13.  
  14. Staff.prototype = new Person("张三");
  15.  
  16. const zs = new Staff(12);
  17. console.log(zs.name); // 张三
  18. zs.say(); // 张三 说话了

此时代码是符合期望,接下来再创建一个实例并修改name和permission

  1. const zs = new Staff(12);
  2. const zs2 = new Staff(18);
  3. zs.permission.pop()
  4. zs.name = '李四';
  5.  
  6. console.log(zs.name);
  7. console.log(zs2.name);
  8. console.log(zs.permission);
  9. console.log(zs2.permission);

前两个分别输出是:李四、张三,后面两个输出结果一致,都为["user", "salary"],为什么会出现这种情况呢?
当执行zs.name = '李四';时,其实这个时候是赋值操作,赋值之后zs变为

而zs2.name是通过原型链继续查找,因此前面的两个输出是李四、张三

通过console.log(zs.__proto__ === zs2.__proto__);输出为true,可以得知两个实例使用的是同一个原型对象Person,他们的内存空间是共享的,当一个发生变化时,另外一个也随之进行了变化

通过上述发现原型链继承存在一些缺点

构造函数继承

构造函数通常时借助call、apply来完成继承

  1. function Person(name) {
  2. this.name = name;
  3. this.permission = ["user", "salary", "vacation"];
  4. }
  5.  
  6. Person.prototype.say = function () {
  7. console.log(`${this.name} 说话了`);
  8. };
  9.  
  10. function Staff(name, age) {
  11. Person.call(this, name);
  12. this.age = age;
  13. }
  14.  
  15. Staff.prototype.eat = function () {
  16. console.log('吃东西啦~~~');
  17. }
  18.  
  19. const zs = new Staff("张三", 12);
  20. console.log(zs);

上述代码控制台输出:

可以看到不仅拥有Staff的属性和方法,同时也继承了Person的属性,因为每次实例化的时候都会调用Person.call(this, name);,可以解决原型链继承的问题

此时调用Person原型上的方法

  1. zs.say()

这个时候控制台会报错:Uncaught TypeError: zs.say is not a function

组合继承(原型链继承和构造函数继承组合)

原型链继承和构造函数继承都存在各自的问题和优势,结合两种继承方式便生成了组合继承

  1. function Person(name) {
  2. this.name = name;
  3. this.permission = ["user", "salary", "vacation"];
  4. }
  5.  
  6. Person.prototype.say = function () {
  7. console.log(`${this.name} 说话了`);
  8. };
  9.  
  10. function Staff(name, age) {
  11. // 第二次执行 Person
  12. Person.call(this, name);
  13. this.age = age;
  14. }
  15.  
  16. Staff.prototype.eat = function () {
  17. console.log("吃东西啦~~~");
  18. };
  19.  
  20. // 第一次执行 Person
  21. Staff.prototype = new Person();
  22. // 若是不将Staff constructor指回到Staff, 此时的Staff实例zs.constructor则指向Person
  23. Staff.prototype.constructor = Staff;
  24.  
  25. const zs = new Staff("张三", 12);
  26. const ls = new Staff("李四", 12);
  27. zs.permission.pop();
  28. console.log(zs.permission);
  29. console.log(ls.permission);
  30. zs.say();
  31. ls.say();

暂时控制台的输出都是正常的,也将上述两种继承的缺点解决了,但是此时又新增了两个个问题:

  1. Person被执行了两次,分别为:Person.call(this, name)和new Person(),期望执行一次,多执行的一次便会造成一次性能开销
  2. 在之前Staff.prototype = new Person()定义一些公共属性和方法时会被覆盖掉,例如不能实例调用zs.eat(),控制台会报错Uncaught TypeError: zs.eat is not a function,若是在其之后定义则会污染Person

寄生式继承

通过利用Object.create获得一份目标对象的浅拷贝,然后添加一些方法避免污染基类,主要是解决组合继承的第二个问题

主要将如下两行代码进行替换

  1. Staff.prototype = new Person();
  2. Staff.prototype.constructor = Staff;

替换为:

  1. Staff.prototype = Object.create(Person.prototype, {
  2. constructor: {
  3. // 若是不将Staff constructor指回到Staff, 此时的Staff实例zs.constructor则指向Person
  4. value: Staff,
  5. },
  6. });

组合寄生式继承

到目前为止,还有一个两次实例化Person的问题没有解决,接下来的组合寄生式继承可完美解决上述问题,这也是ES6之前所有继承方式中最优的继承方式

完整代码如下:

  1. function Person(name) {
  2. this.name = name;
  3. this.permission = ["user", "salary", "vacation"];
  4. }
  5.  
  6. Person.prototype.say = function () {
  7. console.log(`${this.name} 说话了`);
  8. };
  9.  
  10. function Staff(name, age) {
  11. Person.call(this, name);
  12. this.age = age;
  13. }
  14.  
  15. Staff.prototype = Object.create(Person.prototype, {
  16. constructor: {
  17. // 若是不将Staff constructor指回到Staff, 此时的Staff实例zs.constructor则指向Person
  18. value: Staff,
  19. },
  20. });
  21.  
  22. Staff.prototype.eat = function () {
  23. console.log("吃东西啦~~~");
  24. };

其实继承时,改变Staff.prototype指向并不止上述这些方式,还有一些其他方法

  • prototype.__proto__方式
  1. Staff.prototype.__proto__ = Person.prototype

prototype.__proto__存在兼容性问题,自己找不到,通过原型链继续向上查找,此时Animal和Tiger不会再共享同一地址,不会相互影响

  • Object.setPrototypeOf方式
  1. Object.setPrototypeOf(Staff.prototype, Person.prototype)

es6语法, 存在兼容性,其原理就是原理就是 prototype.__proto__方式

extends继承

在ES6之后,可以使用extends进行继承,这也是目前开发中最常使用的方式,虽然目前浏览器支持度并不理想,但是在工程化如此完善的今天,这些都已经不是制约使用其的理由

  1. class Person {
  2. constructor(name) {
  3. this.name = name;
  4. this.permission = ["user", "salary", "vacation"];
  5. }
  6.  
  7. say() {
  8. console.log(`${this.name} 说话了`);
  9. }
  10. }
  11.  
  12. class Staff extends Person {
  13. constructor(name, age) {
  14. super(name);
  15. this.age = age;
  16. }
  17.  
  18. eat() {
  19. console.log("吃东西啦~~~");
  20. }
  21. }

其实ES6的继承通过babel编译之后,采用也是组合寄生式继承,因此我们需要重点掌握其继承原理。

总结

到此这篇关于JS中六种继承方式以及优缺点的文章就介绍到这了,更多相关JS继承方式及优缺点内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号