前端面试系列-JavaScrip原型链及new操作符的实现(附图解)

原型链

首先引入一个关系图：

一、构造函数、实例、原型对象的概念

1 . 构造函数

JS中所有函数都可以作为构造函数，前提是被new操作符操作；

function Parent(){
    this.name = 'parent';
}
//这是一个JS函数

var parent1 = new Parent()
//这里函数被new操作符操作了，所以我们称Parent为一个构造函数；

2 . 实例

parent1 接收了new Parent(),parent1可以称之为实例；

3 . 原型对象

构造函数有一个prototype属性， prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的 person1 的原型。

parent1.__proto__ === Parent.prototype//true

二、构造函数、实例、原型对象的关系

1. 通过new操作符作用于JS函数，那么就得到了一个实例；
2. 构造函数会初始化一个prototype，这个prototype会初始化一个原型对象，那么原型对象是怎么知道自己是被哪个函数初始化的呢？原来原型对象会有一个constructor属性，这个属性指向了构造函数；

function Parent(){
        this.name = 'parent';
    }
var parent1 = new Parent()
parent1.constructor === Parent// true，这是为什么
原因如下：
Parent.prototype本身还是实例parent1 的原型。
由于原型链机制，当在parent1 中查找属性constructor时，如果没有找到，则往原型上找。而Parent.prototype刚好有属性constructor。
parent1.constructor的值就是Parent.prototype.constructor的值，也就是Parent。
Parent.prototype.constructor === Parent//true

4. 那么关键来了实例对象是怎么和原型对象关联起来的呢？原来实例对象会有一个__proto__属性，这个属性指向了该实例对象的构造函数对应的原型对象；
5. 假如我们从一个对象中去找一个属性name，如果在当前对象中没有找到，那么会通过__proto__属性一直往上找，直到找到Object对象还没有找到name属性，才证明这个属性name是不存在，否则只要找到了，那么这个属性就是存在的，从这里可以看出JS对象和上级的关系就像一条链条一样，这个称之为原型链；

如图：

三、new操作符的工作原理

实现new
四步：

• 创建一个空对象
• 链接到原型
• 绑定this值
• 返回新对象

function newObj() {
//创建一个新对象
 let obj  = {};
 let Constructor = [].shift.call(arguments);
 //链接到原型（给obj这个新生对象的原型指向它的构造函数的原型）
 obj.__proto__ = Constructor .prototype;
 //绑定this
 let result = Constructor .apply(obj,arguments);
 //确保new出来的是一个对象
 return typeof result === "object" ? result : obj
 }

验证一下：

var parent1 = newObj(Parent); //等价于 var parent1 = new Parent()
parent1 instanceof Parent//true

为什么要判断 return typeof result === “object” ? result : obj
假如我们只是返回一个基本类型的值呢？看例子：

用new操作符的效果：实例会指向返回的那个对象{strength : 999}

function Parent(name, age) {
this.name = name;
    this.strength = 60;
    this.age = age;
    return {strength : 999};
}
var person = new Parent('Kevin', '18');
Parent.prototype.habit = "babit"
console.log(person.name) // undefined
console.log(person.habit) // undefined
console.log(person.strength) // 999
console.log(person.age) // undefined

不判断返回结果：

function Parent(name, age) {
this.name = name;
    this.strength = 60;
    this.age = age;
        return {strength : 999};
}
Parent.prototype.habit = "babit"
function newObj() {
 let obj  = {};
 let Constructor = [].shift.call(arguments);
 obj.__proto__ = Constructor .prototype;
 let result = Constructor .apply(obj,arguments);
 return obj
 }
var person = newObj(Parent,'Kevin', '18');
console.log(person.name) // Kevin
console.log(person.habit) // babit
console.log(person.strength) // 60
console.log(person.age) // 18

加上判断后：

function Parent(name, age) {
this.name = name;
    this.strength = 60;
    this.age = age;
    return {strength : 999};
}
Parent.prototype.habit = "babit"
function newObj() {
 let obj  = {};
 let Constructor = [].shift.call(arguments);
 obj.__proto__ = Constructor .prototype;
 let result = Constructor .apply(obj,arguments);
 //确保new出来的是一个对象
 return typeof result === "object" ? result : obj
 }
var person = newObj(Parent,'Kevin', '18');
console.log(person.name) // undefined
console.log(person.habit) // undefined
console.log(person.strength) // 999
console.log(person.age) // undefined

this指向问题：
如果返回值是一个对象，那么this指向的就是那个返回的对象；
如果返回值不是一个对象那么this还是指向函数的实例。（null是特例，虽然null是对象，但是返回时指向的还是函数的实例。）

即：函数返回对象时，那么this指向的是这个返回对象的运行环境；
函数返回不是对象时，那么this指向的就是这个函数本身。

所以这里判断一下，如果返回的不是对象则return 实例obj。

本文链接:https://blog.csdn.net/qq_39903567/article/details/115049474