applycallbind三个方法

apply 和 call 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。
第一个参数都是改变 this 的指向，apply 接收一个数组作为参数，call 接收一个参数列表。
而 bind 则返回一个函数。

let obj = {value: 1}
function getValue(name, age){console.log(name, age, this.value)
}
getValue.apply(obj, ['zhangsan', '18'])  // zhangsan 18 1
getValue.call(obj, 'lisi', '20')  // lisi 20 1
getValue.bind(obj, 'wangwu', '20')()  // wangwu 20 1
getValue.bind(obj)('wangwu', '20')  // wangwu 20 1


// 使用 apply 实现二维数组降维
[].concat.apply([], [1,2,[3,4,5],[6,7]]) 
// 使用 call 将参数列表转为数组
function fn(){return [].slice.call(arguments)}
function fn(...args){return arg}

// 一个通用的事件绑定函数，call 实现代理
function bindEvent(elem, type, selector, fn) {if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, function (e) {
        var target
        if (selector) {
            target = e.target
            if (target.matches(selector)) {
                // 改变指向到目标元素
                fn.call(target, e)
            }
        } else {fn(e)
        }
    })
}
// 使用代理
var div1 = document.getElementById('div')
    bindEvent(div1, 'click', 'a.class', function (e) {console.log(this.innerHTML)
})

// 兼容 IE8 的写法
var addEvent = (function() {if(window.addEventListener) {return function(el, type, fn, capture) {el.addEventListener(type, function(e) {fn.call(el, e);
            }, capture);
        }
    }else {return function(ele, type, fn) {el.attachEvent('on' + type, function(e) {fn.call(el, e);
            })
        }
    }
})()

如何实现一个 apply 函数

Function.prototype.myApply = function(context){
    context = context || window
    context.foo = this;
    // 判断第二个参数是否存在且是数组
    let result = arguments[1] ?
                (Array.isArray(arguments[1]) ?
                        context.foo(...arguments[1]) : context.foo(arguments[1]))
                : context.foo()
    delete context.foo
    return result
}

如何实现一个 call 函数

Function.prototype.myCall = function(context){
    context = context || window
    // 第一个参数为函数的执行上下文，就把函数赋值给 foo
    context.foo = this;
    // 将剩余参数取出
    let args = [...arguments].slice(1);
    let result = context.foo(...args);
    // 执行完毕需要删除 foo 属性
    delete context.foo;
    return result;
}

如何实现一个 bind 函数

Function.prototype.myCall = function(context){
    context = context || window
    let _this = this;
    let args = [...arguments].slice(1);
    return fcuntion(){_this.apply(context, args.concat(...arguments))
    }
}