构造函数和原型链

 
    // 构造函数的目的：创建对象
    // 学生类→ 构造函数
    function Student(name,age,gender) {
      // 属性
      this.name = name;
      this.age = age;
      this.gender = gender;
      // 方法
      this.writeCode = function() {
        console.log('我会写代码')
      };
      this.sayHi = function(){
        // 方法内部中this，代表的是调用方法的对象
        console.log('我叫' + this.name + '，今年' + this.age);
      };
    }
    
    // 创建对象
    var zs = new Student('张三',10,'男');

​

new关键字的执行过程：

​ // 1. new关键字，创建一个空的简单JavaScript对象（即{}，一片空间）；

​ // 2. 进入构造函数内部，this关键字会指向内存中创建的那个对象（new关键字创建的）

​ // 3. 通过this向内存中的对象中添加属性和方法

​ // 4. 最终把this返回给外部接收的变量zs，即返回this

• 总结：构造函数在执行时，内部的this指向当前创建的对象

构造函数和普通函数

• 相同点
  • 都是函数
• 不同点
  • 构造函数通过new关键字调用
  • 普通函数直接调用

什么是原型

• 原型就是一个对象，原型一直都在。

  • 获取原型：

  • 语法：构造函数名.prototype

  • 代码：

        // 学生类→ 构造函数
        function Student(name,age,gender) {
          // 属性
          this.name = name;
          this.age = age;
          this.gender = gender;
        }
        
        // 获取原型：
        var yx = Student.prototype;
    

    ​

构造函数和原型的关系

• 理论

  • 构造函数可以通过 prototype 获取到原型
  • 原型可以通过 constructor 找到构造函数

• 代码

      // 获取原型：
      var yx = Student.prototype;
      // 原型内部自带一个constructor,代表的是构造函数
      // 构造函数和原型的关系：
      // 构造函数可以通过  prototype  获取到原型
      // 原型可以通过 constructor  找到构造函数
      console.log(yx.constructor  === Student);  // true;
  

  ​

原型的作用

作用：把不变的方法存入到构造函数的原型中，构造函数创建的所有实例可以==共享==原型中的成员。

    // 构造函数的目的：创建对象
    // 学生类→ 构造函数
    function Student(name, age, gender) {
      // 属性
      this.name = name;
      this.age = age;
      this.gender = gender;
    }

    // 获取原型
    var yx = Student.prototype;
    // 把方法存入到原型中
    // 对象.key = value;
    yx.writeCode = function () {
      console.log('我会写代码')
    };
    yx.sayHi = function () {
      // 方法内部中this，代表的是调用方法的对象
      console.log('我叫' + this.name + '，今年' + this.age);
    };

    // 创建对象
    var zs = new Student('张三', 10, '男');
    var ls = new Student('李四', 12, '男');
    var ww = new Student('王五', 18, '女');

​

实例对象和原型的关系

• （对象如何访问到原型中的成员）

  • // ① 先从对象本身中查找，若查找不到
  • // ② 则通过对象自带 __proto__提供的原型地址，找到原型
  • // ③ 从原型中去查找

    // 构造函数的目的：创建对象
    // 学生类→ 构造函数
    function Student(name, age, gender) {
      // 属性
      this.name = name;
      this.age = age;
      this.gender = gender;
   
    }

    // 获取原型
    var yx = Student.prototype;
    // 把不变的属性放入原型中
    yx.type='学生';

    // 创建对象
    var zs = new Student('张三', 10, '男');

    // 对象可以访问得到原型中成员
    console.log(zs.type); // 学生
    console.log(zs.__proto__ === yx)  // true

​

原型链

• 理论(对象访问属性和方法的过程)

  • ① 先从对象本身中查找，若查找不到
  • ② 则通过对象自带 __proto__提供的原型地址，找到原型
  • ③ 从原型中去查找，若查不到
  • ④ 则通过原型中自带的 __proto__提供的原型地址，找到原型的原型
  • ⑤ 从原型中原型中去中
  • 因为原型链的存在
  • 找到顶层Object为止

儿子不但能够继承父亲的遗产，还可以继承他父亲的父亲的父亲的......祖先的遗产。

    // 【Object 祖宗类】
    // 不论任何类型的对象，都直接或间接的继承了Object
    // Object 构造函数
    // 原型：Object.prototype
    var objYx = Object.prototype;
    objYx.a = 1;

    // 【学生类】
    function Student(name, age, gender) {
      // 属性
      this.name = name;
      this.age = age;
      this.gender = gender;

    }

    // 获取原型
    var yx = Student.prototype;
    // 把不变的属性放入原型中
    yx.type = '学生';
    
    // 创建对象
    var zs = new Student('张三', 10, '男');
    console.log(zs.a); // 1
    console.log(zs.__proto__.__proto__ === objYx); // true

​