js构造函数、原型、原型链

参考文档：

laviniatu:https://blog.csdn.net/sinat_21742529/article/details/83659459

长安城下翩翩少年：https://www.cnblogs.com/honkerzh/p/10270624.html

d_ph：https://blog.csdn.net/qq_36996271/article/details/82527256

构造函数的定义

用new关键字来调用的函数，称为构造函数。专门用来生成实例对象的函数。

写法上构造函数本身和普通函数没有差别。主要是却别是使用上，构造函数使用时使用new 关键字生成实例对象。

构造函数命名上一般会首字母大写。

浏览器有很多内置构造函数:(JS中几乎所有的数据都可以基于构造函数创建)

引用类型：Object，Array，RegExp，Date；

包装类型：String，Number，Boolean;

let arr = [] ; //是arr = new Array();的语法糖；
let obj = {} ; //是obj = new Object()的语法糖；

使用构造函数的原因：

举例，我们要录入一个班级中50个同学的资料 。

普通写法：

let p1 = {name : "p1" , age : 6 , gender : "男" , hobby : "游泳"} ;
let p2 = {name : "p2" , age : 6 , gender : "女" , hobby : "跑步"} ;
let p3 = {name : "p3" , age : 6 , gender : "男" , hobby : "学习"} ;
...

我们可以像上面代码一样，把每个同学的信息当做一个对象来处理。但是这种写法会重复很多无意义的代码。如name,age,gender,hobby;我们需要写50遍。

构造函数写法：

function Person(name,gender,hobby,age){
    this.name = name ;
    this.gender = gender ;
    this.hobby = hobby ;
    this.age = age || 6 ;
}

let p1 = new Person("p1","男","游泳");
let p2 = new Person("p2","女","跑步");
let p3 = new Person("p3","男","学习",8);

如果数量少，可能体现不出来构造函数的好处。但比如这个例子，50个学生，使用构造函数相比普通对象就要方便很多。

构造函数的执行过程：（以Person为例）

1、当以new关键字调用时，会创建一个Object对象，在堆中开辟一个新的内存空间，标记为Person的实例。

2、函数体内部的this指向改内存。

3、执行函数体内的代码。

4、默认返回this。

构造函数的返回值

（1）：默认返回this;

this指向的是构造函数实例对象的地址。

（2）：手动添加基本数据类型返回值。

function Person(name,gender,hobby,age){
    this.name = name ;
    this.gender = gender ;
    this.hobby = hobby ;
    this.age = age || 6 ;
    return 100 ;
}

let p1 = new Person("p1","男","游泳");
let p2 = Person("p2","女","跑步");
console.log(p1)  //Person { name: 'p1', gender: '男', hobby: '游泳', age: 6 }
console.log(p2)  //100

函数返回基本类型的情况，如上面代码所示，

p2的调用是把Person当做普通函数调用，返回的是100 。

p1的调用是把Person作为构造函数，还是返回this。

（3）：手动添加引用数据类型返回值

function Person(name,gender,hobby,age){
    this.name = name ;
    this.gender = gender ;
    this.hobby = hobby ;
    this.age = age || 6 ;
    return [1,2,3,4];
}

let p1 = new Person("p1","男","游泳");
let p2 = Person("p2","女","跑步");
console.log(p1)  //[1,2,3,4]
console.log(p2)  //[1,2,3,4]

无论是作为普通函数还是构造函数，都将返回改引用数据类型。

this的指向问题：

（1）：作为普通函数，this指向window

（2）：作为构造函数，this指向改构造函数生成的实例对象（也可以说实例对象的地址）

（3）：以方法的形式调用，谁调用方法this就指向谁。

原型

基本概念：

1、所有的引用类型可以自由扩展属性（null除外） ；

2、所有的引用类型都有一个“__proto__"属性。也叫隐式原型，它是一个普通的对象。

3、所有的函数都有一个prototype属性（也叫显式原型，它也是个普通对象）。

4、所有引用类型，它的“__proto__”属性指向它的构造函数的prototype属性。

5、当试图得道一个对象的属性时，这个对象本身不存在这个属性，那么它就会去它的“__proto__”属性（也就是它的构造函数的prototype属性）去寻找。

举例：

function Person(name,gender,hobby,age){
    this.name = name ;
    this.gender = gender ;
    this.hobby = hobby ;
    this.age = age || 6 ;
}
Person.prototype = {
    introduce:function(){
        console.log(`大家好，我的名字叫${this.name},我的性别是${this.gender},我今年${this.age},我的爱好是${this.hobby}`)
    }
}

let p1 = new Person("p1","男","游泳");
let p2 = new Person("p2","女","跑步",10);
p1.introduce();  //大家好，我的名字叫p1,我的性别是男,我今年6,我的爱好是游泳
p2.introduce();  //大家好，我的名字叫p2,我的性别是女,我今年10,我的爱好是跑步

因为构造函数中没有定义introduce方法，所以创建p1和p2实例的时候，p1和p2并没有introduce方法。当试图得到一个对象的属性或方式时，如果这个对象本身不存在这个属性，那么就回去他的构造函数的prototype属性中去寻找。

当然我们也可以在创建构造函数时就添加introduce方法，如下：

function Person(name,gender,hobby,age){
    this.name = name ;
    this.gender = gender ;
    this.hobby = hobby ;
    this.age = age || 6 ;
    this.introduce = function(){
        console.log(`大家好，我的名字叫${this.name},我的性别是${this.gender},我今年${this.age},我的爱好是${this.hobby}`)
    }
}

let p1 = new Person("p1","男","游泳");
let p2 = new Person("p2","女","跑步",10);
p1.introduce();  //大家好，我的名字叫p1,我的性别是男,我今年6,我的爱好是游泳
p2.introduce();  //大家好，我的名字叫p2,我的性别是女,我今年10,我的爱好是跑步

以上代码跟上上的代码得到的效果是一样的，但是第二种方法在每次创建Person实例的时候，每个实例对象中都会有一个introduce方法，这样就会比较占资源。我们都知道函数是存在堆中，容易导致内存溢出。

如果通过第一种原型方法实现的话，只需要在构造函数里面给属性赋值，而把方法写在Person.prototype属性里面，这样每个对象都可以使用prototype属性里面的introduce方法，并且节省了不少的资源。

原型链：

当试图得到一个对象的属性时，如果这个对象本身不存在这个属性，那么就会去它的构造函数的prototype属性中去寻找。那么又因为prototype属性是一个对象，所以它也有一个“__proto__”属性。

举例：

function Person(name,gender,hobby,age){
    this.name = name ;
    this.gender = gender ;
    this.hobby = hobby ;
    this.age = age || 6 ;
}

Object.prototype.introduce = function(){
    console.log(`我的名字叫${this.name},我今年${this.age}岁了,我的性别是${this.gender},我的爱好是${this.hobby}`)
}

let p1 = new Person("p1","男","游泳");
p1.introduce();     //我的名字叫p1,我今年6岁了,我的性别是男,我的爱好是游泳

console.log(p1.introduce === Person.prototype.__proto__.introduce ) ; //true
//p1的introduce方法实际上是利用原型链机制一直往上寻找到Object上面的introduce方法。
console.log(p1.__proto__ === Person.prototype ) ; //true
//每个对象都有一个__proto__属性，指向的是其构造函数的prototype属性。p1的的构造函数是Person
console.log(Person.prototype.__proto__ === Object.prototype ) ; //true
// 每个构造函数都有一个prototype属性，它是一个普通对象，它的构造函数是Object，所以它也会有一个__proto__属性，指向的是Object的prototype属性，
console.log(Object.prototype.__proto__ === null ) ; // true
// Object作为构造函数，也有一个prototype属性，它的prototype属性作为一个普通对象也有一个__proto__属性，值为null；

图解：