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

梦里梦外; 2022-11-11 14:59 79阅读 0赞

### 文章目录 ###

*  原型链
 *   *  一、构造函数、实例、原型对象的概念
     *   *  1 . 构造函数
         *  2 . 实例
         *  3 . 原型对象
     *  二、构造函数、实例、原型对象的关系
     *  三、new操作符的工作原理

# 原型链 #

首先引入一个关系图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center]

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

### 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

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

如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]

## 三、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

不判断返回结果：

加上判断后：

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

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

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

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/115049474][https_blog.csdn.net_qq_39903567_article_details_115049474]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/17c3d1336a5e42e881f57349948021c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: /images/20221022/cce130bab75e4bcab70399e5dece9c68.png
[https_blog.csdn.net_qq_39903567_article_details_115049474]: https://blog.csdn.net/qq_39903567/article/details/115049474