MDN上是这么描述的：
call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)
栗子：
var obj = {
value: 999
}
function bar(name,age) {
console.log(this.value)
console.log(name,age)
}
bar.call(obj,'jack',22) //999 'jack',22
- call方法做了两件事情
- 让bar函数的this指向对象obj
- bar函数执行了
代码实现第一步
试想在调用call时，把obj对象改造成下边这样
var foo = {
value: 999,
bar: function() {
console.log(this.value)
}
};
obj.bar() //999
这时this就顺利指向foo了，但是这样会让obj对象多了一个方法，所以还要去除掉这个额外的方法，可以使用delete方法
- 代码的执行顺序可以分为以下几步
1.将函数对象设置为对象的属性
2.执行这个函数
3.删除这个函数
按照上边顺序就是：
//第一步
obj .fn = bar
//第二步
obj.fn()
//第三部
delete obj.fn
根据这个思路试着写第一版代码
Function.prototype.myCall = function(obj) {
//首先获取调用的call函数，用this获取
obj._fn_ = this;
obj._fn_();
delete obj._fn_;
}
//测试一下
var obj = {
value: 999
}
function bar() {
console.log(this.value)
}
bar.myCall(obj); //999
基本功能实现了，但是call方法还可以传递多个参数的，所以还要完成参数部分的处理。
不定参数，这里可以使用arguments对象来取到第二个到最后一个的参数，因为是arguments是类数组对象，可以使用for循环来遍历，可以这样：
//建立一个数组，用来存贮参数
var args = [];
for(var i = 1; i < arguments.length;i++) {
args .push( 'arguments[' + i + ']' );
}
//执行后参数就转为[ 1, 2, 3 ]这种形式
参数有了,怎么传参呢，两种做法
obj._fn_(...args) //es6方法
eval( 'obj._fn_(' + args + ')' ) //es3的eval方法可以把字符串解析成JavaScript代码执行
OK,整合一下代码，再跑一下
Function.prototype.myCall = function(obj) {
//让this指向自定义对象
obj._fn_ = this;
//声明一个数组存储参数
var args = [];
//处理参数部分
for( var i = 1,len = arguments.length; i < len; i++ ) {
args.push( 'arguments[' + i + ']' )
}
//执行函数
eval( 'obj._fn_(' + args + ')' );
//删除对象属性
delete obj._fn_;
}
测试一下
var foo = {
value: 777
};
function bar(param1,param2) {
console.log(this.value)
console.log(param1,param2)
}
bar.myCall(foo,'test1','test2') //777 'test1' 'test2'
开心！(～￣▽￣)～
- 为了让代码更加强壮，可以加入一些异常处理，并且允许有返回值
- this参数可以传入null来当做参数，如果让参数为null时，就让this指向window
- 让这个函数可以有返回值
完整版代码如下：
Function.prototype.myCall = function(obj) {
var obj = obj || window;
//让this指向自定义对象
obj._fn_ = this;
//声明一个数组存储参数
var args = [];
//处理参数部分
for( var i = 1,len = arguments.length; i < len; i++ ) {
args.push( 'arguments[' + i + ']' );
}
//执行函数
var result = eval( 'obj._fn_(' + args + ')' );
//删除对象属性
delete obj._fn_;
return result;
}
为什么标题是call和apply,为什么只有call呢？？？
因为内置的apply方法和call的作用一样的，区别在于接受参数的形式。
call方法接受单个或多个参数，不接受数组形式的参数
apply方法相反，只接受数组形式的参数
所以apply的实现只需要在传参形式上更改就行了
在参数上做些判断就OK了，直接贴上代码
Function.prototype.myApply = function (obj, arr) {
var obj= Object(obj) || window;
obj._fn_ = this;
var result;
if (!Array.isArray(arr)) {
throw new Error('apply方法参数只接受数组');
return;
} else {
var args = [];
for (var i = 0, len = arr.length; i < len; i++) {
args.push('arr[' + i + ']');
}
result = eval('obj._fn_ (' + args + ')')
}
delete obj._fn_
return result;
}
