• JavaScript构造函数和原型:继承

    ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。

    call()

    调用这个函数, 并且修改函数运行时的 this 指向  

    fun.call(thisArg, arg1, arg2, ...)

    thisArg ：当前调用函数 this 的指向对象

    arg1，arg2：传递的其他参数

     借用构造函数继承父类型属性

    核心原理： 通过 call() 把父类型的 this 指向子类型的 this ，这样就可以实现子类型继承父类型的属性。  

    1.     // 父类
    2.     function Person(name, age, sex) {
    3.       this.name = name;
    4.       this.age = age;
    5.       this.sex = sex;
    6.     }
    7.     // 子类
    8.     function Student(name, age, sex, score) {
    9.       Person.call(this, name, age, sex);  // 此时父类的 this 指向子类的 this，同时调用这个函数
    10.       this.score = score;
    11.     }
    12.     var s1 = new Student('zs', 18, '男', 100);
    13.     console.dir(s1);

     意思就是使用父构造函数的方法，并把this指向的是子构造函数 

     借用原型对象继承父类型方法

    一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法。 

     核心原理：

    ①将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类() 

    ②本质：子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象

    ③将子类的 constructor 从新指向子类的构造函数

      类的本质

    1. class本质还是function.

    2. 类的所有方法都定义在类的prototype属性上

    3. 类创建的实例,里面也有__proto__ 指向类的prototype原型对象

    4.所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <script>
    13.         // ES6 之前通过 构造函数+ 原型实现面向对象 编程
    14.         // (1) 构造函数有原型对象prototype 
    15.         // (2) 构造函数原型对象prototype 里面有constructor 指向构造函数本身
    16.         // (3) 构造函数可以通过原型对象添加方法
    17.         // (4) 构造函数创建的实例对象有__proto__ 原型指向 构造函数的原型对象
    18.         // ES6 通过 类 实现面向对象编程 
    19.         class Star {
    20.  
    21.         }
    22.         console.log(typeof Star);
    23.         // 1. 类的本质其实还是一个函数 我们也可以简单的认为 类就是 构造函数的另外一种写法
    24.         // (1) 类有原型对象prototype 
    25.         console.log(Star.prototype);
    26.         // (2) 类原型对象prototype 里面有constructor 指向类本身
    27.         console.log(Star.prototype.constructor);
    28.         // (3)类可以通过原型对象添加方法
    29.         Star.prototype.sing = function() {
    30.             console.log('冰雨');
    31.  
    32.         }
    33.         var ldh = new Star();
    34.         console.dir(ldh);
    35.         // (4) 类创建的实例对象有__proto__ 原型指向 类的原型对象
    36.         console.log(ldh.__proto__ === Star.prototype);
    37.         i = i + 1;
    38.         i++
    39.     </script>
    40. </body>
    41.  
    42. </html>

     5.所以ES6的类其实就是语法糖.

    6. 语法糖:语法糖就是一种便捷写法.   简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖

    i = i + 1;    i++就是i = i + 1;的语法唐，因为这样的写法更加简单

  • 相关阅读:
    Docker常用命令
    Mycat2【java提高】
    C语言中的typedef用法
    如何在《倩女幽魂》游戏中使用搭建工具
    洛谷刷题C语言：娘子、淘气的猴子、Ranker、暴龙的火锅、Cupcake Party
    Vue3执行流程思路分析-流程图
    【QT开发（14)】QT P2P chat 聊天
    Python3通过字符串访问与修改局部变量
    JavaWeb知识梳理(后端部分)
    最小栈（C++解法）
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/127952381