一直分不清这三者的区别,即使当时分清楚了,但是过段时间就会忘记,所以在这里单独记录一下,以备不时之需
call、apply、bind都是改变this指向的方法
接下来分别介绍下
1、call
fn.call:当前实例通过原型链的查找机制,在function.prototype上查找call方法
function call(){native code}
fn.call():
fn.call([this],[param]...)
在这里分为严格模式和非严格模式
严格模式:
第一个参数是谁,this就指向谁,包括null和undefined,如果不传参,this就是undefined
"use strict"
let fn = function(a,b){
console.log(this,a,b);
}
let 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
非严格模式:
如果不传参数,或者第一个参数是null或undefined,this都指向window
let fn = function(a,b){
console.log(this,a,b);
}
let 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、apply
和call基本上一致,唯一区别在于传参方式
apply是给fn传递一个数组,虽然传的是数组,但是也相当于给fn 一个一个的传递
fn.call(obj, 1, 2);
fn.apply(obj, [1, 2]);
3、bind
语法和call一模一样,区别在于是立即执行还是等待执行,bind不兼容ie6-8
都改变fn中的this
fn.call(obj, 1, 2);//立即执行
fn.bind(obj, 1, 2);//等待执行
两种的具体区别:
1、this改变为obj了,但是绑定的时候立即执行,当触发点击事件的时候执行的是fn的返回值undefined
document.onclick = fn.call(obj);
2、bind会把fn中的this预处理为obj,此时fn没有执行,当点击的时候才会把fn执行
document.onclick = fn.bind(obj);