js 构造函数|this|原型|原型链|继承

一. 什么是构造函数

首先温习下函数的定义：函数可以说是一段定义一次，可重复执行的代码块。
通过new 来实例化对象的函数叫构造函数，它的主要功能就是初始化对象，特点就是跟new搭配使用。
构造函数习惯上首字母一般大写，它与普通函数没有区别，调用方式有区别，普通函数直接调用，构造函数是创建了一个自定义的类，使用new来调用可以创建这个类的实例对象。

js es6中class的本质也是构造函数，下面对比下两种写法

类写法

class Person { // Person的类
    constructor(name, age) { //constructor是一个构造方法，用于接收参数
        this.name = name; //this代表实例对象
    }
    run() { // 这是一个类的方法
        return this.name + '跑起来'
    }
}
var P = new Person('小明');
console.log(P.run());   // 小明跑起来

构造函数写法

function Person(name) {

    if (!(this instanceof Person)) { //避免使用者不小心讲Person当作普通函数执行
        throw new Error("请使用 new Person "); //仿ES6 class 中的写法
    }
    this.name = name;
}

Person.prototype.run = function() {
    return this.name + '运动🏃‍♀️'
}
var P = new Person('小红'); //通过构造函数创建对象，必须使用new运算符

console.log(P.run());    // 小红运动🏃‍♀️

总结：通过class定义的类 和通过构造函数定义的类，二者本质相同。在js执行时，会将第一种转会为第二种执行。所以ES6 class的写法实质就是构造函数。

二. 构造函数的内部实现，this的指向

常见的构造函数

// 1.第一种
let ob = {} 为 let ob = new Object()
let list = [] 为 let list = new Array()
let ob = {} 是js的语法糖

// 2. 自定义
function Person(name) {
        this.name = name;
}
var p1 = new Person('name');

构造函数里面做了哪些事情呢

1. 当以 new 关键字调用时，会创建一个新的内存空间地址，标记为 Person的实例。
2. 函数体内部的 this 指向该内存
3. 执行函数体内的代码，给 this 添加属性，就相当于给实例添加属性。
4. 隐式返回 this，相当于默认返回了实例对象的内存地址，也就是上述例子中的p1

我们在这改一下

function Person(name) {
        this.name = name;
        return ['a', 'b', 'c'];
}
var p1 = new Person('name');
console.log(p1. name);  // undefined
console.log(p1.length);  // 3
console.log(p1[0]);   // 'a'

这里发现p1指向的不是Person实例对象了，是因为在构造函数中我们指定了返回对象，那么，this指向对象被丢失。

用代码呈现它的实际执行

function Person(name){
  // 创建this变量，指向空对象
  var this = {}; 
  // 属性和方法被加入到this引用的对象中
  this.name = name;
  // 返回this对象
  return this;
}

三. 原型

原型的概念： javascript 创建对象的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。

1. prototype
   JavaScript中，每个函数都天生自带一个prototype属性，这个属性指向函数的原型对象。

function Person(name) {
        this.name = name;
}
Person.prototype.age = 20
var p1 = new Person()
var p2 = new Person()
console.log(person1.age) //20
console.log(person2.age)  //20

函数的prototype指向了一个对象，这个对象是调用构造函数时创建的实例的原型，也是p1和p2的原型

2. proto
   这是每个对象(除null外)都会有的属性，叫做proto，这个属性会指向该对象的原型。

function Person(name) {
        this.name = name;
}
var p1 = new Person()
var p2 = new Person()
console.log(p1.__proto__ === Person.prototype); // true

这是一种非标准的方法访问原型方法

es5中
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

3. constructor
   每个原型都有一个constructor属性，指向该关联的构造函数。

function Person(name) {
        this.name = name;
}
// 1.
console.log(Person===Person.prototype.constructor)  //true
// 2.
var p = new Person();
console.log(p.constructor === Person); // true

获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性

4. 实例与原型

function Person(name) {
        this.name = name;
}
Person.prototype.name = '我是原型里面的'
var p1 = new Person()
p1.name = '呵呵哒'
console.log(p1.name) // 呵呵哒

function Person(name) {
       
}
Person.prototype.name = '我是原型里面的'
var p1 = new Person()
p1.name = '呵呵哒'
console.log(p1.name) // 我是原型里面的

结果：对比上面两个例子，第一个是实例对象中有name属性，直接返回
当我们删除了 Person的 name 属性时，读取 p1.name，从 p1 对象中找不到 name 属性就会从 p1 的原型也就是 person.proto ，也就是 Person.prototype中查找 name 属性。

四. 原型链

在JavaScript中一切对象，对象和对象之间不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。
跟iOS中的isa指针类似

例子：
function Person(name) {
        this.name = name;
}
function BigPerson(name) {
        this.name = name;
}
BigPerson. prototype = new Person()
let bp = new BigPerson()

举例说明: bp->BigPerson → Person → Object ，普通人对象继承大人类，大人类继承人类，人类继承对象类

五. 继承的写法

继承的写法