每日前端手写题--day3

第三天要刷的手写题如下：

1. 手写一个函数，实现Function.prototype.call功能。
2. 手写一个函数，实现Function.prototype.apply功能。
3. 手写一个函数，实现Function.prototype.bind功能。

下面是我自己写的答案：

0. 总体思路

• 手写call apply bind 的核心在于js中的一个机制：
• 如果typeof a.b === "function"; 并且a.b是一个普通函数，则在执行a.b() 的时候，函数体中的this会指向a；
• 不论是手写这三个中的哪一个，依据的核心都是上面的这个机制，只是使用的方式略微有些不同罢了！

此外，如果使用低版本的js写这三个函数，可能会碰到两个难题：

• 如何获取剩余参数
• 如何产生一个独一无二的属性名
• 本文使用ES6语法书写了这三个方法，同时将上面两个难点的解决方法放在了最后。

1. 手写一个函数，实现Function.prototype.call功能

function myCall (context, ...args: any) {
    // 检验
    if(typeof this !== "function") throw new Error('myCall must be called by a function');
    // 使用a.b机制改变this
    const _context = context || window;
    const _prop = Symbol('b');   
    _context[_prop] = this;
    // 执行
    const result = _context[_prop](args);
    // 删除
    delete  _context[_prop];
    // 返回
    return result;
}

// Function.prototype.myCall = myCall

2. 手写一个函数，实现Function.prototype.apply功能

和myCall唯一区别是参数的类型是不是以数组的形式传递进来的.

function myApply (context, args: any[]) {
    // 检验
    if(typeof this !== "function") throw new Error('myApply must be called by a function');
    // 使用a.b机制改变this
    const _context = context || window;
    const _prop = Symbol('b');   
    _context[_prop] = this;
    // 执行
    const result = args ? _context[_prop](...args) : _context[_prop]();
    // 删除
    delete  _context[_prop];
    // 返回
    return result;
}

// Function.prototype.myApply = myApply

3. 手写一个函数，实现Function.prototype.bind功能

• 区别在于：会形成一个闭包，返回的是一个函数
• 执行和删除的时机也不同
• 带一点柯里化的味道

function myBind (context, ...args: any) {
    // 检验
    if(typeof this !== "function") throw new Error('myBind must be called by a function');
    // 使用a.b机制改变this
    const _context = context || window;
    const _prop = Symbol('b');   
    _context[_prop] = this;
    return function (...rest: any) {
        // 合并参数
        const parm = [...args, ...rest];
        // 执行
        const result =  _context[_prop](...parm);
        // 删除
        delete _context[_prop];
        // 返回
        return result;
    }
}

// Function.prototype.myBind = myBind

4. ES5中如何获取剩余参数

使用Array.prototype.slice或者Array.from都可以实现将类数组变成真正数组的效果。

function getRest (_arguments: IArguments) {
    // const _rest = Array.from(_arguments);
    const _rest = Array.prototype.slice.call(_arguments);
    const _first = _rest.splice(0, 1);
    return [ _first, _rest ];
}

5. ES5中如何产生一个独一无二的对象属性

使用时间戳，如果觉得不保险的话，使用精度更高的performance.now

function getUniqueB () {
    // return 'b'.concat(performance.now()).toString(16));
    return 'b'.concat((+new Date()).toString(16));
}