JavaScript 实现继承的几种方法

﹏ヽ暗。殇╰゛Y 2024-04-18 09:07 175阅读 0赞

1、原型链继承

核心: 将父类的实例作为子类的原型

缺点: 父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了

  1. function Person (name) {
  2. this.name = name;
  3. };
  4. Person.prototype.getName = function () { //对原型进行扩展
  5. return this.name;
  6. };
  7. function Parent (age) {
  8. this.age = age;
  9. };
  10. Parent.prototype = new Person('老明'); //这一句是关键 //通过构造器函数创建出一个新对象,把老对象的东西都拿过
  11. 来。
  12. Parent.prototype.getAge = function () {
  13. return this.age;
  14. };
  15. // Parent.prototype.getName = function () { //可以重写从父类继承来的方法,会优先调用自己的。
  16. // console.log(222);
  17. // };
  18. var result = new Parent(22);
  19. console.log(result.getName()); //老明  //调用了从Person原型中继承来的方法(继承到了当前对象的原型中)  
  20. console.log(result.getAge()); //22   //调用了从Parent原型中扩展来的方法

2、构造继承

  1. 基本思想
  2. 借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中。
  3. 因为this对象是在运行时基于函数的执行环境绑定的。也就是说,在全局中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。
  4. callapply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
  5. 所以,这个借用构造函数就是,new对象的时候(new创建的时候,this指向创建的这个实例),创建了一个新的实例对象,
  6. 并且执行Parent里面的代码,而Parent里面用call调用了Person,也就是说把this指向改成了指向新的实例,
  7. 所以就会把Person里面的this相关属性和方法赋值到新的实例上,而不是赋值到Person上面,
  8. 所以所有实例中就拥有了父类定义的这些this的属性和方法。
  9. 因为属性是绑定到this上面的,所以调用的时候才赋到相应的实例中,各个实例的值就不会互相影响了。

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

缺点: 方法都在构造函数中定义, 只能继承父类的实例属性和方法,不能继承原型属性/方法,无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

  1. function Person (name) {
  2. this.name = name;
  3. this.friends = ['小李','小红'];
  4. this.getName = function () {
  5. return this.name;
  6. }
  7. };
  8. // Person.prototype.geSex = function () { //对原型进行扩展的方法就无法复用了
  9. // console.log("男");
  10. // };
  11. function Parent = (age) {
  12. Person.call(this,'老明');  //这一句是核心关键
  13. //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码,
  14. // 结果parent的每个实例都会具有自己的friends属性的副本
  15. this.age = age;
  16. };
  17. var result = new Parent(23);
  18. console.log(result.name);    //老明
  19. console.log(result.friends);  //["小李", "小红"]
  20.      console.log(result.getName());  //老明
  21.      console.log(result.age);    //23
  22.      console.log(result.getSex());  //这个会报错,调用不到父原型上面扩展的方法

3、组合继承

组合继承(所有的实例都能拥有自己的属性,并且可以使用相同的方法,组合继承避免了原型链和借用构造函数的缺陷,结合了两个的优点,是最常用的继承方式)

核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后再通过将父类实例作为子类原型,实现函数复用

缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

  1. function Person (name) {
  2. this.name = name;
  3. this.friends = ['小李','小红'];
  4. };
  5. Person.prototype.getName = function () {
  6. return this.name;
  7. };
  8. function Parent (age) {
  9. Person.call(this,'老明');  //这一步很关键
  10. this.age = age;
  11. };
  12. Parent.prototype = new Person('老明');  //这一步也很关键
  13. var result = new Parent(24);
  14. console.log(result.name);    //老明
  15. result.friends.push("小智");  //
  16. console.log(result.friends);  //['小李','小红','小智']
  17. console.log(result.getName());  //老明
  18. console.log(result.age);    //24
  19. var result1 = new Parent(25); //通过借用构造函数都有自己的属性,通过原型享用公共的方法
  20. console.log(result1.name);  //老明
  21. console.log(result1.friends);  //['小李','小红']

4、寄生组合继承

核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

缺点:堪称完美,但实现较为复杂

  1. function Person(name) {
  2. this.name = name;
  3. this.friends = ['小李','小红'];
  4. }
  5. Person.prototype.getName = function () {
  6. return this.name;
  7. };
  8. function Parent(age) {
  9. Person.call(this,"老明");
  10. this.age = age;
  11. }
  12. (function () {
  13. var Super = function () {}; // 创建一个没有实例方法的类
  14. Super.prototype = Person.prototype;
  15. Parent.prototype = new Super(); //将实例作为子类的原型
  16. })();
  17. var result = new Parent(23);
  18. console.log(result.name);
  19. console.log(result.friends);
  20. console.log(result.getName());
  21. console.log(result.age);

发表评论

表情:
评论列表 (有 0 条评论,175人围观)

还没有评论,来说两句吧...

相关阅读