jsliang 求职系列 – 11 – 手写 new

时间:2021-1-18 作者:admin

一 目录

不折腾的前端,和咸鱼有什么区别

目录
一 目录
二 前言
三 原生 new
四 手写 new
 4.1 简单实现
 4.2 完善版本

二 前言

返回目录

面试官:来手写一个 new

看到这道题,不要急不要慌,jsliang 逐步深入带你搞一个。

我们先看一个案例:

this.name = 'jsliang';
let Foo = function() {
  this.name = 'zhazhaliang';
}
let foo = new Foo();
console.log(foo.name); // 输出啥?
console.log(window.name); // 输出啥?

上面代码输出啥?


答案是:

  • zhazhaliang
  • jsliang

那么,这道题中的 new 做了啥呢?我们深入研究研究。

三 原生 new

返回目录

先看一下原生 new 的一个案例,思考下 new 能做啥:

function Person( name, age){
  this.name = name;
  this.age = age;

  // return;                              // 返回 this
  // return null;                         // 返回 this
  // return this;                         // 返回 this
  // return false;                        // 返回 this
  // return 'hello world';                // 返回 this
  // return 2;                            // 返回 this

  // return [];                           // 返回 新建的 [], person.name = undefined
  // return function(){};                 // 返回 新建的 function,抛弃 this, person.name = undefined
  // return new Boolean(false);           // 返回 新建的 boolean,抛弃 this, person.name = undefined
  // return new String('hello world');    // 返回 新建的 string,抛弃 this, person.name = undefined
  // return new Number(32);               // 返回 新的 number,抛弃 this, person.name = undefined
}

var person = new Person("jsliang", 25);
console.log(person); // Person {name: "jsliang", age: 25}

四 手写 new

返回目录

那么我们开始理解 new 里面的内容,看看怎么手写一个 new

4.1 简单实现

返回目录

那么我们先简单地用 3 行代码写一个 new 试试:

  • 首先创建一个空对象 tempObj = {}
  • 接着调用 Foo.apply 方法,将 tempObj 作为 apply 方法的参数,这样当 Foo 的执行上下文创建时,它的 this 就指向 tempObj 对象。
  • 然后执行 Foo 函数,此时的 Foo 函数执行上下文中的 this 指向了 tempObj 对象。
  • 最后返回 tempObj 对象。
function myNew(func, ...args) {
  const tempObj = {};
  func.apply(tempObj, args);
  return tempObj;
}

this.name = 'jsliang';
let Foo = function(name, age) {
  this.name = name;
  this.age = age;
}
let foo = myNew(Foo, 'zhazhaliang', 25);
console.log(foo.name); // 输出啥?
console.log(foo.age); // 输出啥?
console.log(window.name); // 输出啥?

如上,我们可以看到此时 this 是属于 tempObj 的,绑定到 foo 上去了,从而获取到:

  • zhazhaliang
  • 25
  • jsliang

wow,是不是豁然开朗,简单 new 的实现只需要 3 行代码!

4.2 完善版本

返回目录

OK,我们写好了简单版的,让我们看看复杂版需要的条件吧:

  1. 第一个参数必须是个函数const person = new Person(),但是我们搞不了原汁原味的,那就变成 const person = myNew(Person)
  2. 原型链继承。我们新建一个对象 obj,这个 obj__proto__ 指向 func 的原型 prototype,即 obj.__proto__ === func.prototype
  3. 修正 this 指向。通过 apply 绑定 objfunc 的关系,并且将参数作为一个数组传递进去(方法体定义已经将剩余参数解构为数组)
  4. 判断构造函数是否返回 Object 或者 Functiontypeof 判断 object 需要排除 null,因为 typeof null === object
  5. 非函数和对象返回新创建的对象,否则返回构造函数的 return

下面贴一下最终实现:

function myNew(func, ...args) {
  // 1. 判断方法体
  if (typeof func !== 'function') {
    throw '第一个参数必须是方法体';
  }

  // 2. 创建新对象
  const obj = {};

  // 3. 这个对象的 __proto__ 指向 func 这个类的原型对象
  // 即实例可以访问构造函数原型(constructor.prototype)所在原型链上的属性
  obj.__proto__ = Object.create(func.prototype);

  // 为了兼容 IE 可以让步骤 2 和 步骤 3 合并
  // const obj = Object.create(func.prototype);

  // 4. 通过 apply 绑定 this 执行并且获取运行后的结果
  let result = func.apply(obj, args);

  // 5. 如果构造函数返回的结果是引用数据类型,则返回运行后的结果
  // 否则返回新创建的 obj
  const isObject = typeof result === 'object' && result !== null;
  const isFunction = typeof result === 'function';
  return isObject || isFunction ? result : obj;
}

// 测试
function Person(name) {
  this.name = name;
  return function() { // 用来测试第 5 点
    console.log('返回引用数据类型');
  };
}
// 用来测试第 2 点和第 3 点
Person.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);
}
const me = myNew(Person, 'jsliang'); // 用来测试第 4 点
me.sayName(); // My name is jsliang
console.log(me); // Person {name: 'jsliang'}

// 用来测试第 1 点
// const you = myNew({ name: 'jsliang' }, 'jsliang'); // 报错:第一个参数必须是方法体

这样,我们就了解 new 是啥东东,碰到手写 new 的时候就不慌啦!


jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。
基于 github.com/LiangJunron… 上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。