作用
这三方法都是编写js代码时常用的方法,目的是改变函数 this 的指向。
区别
执行时间:
call 和 apply 调用时直接执行,bind返回一个函数,何时调用何时执行。
传参方式:
apply 可以传一个类数组对象或者数组(只接收两个参数)
call 和 bind一个一个的接收参数
bind还有特殊的传参方式和调用方式(详细见下)
改变this方式:
call 和 apply 只是简单的改变当前调用函数时候的this指向
bind是返回一个新函数,这个函数的this指向永远执行绑定时候的那个对象
obj={};
fun.call(obj,1,2,3,4,5);
fun.apply(obj,[1,2,3,4,5]);
let otherFun=fun.bind(obj,1,2,3,4);//otherFun的this永远指向obj
执行时机 | 传参方式 | 改变this方式 | |
---|---|---|---|
call | 直接执行 | 一个一个接收 | 短暂改变 |
apply | 直接执行 | 类数组/数组 | 短暂改变 |
bind | 何时调用何时执行 | 一个一个接收 | 返回新函数,永久改变 |
代码:
call:在obj上加一个独一无二的属性(fn)表示调用call的那个函数,然后用obj调用这个函数(函数this指向调用者)这样就实现了this的转移。
arguments是形参的类数组形式,fun.call(obj,1,2,3,4) 调用call时arguments表示obj,1,2,3,4组成的类数组,可以通过数组方法splice(1)取后面的值,即1,2,3,4
function _call(obj) {
let fn = Symbol();
obj[fn] = this;
let arg = [...arguments].splice(1);
let result = obj[fn](arg);
delete obj[fn];
return result;
}
apply:跟call大致一样,只不过传参方式不一样
function _apply(obj) {
let fn = Symbol();
obj[fn] = this;
let result = obj[fn](...arguments[1]);
delete obj[fn];
return result;
}
bind:它不用用obj来保存函数,因为它本身返回一个新函数。(不是最终版)
function bind(obj) {
let content = this;
let arr = Array.prototype.slice.call(arguments, 1);
return function () {
return content.apply(obj, arr);
}
}
ES6将类数组形式转换为数组形式的两者种方法:
Array.prototype.slice.call(arguments)
[].slice.call(arguments)
bind特性:
1. 传参方式 bind(obj,1,2,3,4)(5)这是返回新函数之后直接调用
这就需要考虑第二个括号的arguments的值了
function _bind(obj) {
let content = this;
let arr = Array.prototype.slice.call(arguments, 1);
return function () {
let new_arr = Array.prototype.slice.call(arguments);
return content.apply(obj, arr.concat(new_arr));
}
}
用数组方法 concat() 来连接第一个arguments的参数和第二个arguments的参数
2. bind返回的函数可以被new 此时传入的obj应改该被无视掉。构造函数的this应该永远指向新创建的实例对象
function _bind(obj) {
let content = this;
let arr = Array.prototype.slice.call(arguments, 1);
let finalBind = function () {
if (this instanceof finalBind) {//为true时,表示finalBind被当成构造函数使用。为false,表示正常使用
obj = this;//忽略对原函数this的操作
}
let new_arr = Array.prototype.slice.call(arguments);
return content.apply(obj, arr.concat(new_arr));
}
return finalBind
}
总结
call , apply , bind 都说改变this执行的函数,每个函数都可以调用。注意三者的区别
bind会被当成构造函数是一个难点,此时需要取消对原函数this指向的操作。