前端面试--js基础（手写new）

秃头007号robot

已于 2022-06-07 14:03:49 修改

阅读量96

点赞数

分类专栏：前端文章标签： javascript 前端原型模式

于 2022-06-07 14:01:55 首次发布

本文链接：https://blog.csdn.net/m0_51123132/article/details/125164038

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细解析了JavaScript中的new操作符，揭示其实例化和原型链继承的原理。new操作符通过四个步骤实现对象实例的创建：1) 创建空对象；2) 获取构造函数；3) 原型链关联，使实例继承构造函数的属性和方法；4) 执行构造函数以初始化。通过new，JS实现了基于原型的面向对象编程，即使在ES6引入class概念后，其底层机制依然保持不变。

摘要由CSDN通过智能技术生成

实现new操作符

// 先明确new的作用->生成对象的实例
// 在js中实例的概念和生成的原理->js中实例可以认为是特殊的对象，实例的生成核心原理是原型链的继承（也可以认为是对象的继承，底层还是原型），js与其说是一门面向对象的语言，
// 不如说它是一门基于原型的语言，es6之后虽然出现了class来类比其他面向对象的语言，但是底层机制依然是基于原型的
// 所以new操作符就是对一个对象进行操作，继承这个对象的所有属性和方法，这个操作过程是通过原型关联实现的
// ---------------------------------------------------------------------------------------------------------
// new的执行分为四个步骤：
// 1、创建一个空对象作为要返回的实例对象
// 2、获取传入的构造函数
// 3、进行原型连接，把空对象的原型指向构造函数的prototype属性
// 4、将构造函数的的方法和属性传递给创建的空对象

function _new(){
    // 创建空对象
    const obj = {};
    // 传入的第一个参数就是构造函数
    const [enterConstruct,...args]=[...arguments];
    // 判断传入的第一个参数是否是函数
    if(typeof enterConstruct !== 'function'){
        throw new Error('type error,please enter a function');
    }
    // 原型连接(也就是继承)
    obj.__proto__ = enterConstruct.prototype;
    // 空对象继承构造函数的所有属性和方法(继承通过改变this作用域绑定来实现)，并执行构造函数初始化
    const ret = enterConstruct.apply(obj,arguments);
    let flag = ret && (typeof ret === 'function'||typeof ret === 'object');
    return flag ? ret : obj;
}