JS 的构造函数、原型和原型链

构造函数

构造函数简介

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

在 JS 中，使用构造函数时要注意以下两点：

• 构造函数用于创建某一类对象，其首字母要大写
• 构造函数要和 new 一起使用才有意义

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

1. 在内存中创建一个新的空对象。
2. 让 this 指向这个新的对象。
3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
4. 返回这个新对象（所以构造函数里面不需要 return ）。

静态成员和实例成员

   // 构造函数中的属性和方法我们称为成员, 成员可以添加
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
        this.sing = function() {
            console.log('我会唱歌');

        }
    }
    var ldh = new Star('刘德华', 18);
    // 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    // 实例成员只能通过实例化的对象来访问
    console.log(ldh.uname);
    ldh.sing();
    // console.log(Star.uname); // 不可以通过构造函数来访问实例成员
    // 2. 静态成员 在构造函数本身上添加的成员  sex 就是静态成员
    Star.sex = '男';
    // 静态成员只能通过构造函数来访问
    console.log(Star.sex);
    console.log(ldh.sex); // 不能通过对象来访问

构造函数和类的区别

区别：类中的成员方法是定义在类中的，使用类创建对象后，这些对象的方法都是引用了同一个方法，这样可以节省内存空间。

class Person {
  sing() {console.log('hello');}
}
var p1 = new Person();
var p2 = new Person();
console.log(p1.sing === p2.sing);	// 输出结果：true

构造函数的问题

构造函数方法很好用，但是存在浪费内存的问题。

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function() {
        console.log('我会唱歌');}
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);

此时我们想要通过访问ldh对象和zxy对象获得sing的方法，但是通过控制台console.log(ldh.sing === zxy.sing);发现两个函数地址并不一样，说明他们创建了两块空间分别存放两个实例的方法，造成了内存的浪费。

所以为了解决这个问题，引出了原型对象。

原型

构造函数原型 prototype

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

   function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);
    ldh.sing();//控制台打印出'我会唱歌'
    zxy.sing();//控制台打印出'我会唱歌'

我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

深入浅出理解：

1. 原型是什么 ？
   一个对象，我们也称为 prototype 为原型对象。
2. 原型的作用是什么 ？
   共享方法。

但我们创建的实例对象为什么会能找到构造函数，这就要借助对象原型 __proto__了。

__proto__对象原型

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 _proto
_ 原型的存在
。

 console.log(ldh); //对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype

控制台打印出的[[prototype]]就是__proto__原型

__proto__对象原型和原型对象 prototype 是等价的
我们可以通过 console.log(ldh.__proto__ === Star.prototype);//返回true发现两者是相等的。
方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
如果没有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

constructor 构造函数

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

function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
         Star.prototype.sing = function() {
             console.log('我会唱歌');
         };
         Star.prototype.movie = function() {
             console.log('我会演电影');
         }
        Star.prototype = {
            // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
            constructor: Star,
            sing: function() {
                console.log('我会唱歌');
            },
            movie: function() {
                console.log('我会演电影');
            }
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(Star.prototype);
        console.log(ldh.__proto__);
        console.log(Star.prototype.constructor);
        console.log(ldh.__proto__.constructor);

一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

构造函数、实例、原型对象三者之间的关系

在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A )。
用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。
​ 但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：p1.__proto__
​ 但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

原型对象的原型对象

原型对象也是对象，那么这个对象应该也会有一个原型对象存在。

function Person() {}
// 查看原型对象的原型对象
console.log(Person.prototype.__proto__);
// 查看原型对象的原型对象的构造函数
console.log(Person.prototype.__proto__.constructor);

案例：Person.prototype.__proto__这个对象其实就是Object.prototype对象。

function Person() {}
console.log(Person.prototype.__proto__ === Object.prototype); // true
var obj = {};
console.log(obj.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // 输出结果：null

原型链

原型链结构特点：

• 每个构造函数都有一个prototype属性指向原型对象。
• 原型对象通过constructor属性指向构造函数。
• 通过实例对象的__proto__属性可以访问原型对象。
• Object的原型对象的__proto__属性为null。

详解原型链构成

以上图为例，我们在前面说过，只要是对象，那么就有__proto__属性指向它的构造函数的原型对象prototype。
而它的原型对象prototype本质上也只是一个普通对象，它也有__proto__属性指向它的构造函数的原型对象prototype。也就是Object原型对象prototype。而Object原型对象prototype既然是原型对象，则有对应的属性Object.prototype.constructor指向Object构造函数，也有__proto__属性。但它的__proto__属性指向NULL，说明JS中继承机制是原型继承，继承的起点是对象的原型Object.prototype。

函数在原型链中的结构：

成员查找机制

JavaScript首先会判断实例对象有没有这个成员
如果没有找到，就继续查找原型对象的原型对象
如果直到最后都没有找到，则返回undefined。

function Person() { this.name = '张三';}
Person.prototype.name = '李四';
var p = new Person();
console.log(p.name); // 输出结果：张三
delete p.name; // 删除对象p的name属性
console.log(p.name); // 输出结果：李四
delete Person.prototype.name; // 删除原型对象的name属性
console.log(p.name); // 输出结果：undefined

【案例】利用原型对象扩展数组方法

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];
console.log(arr.sum()); // 输出结果：6