手写 bind

[sggmico]

考察点：

1. 对bind的了解
2. 解法的多样性
3. ES6的了解
4. code style

[sggmico]

/**
 *  bind的用法
 * 
 * 1、改变函数内部this指向
 * 2、返回一个新函数
 * 3、调用时可传入部分参数
 */

 // case
 var num = 1; // => window.num = 1
 var obj = {
     num: 2
 }

 function test(a, b) {
     console.log(a + b + this.num)
 }

 // 原生 bind 用法

console.log('\n --------原生 bind ---------')
 test(2, 3) // => 6
 var testCopy = test.bind(obj, 2)
 testCopy(3)  // => 7

 // 手写 bind  —— es5版本

 Function.prototype.myBindByES5 = function() {
    var fn = this;
    var context = arguments[0] || null;
    var outerArgs = [].slice.call(arguments, 1)
    return function() {
        var args = outerArgs.concat([].slice.call(arguments, 0))
        fn.apply(context, args)
    }
 }

 // 使用 手写 myBindByES5

console.log('\n --------手写 bind - es5版 ---------')
test(2, 3) // => 6
var testCopy = test.myBindByES5(obj, 2)
testCopy(3)  // => 7

// 手写 bind  —— es6+版本

Function.prototype.myBindByES6 = function (context, ...outerArgs) {
    return (...innerArgs) => this.call(context, ...outerArgs, ...innerArgs)
}

// 使用 手写 myBindByES6

console.log('\n --------手写 bind - es6+版 ---------')
test(2, 3) // => 6
var testCopy = test.myBindByES6(obj, 2)
testCopy(3)  // => 7