call()
、apply()
、bind()
这三个方法都是改变this
的指向。
先说一下这三种有什么区别
call(this的值,参数1,参数2);
apply(this的值,[参数1,参数2]);
bind不会调用指定函数,它会把一个函数作为一个返回值返回出来,它不是一个立即执行函数。
call和apply的传参方式不一样。apply把需要传递给函数的参数放到一个数组(或者类数组)中传递进去,虽然写的是一个数组,但是也相当于给函数一个个的传递。
举个例子:
fn.call(obj, 1, 2);
fn.apply(obj, [1, 2]);
call和bind传参方式一样,但是call立即执行函数,bind不是一个立即执行函数,它是一个等待执行函数,bind会把一个函数作为一个返回值返回出来,才能调用。
同样的,我们举个例子:
fn.call(obj, 1, 2);//改变了this的指向,立即执行函数fn
fn.bind(obj, [1, 2])//改变了this指向,等待函数fn执行(fn并不执行)
在bind这里this改变了obj的指向,我们给他绑定一个点击事件document.onclick = fn.call(obj);
此时fn并没有执行,当我们点击后函数fn才执行,并返回一个返回值undefined
细节:
- call中的细节
1.1 在非严格模式下:
如果不传参数,或者第一个参数是null
或nudefined
,this都指向window;
var fn = function(a,b){
console.log(this,a,b);
}
var obj = {name:"obj"};
fn.call(obj,1,2); // this:obj a:1 b:2
fn.call(1,2); // this:1 a:2 b:undefined
fn.call(); // this:window a:undefined b:undefined
fn.call(null); // this=window a=undefined b=undefined
fn.call(undefined); // this=window a=undefined b=undefined
在控制台中的输出结果:
- 严格模式下:
2.1 第一个参数是谁,this
就指向谁,包括null
和undefined
,如果不传参数this
就是undefined
"use strict"//声明严格模式
var fn = function(a,b){
console.log(this,a,b);
}
var obj = {name:"obj"};
fn.call(obj,1,2); // this:obj a:1 b:2
fn.call(1,2); // this:1 a:2 b=undefined
fn.call(); // this:undefined a:undefined b:undefined
fn.call(null); // this:null a:undefined b:undefined
fn.call(undefined); // this:undefined a:undefined b:undefined
控制台输出结果如下: