一些面试官让你手搓的东西（一）

通过看一些前辈的面经，我发现了在面试中很多面试官都会让我们手搓点东西以实现JavaScript中的一些内置的方法或者是关键字。所以今天就花点时间整理一下，以便以后能够模块化的复习相应的知识点。

1、手写一个new

这是面试中最经典的一个手写题了，就连我这没经历过面试的小菜鸡都知道，因为好几个前辈都问我会不会手写一个new。new关键字用于创建对象实例并调用构造函数来初始化这个新创建的对象。例如：

//构造函数
function Person(name, age) {
    this.name = name; 
    this.age = age;
}

var p1 = new Person("Alice", 30);
var p2 = new Person("Bob", 25);

此时，我们得到了两个实例对象p1，p2。

当我们使用new Person("Alice", 30)这样的语句时，JavaScript会自动执行下面的步骤：

• 创建一个空对象。
• 将这个空对象的原型（__proto__）指向Person.prototype。
• 将构造函数Person内的this绑定到新创建的对象上，并传入参数初始化对象的属性。
• 返回这个对象

这也就是我们手写一个new的原理。我们根据它的执行过程可以手搓一个我们自己的new出来。

function myNew(constructor, ...args) { 
    // 1. 创建一个新的空对象  
    const obj = {}; 
    // 2. 将这个新对象的内部原型链接到构造函数的 prototype 对象  
    obj.__proto__ = constructor.prototype; 
    
    // 3. 将这个新对象作为 this 上下文，并调用构造函数  
    const result = constructor.apply(obj, args); 
    
    // 4. 如果构造函数返回的是一个对象，则返回这个对象；否则返回新创建的对象  
    return result instanceof Object ? result : obj; 
   } 

演示一下如何使用我的new——myNew，来看一下这个能不能实现我想要的new的效果。

const person = myNew(Person, 'Alice', 30);

看来这是实现了new的效果的！嘿嘿，下次面试的时候直接看一遍这个这不直接拿下这一分。

2、手写一个call

在JavaScript中，call方法可以指定this值来调用某个函数，并且可以传递额外的参数。例如：

var obj = { a:1 } 
function foo(x,y){
    console.log(this.a,x+y)
}
foo.call(obj,2,4)

如果我们不使用call方法的话，foo里面的this指向全局，最后的结果一定是undefined。但是如果我们使用call方法，就改变了this指向，使其指向obj。

它的实现原理是：

• 在某个对象上添加一个call方法，
• 然后拿到参数，
• 再去调用这个对象的这个方法(符合this指向调用者。) 。
• 得到结果后，再在这个对象上删去这个属性方法。
• 最后返回结果。

Function.prototype.myCall = function (context) {
    // 不传参默认为 window
    context = context || window
    // 新增 fn 属性,将值设置为需要调用的函数
    context.fn = this
    // 将 arguments 转化为数组将 call 的传参提取出来 [...arguments]
    const args = Array.from(arguments).slice(1)
    // 传参调用函数
    const result = context.fn(...args)
    // 删除函数
    delete context.fn
    // 返回执行结果
    return result;
}

这样我们就手搓了一个这样我们的call，下面我们来检测一下这个myCall效果咋样

结果还是可以的。

未完待续...

本来想写完的，结果写着写着室友都睡了。算了，我们下次再干！想要了解更多的可以给我收藏一下不迷路哟！大家晚安！