• JavaScript继承的几种方式

    因为es5的继承方式大量使用了new, 所以先谈一下new关键字

    new:

    1. 创建一个新对象。
    2. 这个新对象会被执行"原型"连接。
    3. 将构造函数的作用域赋值给新对象，即this指向这个新对象.
    4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
    1. function new(func) {
    2.     lat target = {};
    3.     target.__proto__ = func.prototype;
    4.     let res = func.call(target);
    5.     if (typeof(res) == "object" || typeof(res) == "function") {
    6.         return res;
    7.     }
    8.     return target;
    9. }

    字面量创建对象，不会调用 Object构造函数, 简洁且性能更好;

    new Object() 方式创建对象本质上是方法调用，涉及到在proto链中遍历该方法，当找到该方法后，又会生产方法调用必须的 堆栈信息，方法调用结束后，还要释放该堆栈，性能不如字面量的方式。

    通过对象字面量定义对象时，不会调用Object构造函数。

    父类

    1. // 定义一个动物类
    2. function Animal (name) {
    3.   // 属性
    4.   this.name = name || 'animal';
    5.   // 实例方法
    6.   this.sleep = function(){
    7.     console.log(this.name + '正在睡觉！');
    8.   }
    9. }
    10. // 原型方法
    11. Animal.prototype.eat = function(food) {
    12.   console.log(this.name + '正在吃：' + food);
    13. };

    一. 原型链继承

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

    1) 子类.prototype = new 父类();

    2) 子类.prototype.属性 = xxx

    3) 子类.prototype.方法 = xxx

    4) new 子类()获取实例, 该实例可以调用父类的属性和方法

    1. function Cat(){ 
    2. }
    3. Cat.prototype = new Animal();
    4. Cat.prototype.name = 'cat';
    5.  
    6. Cat.prototype.eat = function (sth) {
    7.     console.log(this.name, ' is eating', sth)
    8. }
    9. Cat.prototype.walk = function () {
    10.     console.log(this.name, ' is walking')
    11. }
    12. Cat.prototype.sleep = function () {
    13.     console.log(this.name, ' is sleeping')
    14. }
    15.  
    16.  
    17. //var cat = new Cat();
    18. //console.log(cat.name);
    19. //console.log(cat.eat('fish'));
    20. //console.log(cat.sleep());
    21. //console.log(cat instanceof Animal); //true 
    22. //console.log(cat instanceof Cat); //true
    23.  
    24. var cat = new Cat();
    25. console.log(cat.name); // cat
    26. console.log(cat.sleep()); // cat正在睡觉
    27. console.log(cat.eat('三明治')); // cat is eating 三明治
    28. console.log(cat.walk());// cat is walking

    特点:

    1. 纯粹的继承关系, 实例是子类的实例, 也是父类的实例

    2. 父类的原型方法或者原型属性, 子类都能访问到

    缺点:

    1. 要想为子类新增属性和方法, 必须在new animal这样的语句之后才行, 不能放到构造器之中

    2. 无法实现多继承

    3. 来自原型对象的所有属性被所有实例共享

    4. 创建子类实例函数时, 无法向父类构造函数传参

    二. 构造继承

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

    1) 在子类构造函数中使用call将父类的this指向自己

    2) 在子类构造函数中新增属性

    2) new 子类获取实例, 该实例能够使用父类的属性和方法

    特点:

    1. 解决了[一.原型链继承]中实例共享父类引用属性的问题

    2. 创建子类实例时, 可以向父类传递参数

    3. 可以实现多继承, call多个父类对象

    缺点:

    1. 实例只是子类的实例, 不是父类的实例

    2. 只能继承父类的实例属性和方法, 不能继承原型属性和方法

    3. 无法实现函数复用, 每个子类都有父类实例函数的副本, 影响性能

    1. function Cat(name){
    2.   Animal.call(this);
    3.   this.name = name || 'Tom';
    4. }
    5. Cat.prototype.eat = function (sth) {
    6.     console.log(this.name, ' is eating', sth)
    7. }
    8. Cat.prototype.walk = function () {
    9.     console.log(this.name, ' is walking')
    10. }
    11. Cat.prototype.sleep = function () {
    12.     console.log(this.name, ' is sleeping')
    13. }
    14.  
    15.  
    16. //var cat = new Cat();
    17. //console.log(cat.name);
    18. //console.log(cat.sleep());
    19. //console.log(cat instanceof Animal); // false
    20. //console.log(cat instanceof Cat); // true
    21.  
    22. var cat = new Cat('Tom');
    23. console.log(cat.name); // Tom
    24. console.log(cat.sleep()); // Tom正在睡觉
    25. console.log(cat.eat('三明治')); // Tom is eating 三明治
    26. console.log(cat.walk());// Tom is walking

    三.  实例继承

    核心: 为父类实例添加新特性, 作为子类实例返回

    1. function Cat(name){
    2.   var instance = new Animal();
    3.   instance.name = name || 'Tom';
    4.   return instance;
    5. }
    6. Cat.prototype.eat = function (sth) {
    7.     console.log(this.name, ' is eating', sth)
    8. }
    9. Cat.prototype.walk = function () {
    10.     console.log(this.name, ' is walking')
    11. }
    12. Cat.prototype.sleep = function () {
    13.     console.log(this.name, ' is sleeping')
    14. }
    15.  
    16. //var cat = new Cat();
    17. //console.log(cat.name);
    18. //console.log(cat.sleep());
    19. //console.log(cat instanceof Animal); // true
    20. //console.log(cat instanceof Cat); // false
    21.  
    22.  
    23. var cat = new Cat('Tom');
    24. console.log(cat.name); // Tom
    25. console.log(cat.sleep()); // Tom正在睡觉
    26. console.log(cat.eat('三明治')); // Tom is eating 三明治
    27. console.log(cat.walk());// Uncaught TypeError: cat.walk is not a function
    28. // 子类独有的原型方法访问不到!!!

    特点:

    1. 不限制调用方式, 无论是new 子类还是子类(), 返回的对象具有相同的效果

    缺点:

    1. 实例是父类的实例, 不是子类的实例!!!

    2. 不支持多继承

    四. 拷贝继承

    核心: 

    1) 子类通过new 父类获取实例

    2) for in遍历拷贝该实例赋值到子类.prototype上

    3) new 子类获取子类的实例,  可以通过该实例调用父类的属性和方法

    特点:

    1. 支持多继承

    缺点:

    1. 效率较低, 内存较高, 因为要拷贝父类的属性

    2. 无法获取父类不可枚举的方法(不可枚举方法, 不能使用for in访问)

    1. function Cat(name){
    2.   var animal = new Animal();
    3.   for(var p in animal){
    4.     Cat.prototype[p] = animal[p];
    5.   }
    6.   Cat.prototype.name = name || 'Tom';
    7. }
    8. Cat.prototype.eat = function (sth) {
    9.     console.log(this.name, ' is eating', sth)
    10. }
    11. Cat.prototype.walk = function () {
    12.     console.log(this.name, ' is walking')
    13. }
    14. Cat.prototype.sleep = function () {
    15.     console.log(this.name, ' is sleeping')
    16. }
    17.  
    18.  
    19. //var cat = new Cat();
    20. //console.log(cat.name);
    21. //console.log(cat.sleep());
    22. //console.log(cat instanceof Animal); // false
    23. //console.log(cat instanceof Cat); // true
    24.  
    25. var cat = new Cat('Tom');
    26. console.log(cat.__proto__ === Cat.prototype) // true
    27. console.log(Cat.__proto__ === Animal) // false
    28. console.log(Cat.__proto__ === Function.prototype) // true
    29. console.log(Cat.prototype.__proto__ === Animal.prototype) // false
    30. console.log(Animal.prototype.__proto__ === Object.prototype) // true
    31. console.log(Cat.prototype.constructor === Cat) // true
    32. console.log(cat.name); // Tom
    33. console.log(cat.sleep()); // Tom正在睡觉
    34. console.log(cat.eat('三明治')); // Tom is eating 三明治
    35. console.log(cat.walk());// Tom is walking

    五. 组合继承

    核心:

    1) 子类构造函数中通过call改变父类this指向自己

    2) 子类构造函数中新增属性

    3) 子类.prototype = new 父类()

    4) 子类.prototype.constructor = 子类(修复构造器)

    5) 使用new 子类()获取子类的实例, 使用该实例可以获取父类的属性和方法

    特点:

    1. 弥补了方式2的缺陷, 可以继承实例/属性方法, 也可以继承原型属性/方法

    2. 既是子类的实例, 又是父类的实例,

    3. 不存在引用属性共享问题

    4. 可传参

    5. 函数可复用

    缺点:

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

    1. function Cat(name){
    2.   Animal.call(this);
    3.   this.name = name || 'Tom';
    4. }
    5.  
    6. Cat.prototype = new Animal();
    7. Cat.prototype.eat = function (sth) {
    8.     console.log(this.name, ' is eating', sth)
    9. }
    10. Cat.prototype.walk = function () {
    11.     console.log(this.name, ' is walking')
    12. }
    13. Cat.prototype.sleep = function () {
    14.     console.log(this.name, ' is sleeping')
    15. }
    16. Cat.prototype.constructor = Cat;
    17.  
    18. //var cat = new Cat();
    19. //console.log(cat.name);
    20. //console.log(cat.sleep());
    21. //console.log(cat instanceof Animal); // true
    22. //console.log(cat instanceof Cat); // true
    23.  
    24.  
    25. var cat = new Cat('Tom');
    26. console.log(cat.__proto__ === Cat.prototype) // true
    27. console.log(Cat.__proto__ === Animal) // false
    28. console.log(Cat.__proto__ === Function.prototype) // true
    29. console.log(Cat.prototype.__proto__ === Animal.prototype) // true
    30. console.log(Animal.prototype.__proto__ === Object.prototype) // true
    31. console.log(Cat.prototype.constructor === Cat) // true
    32. console.log(cat.name); // Tom
    33. console.log(cat.sleep()); // Tom正在睡觉
    34. console.log(cat.eat('三明治')); // Tom is eating 三明治
    35. console.log(cat.walk());// Tom is walking

    六. 寄生组合继承(推荐)

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

    特点: 推荐, 较为完美

    缺点: 实现较为复杂

    寄生组合继承1

    1. function Cat(name){
    2.   Animal.call(this);
    3.   this.name = name || 'Tom';
    4. }
    5. (function(){
    6.   // 创建一个没有实例方法的类
    7.   var Super = function(){};
    8.   Super.prototype = Animal.prototype;
    9.   //将实例作为子类的原型
    10.   Cat.prototype = new Super();
    11. })();
    12. Cat.prototype.eat = function (sth) {
    13.     console.log(this.name, ' is eating', sth)
    14. }
    15. Cat.prototype.walk = function () {
    16.     console.log(this.name, ' is walking')
    17. }
    18. Cat.prototype.sleep = function () {
    19.     console.log(this.name, ' is sleeping')
    20. }
    21. Cat.prototype.constructor = Cat; // 需要修复下构造函数
    22.  
    23. //var cat = new Cat();
    24. //console.log(cat.name);
    25. //console.log(cat.sleep());
    26. //console.log(cat instanceof Animal); // true
    27. //console.log(cat instanceof Cat); //true
    28.  
    29.  
    30. var cat = new Cat('Tom');
    31. console.log(cat.__proto__ === Cat.prototype) // true
    32. console.log(Cat.__proto__ === Animal) // false
    33. console.log(Cat.__proto__ === Function.prototype) // true
    34. console.log(Cat.prototype.__proto__ === Animal.prototype) // true
    35. console.log(Animal.prototype.__proto__ === Object.prototype) // true
    36. console.log(Cat.prototype.constructor === Cat) // true
    37. console.log(cat.name); // Tom
    38. console.log(cat.sleep()); // Tom正在睡觉
    39. console.log(cat.eat('三明治')); // Tom is eating 三明治
    40. console.log(cat.walk());// Tom is walking

    寄生组合继承2

    1. function Cat (name) {
    2.     // 初始化父类, 独立各自的属性
    3.     Animal.call(this, name)
    4.     this.name = name||''
    5. }
    6. // 设置原型
    7. Cat.prototype = Object.create(Animal.prototype);
    8. // 修复构造函数
    9. Cat.prototype.constructor = Cat
    10. Cat.prototype.eat = function (sth) {
    11.     console.log(this.name, ' is eating', sth)
    12. }
    13. Cat.prototype.walk = function () {
    14.     console.log(this.name, ' is walking')
    15. }
    16. Cat.prototype.sleep = function () {
    17.     console.log(this.name, ' is sleeping')
    18. }
    19. var cat = new Cat('Tom');
    20. console.log(cat.__proto__ === Cat.prototype) // true
    21. console.log(Cat.__proto__ === Animal) // false
    22. console.log(Cat.__proto__ === Function.prototype) // true
    23. console.log(Cat.prototype.__proto__ === Animal.prototype) // true
    24. console.log(Animal.prototype.__proto__ === Object.prototype) // true
    25. console.log(Cat.prototype.constructor === Cat) // true
    26. console.log(cat.name); // Tom
    27. console.log(cat.sleep()); // Tom正在睡觉
    28. console.log(cat.eat('三明治')); // Tom is eating 三明治
    29. console.log(cat.walk());// Tom is walking

    七. class继承(推荐)

    1. class Cat extends Animal {
    2. constructor(name) {
    3.     super(name)
    4.     this.name = name||''
    5. }
    6. }
    7. Cat.prototype.eat = function (sth) {
    8.     console.log(this.name, ' is eating', sth)
    9. }
    10. Cat.prototype.walk = function () {
    11.     console.log(this.name, ' is walking')
    12. }
    13. Cat.prototype.sleep = function () {
    14.     console.log(this.name, ' is sleeping')
    15. }
    16. var cat = new Cat('Tom');
    17. console.log(cat.__proto__ === Cat.prototype) // true
    18. console.log(Cat.__proto__ === Animal) // true
    19. console.log(Cat.prototype.__proto__ === Animal.prototype) // true
    20. console.log(Animal.prototype.__proto__ === Object.prototype) // true
    21. console.log(Cat.prototype.constructor === Cat) // true
    22. console.log(cat.name); // Tom
    23. console.log(cat.sleep()); // Tom正在睡觉
    24. console.log(cat.eat('三明治')); // Tom is eating 三明治
    25. console.log(cat.walk());// Tom is walking

    在类继承中, 有下面几个规律:

    子类new出来的实例对象 instanceof 父类为true

    子类new出来的实例对象 instanceof 子类自身为true

    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); // true

    子类的实例.__proto__等于子类的prototype


    console.log(cat.__proto__ === Cat.prototype) // true

    子类的__proto__等于父类

    注意:  分情况!!!

    1) 当Animal为class时:
    console.log(Cat.__proto__ === Animal) // true

    2) Animal为构造函数时(查看[六. 寄生组合继承]):

    console.log(Cat.__proto__ === Animal) // false

    console.log(Cat.__proto__ === Function.prototype) // true

    子类.prototype.__proto__ = 父类.prototype


    console.log(Cat.prototype.__proto__ === Animal.prototype) // true

    最大的父类.prototype.__proto__ 等于Object.prototype


    console.log(Animal.prototype.__proto__ === Object.prototype) // true

    父类.prototype.constructor = 父类自身


    console.log(Cat.prototype.constructor === Cat) // true

    如果看普通函数Foo和内置函数对象继承关系图会更加清晰明了

  • 相关阅读:
    mybatis详解(全)
    做什么数据表格啊，要做就做数据可视化
    Netty中的其他参数
    Android里面copy资源文件到目标目录中
    新型飞蛾火焰优化算法-附代码
    Android设置TabLayout熟悉及下划线宽度
    Springboot集成ElasticSearch实现简单的crud、简单分页、模糊查询
    什么是数据处理
    用DIV+CSS技术设计的美食主题网站（web前端网页制作课作业）美食餐饮网站设计与实现(HTML+CSS+JavaScript)
    【matplotlib 实战】--面积图
  • 原文地址：https://blog.csdn.net/qq_42750608/article/details/134293865