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');
构造函数里面做了哪些事情呢
- 当以 new 关键字调用时，会创建一个新的内存空间地址，标记为 Person的实例。
- 函数体内部的 this 指向该内存
- 执行函数体内的代码，给 this 添加属性，就相当于给实例添加属性。
- 隐式返回 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 创建对象的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。
- 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的原型
-
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
- 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 中读取，正好原型中有该属性
- 实例与原型
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 ，普通人对象继承大人类，大人类继承人类，人类继承对象类
