call 和apply一直在项目中使用，但是一直不知道是怎么实现，今天实现了一下
call和apply的用法
var obj = {
value: 1
}
function bar(name, age) {
return {
value: this.value,
name: name,
age: age
}
}
console.log(bar.apply(obj, ['zjx', 21]));
console.log(bar.call(obj, 'zjx', 21));
//{ value: 1, name: 'zjx', age: 21 }
call和apply的作用就是绑定this并立即执行函数，他们的区别就是apply传给函数的参数是数组形式，call不需要数组，直接写，相信大家看完代码就可以理解，在这里不过多赘述。
手写call
var obj = {
value: 1
}
function bar(name, age) {
return {
value: this.value,
name: name,
age: age
}
}
想让上面代码的bar函数的this指向obj，下面的代码是不是可以实现呢
var obj = {
value: 1,
bar: function(name, age) {
return {
value: this.value,
name: name,
age: age
}
}
}
相信看了代码你会明白，那么我们就按照这个方法去一步步实现:
给obj添加bar方法，然后执行方法，然后把添加的方法删除
//如果call的第一个参数是null,那么this就指向window
Function.prototype.call2 = function(context = window) {
//添加函数（this:调用call的函数）
context.fn = this;
var args = [];
// 取出第二个到最后一个参数
for (var i = 1, len = arguments.length; i < len; i++) {
args.push('arguments[' + i + ']');
}
//args : [ 'arguments[1]', 'arguments[2]' ]
//执行函数,res是函数的返回值
var res = eval('context.fn(' + args + ')');
// args是一个数组，但是在eval里面会转成字符串也就是 'arguments[1]', 'arguments[2]'
//也就对应着下面的zjx和21两个参数
//删除添加的函数
delete context.fn;
//返回函数返回的结果
return res;
}
var obj = {
value: 1
}
function bar(name, age) {
return {
value: this.value,
name: name,
age: age
}
}
console.log(bar.call2(obj, 'zjx', 21));
手写apply
apply的实现思路和call类似，相信你看完代码就会明白的，下面直接给出代码
Function.prototype.apply2 = function(context, arr) {
var context = Object(context) || window;
console.log(context, 'context');
context.fn = this;
var result;
if (!arr) {
result = context.fn();
} else {
var args = [];
for (var i = 0, len = arr.length; i < len; i++) {
args.push('arr[' + i + ']');
}
result = eval('context.fn(' + args + ')')
}
delete context.fn
return result;
}
console.log(bar.apply2(obj, ['zjx', 21]));
