JavaScript系列之高级篇

Posted 2021-08-05 coderkey

六，构造函数和原型

1，概述

（1）含义：

在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，但是 ES6 之前，JS 中并没有引入类的概念。
ES6,全称ECMAScript 6.0 , 2015.06发版。但是目前浏览器的javascript是ES5版本,大多数高版本的浏览器也支持ES6,不过只实现了ES6的部分特性和功能。
在ES6之前,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征
创建对象可以通过以下三种方式:
① 对象字面量
② new Object
③ 自定义构造函数

2，构造函数

（1）含义：

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

（2）注意：

在JS中，使用构造函数时要注意以下两点:
① 构造函数用于创建某一类对象，其首字母要大写。
② 构造函数要和 new 一起使用才有意义。

（3）new 在执行时会做四件事情：

① 在内存中创建一个新的空对象。
② 让 this 指向这个新的对象。
③ 执行构造函数皿面的代码，给这个新刘象添加属性和方法。
④ 返回这个新对象(所以构造函数里面不需要return )。

3，实例成员和静态成员

（1）含义：

JavaScript的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。

静态成员：在构造函数本身上添加的成员称为静态成员，只能由构造函数本身来访问。
实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问。

（2）例如：

  <script>
       function Star(name, age) {
            // 实例成员是指通过this添加的成员
            this.name = name;
            this.age = age;
            this.sing = function( ) {
                console.log(this.name + 'sing a song');
            }
        }
        var adele = new Star('阿黛尔', 20);
        console.log(adele.name); // 阿黛尔   实例成员只能通过实例对象访问
        console.log(Star.name);  // Star
        // 静态成员是指在构造函数本身添加的成员
        Star.sex = '女';
        console.dir(Star); // 返回 Star 的对象
        console.log(Star.sex); // 女    静态成员只能通过构造函数访问
        console.log(adele.sex); // undefined
    </script>

4，构造函数原型对象 prototype

（1）含义：

构造函数通过原型分配的函数是所有对象所共享的。
Javascript 规定，每一个构造函数都有个prototype属性，指向另一个对象。注意这prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。

（2）例如：

 <script>
        function Star(name, age) {
            this.name = name;
            this.age = age;
            // 1.若函数定义在构造函数内部，则每一个创建出来的对象都会为其单独开辟一个内存地
           址空间。这样会存在浪费地址空间的问题。
            // this.sing = function( ) {
            //     console.log(this.name + 'sing a song');
            // }
        }
        // 2.每一个构造函数都有一个原型对象，在原型对象上定义方法可以实现所有对象共享该方
       法，即共享同一块地址空间。
        Star.prototype.sing = function( ) {
            console.log(this.name + 'sing a song');
        }
        var ldh = new Star('刘德华');
        var zxy = new Star('张学友');
        ldh.sing( );     // 刘德华sing a song
        zxy.sing( );     // 张学友sing a song
        console.log(ldh.sing === zxy.sing);    // true
        // console.dir(Star);
    </script>

（3）注意：

一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象身上。

5，对象原型 proto

（1）含义：

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构函数 prototype 原型对象的属性和方法，就是因为对象有__proto__原型的存在。
__proto__ 对象原型和原型对象prototype 等价的。
__proto__ 对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

（2）例如：

 <script>
      function Star(name) {
          this.name = name;
      }
      Star.prototype.sing = function( ) {
          console.log(this.name + 'sing a song');
      }
      var adele = new Star("阿黛尔")
      var wf = new Star('王菲')
      console.log(adele);    // Star {name: "阿黛尔"}
      adele.sing( );      // 阿黛尔sing a song
      console.log(adele.__proto__ === Star.prototype);    // true
      console.log(adele.__proto__ === wf.__proto__);    // true
      // 系统会为每一个对象添加一个__proto__属性， 该属性指向的是构造函数的原型对象
      // 调用方法时的查找规则：
      // 1,首先先看adele 对象身上是否有sing方法，如果有就执行这个对象上的sing
      // 2,如果没有sing 这个方法，因为有__proto__属性的存在，就去构造函数的原型对象
      prototype身上查找。
      // 对象原型与原型对象：
      // 1,原型对象是指 构造函数的原型对象Star.prototype
      // 2,对象原型是指 创建出来的每一个对象身上，都有一个__proto__属性，该属性被称为对象
      原型
    </script>

6 ，constructor 构造函数

（1）含义：

对象原型(__proto__ )和构造函数( prototype )原型对象里面都有一个属性constructor属性，constructor我们称为构造函数，因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。

（2）例如：

  <script>
        function Star(name) {
            this.name = name
        }
        // Star.prototype.sing = function( ) {
        //         console.log(this.name + 'sing a song');
        // }
        // 2.若为构造函数的原型对象赋值为一个新的对象，则会覆盖掉原来的constructor属性
        // 3.为了能查看到原型对象所依赖的构造函数，必须手动为原型对象添加constructor属性
        Star.prototype = {
            constructor: Star,
            sing: function( ) {
                console.log(this.name + 'sing a song');
            }
        }
        var adele = new Star('阿黛尔');
        console.log(Star.prototype);
        // 1.默认情况下构造函数的原型对象上都有一个constructor属性，该属性指回了原构造函数
        console.log(adele.__proto__.constructor);
    </script>

（3）构造函数、原型对象、实例之间的三角关系：

① 构造函数通过 prototype 属性指向原型对象。
② 原型对象上的 constructor 属性又指回了构造函数。
③ 实例对象通过 __proto__ 属性指向了原型对象，还可以通过__prototype.constructor指向构造函数。

7，原型链

（1）含义：

① 实例对象的__proto__指向了构造函数的原型对象。
② 构造函数的原型对象的__proto__指向了 Object 的原型对象。
③ Object 的原型对象的 __proto__ 指向为 null。

（2）例如：

 <script>
      function Star(name) {
          this.name = name
      }
      Star.prototype = {
          constructor: Star,
          sing: function() {
              console.log(this.name + 'sing a song');
          }
      }
      var adele = new Star('阿黛尔')
      console.log(Star.prototype);
      // 构造函数的原型对象的__proto__指向了Object的原型对象
      console.log(Star.prototype.__proto__ === Object.prototype); //true
      console.log(Object.prototype);
      // Object的原型对象的__proto__指向为null
      console.log(Object.prototype.__proto__); //null
      // 每一个对象都有一个__proto__属性。
      </script>

（3）原型链关系图：

---

---

8，JavaScript 的成员查找机制（规则）

（1）规则：

成员查找规则：① 依据原型链逐层向上查找 ② 就近原则
第一层：实例对象；
第二层：构造函数的原型对象；
第三层：Object的原型对象。

（2）例如：

  <script>
      function Star(name) {
          this.name = name
      }
       Object.prototype.age = 50
       Star.prototype.age = 40
       var adele = new Star('阿黛尔')
       adele.age = 30
      console.log(adele.age);    // 30
      console.log(adele.toString());
    </script>

9，原型对象中 this 指向问题

（1）例如：

 <script>
      function Star(name) {
          // 1.构造函数中的this指向的是实例对象 ldh
          this.name = name
      }
      var that;
      Star.prototype.sing = function() {
          that = this
          console.log('sing a song');
      }
      var ldh = new Star('刘德华');
          // 2.只有调用了sing函数，才能确定原型对象中的this指向的是谁。若调用了，指向的才是 
      实例对象。（原型对象里面的 this 指向的是实例对象 ldh）
      ldh.sing();    // sing a song
      console.log(ldh == that);    // true
  </script>

10，扩展内置对象

（1）含义：

可以通过原型对象，对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。

（2）注意：

数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = { }，只能是 Array.prototype.xxx = function( ) { }的方式。

（3）例如：

 <script>
        // 在内置对象构造函数的原型对象上扩展自己想要的方法
        Array.prototype.sum = function() {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i]
            }
            return sum;
        }
        var arr = [1, 2, 3, 4, 5]
        var arr2 = new Array(1, 2, 3, 4, 5)
        console.log(arr.sum());   // 15
        console.log(arr2.sum());   // 15
        console.log(Array.prototype);
    </script>

---