call,apply,bind指定函数的this指向详解，功能细节，严格和非严格模式下设定this指向

function fn(a,b){
	console.log("aaa");
}
1
2
3

1、call、apply会执行函数

fn.call();
fn.apply();
1
2

2、call、apply执行函数的时候将函数里的this改变为带入的第一个参数

var o={a:1};
fn.call(o);
fn.apply(o);
1
2
3

3、call，调用是第一个参数是替代函数中this的指向，第二个参数开始是原函数中所有参数顺序填入

apply一共就有两个参数，第一个参数时替代函数中this的指向，第二个参数是一个数组，里面时所有向原函数中传入的参数

fn.call(o,1,2);
fn.apply(o,[1,2]);
1
2

function sum(){
    var sum=0;
    for(var i=0;i<arguments.length;i++){
        sum+=arguments[i];
    }
    return sum;
}

var s= sum(1,2,3,4,5,6,7);
console.log(s)

var arr=[1,2,3,4,5,6,7];
var s=sum.apply(null,arr);
console.log(s)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

call,apply 会执行这个函数

4、回调函数是滞后执行的，但是call,apply会立即执行函数

回调函数想要改变this指向不能使用call和apply

 setInterval(fn.call(o),1000);
1

5、bind 在执行函数之前，先使用bind绑定函数中的this指向，并且返回一个新的函数

这个函数的内容与原函数内容一样，但是其中this被改变指向为bind绑定的对象，因为bind不会立即执行，所以可以改变回调函数的this指向

function abc(a,b,c,d){
      console.log(a,b,c,d);
  }
var f=abc.bind(null,1,2);
f(3,4);
f(5,6)
1
2
3
4
5
6

事件函数使用bind需要注意这个绑定后会返回一个新的函数

var o={
    b:1,
    a:function(){
        this.handler = this.clickhandler.bind(this);
        document.addEventListener("click",this.handler);
    },
    clickhandler:function(e){
        console.log("被点击了");
        console.log(this);
        document.removeEventListener("click",this.handler);
    }
}
o.a();
1
2
3
4
5
6
7
8
9
10
11
12
13

bind还具备优先将前多少为参数带入
在后续的执行该新函数时，不需要重新带入这两个参数，后续带入的参数则按原位数参数后的位置带入
bind是es5的属性，箭头函数是es6的，所以不能在箭头函数上使用这个。

//一种写法
function fn(a,b,c,d){
    console.log(this,a,b,c,d)
}

fn.bind({a:1},1,2)(3,4);

1
2
3
4
5
6
7

如果给入call和apply，bind的指向this对象不是对象，会发生什么

var o={
    a:1,
    b:function(){
        console.log(this)
    }
}
1
2
3
4
5
6

非严格模式时
fn.call(1);//this指向对象1  所有数值，字符串，布尔值都会被转换为相对于的对象类型，然后this指向这个对象类型
o.b.call(undefined);//this指向window 参数为undefined或者不填的时候this指向window
o.b.call(null);//this指向window 参数为null的时候this指向window
o.b();//this就是o
1
2
3
4
5

严格模式时
使用严格模式时，call，apply、bind调用带入什么参数时，this就指向这个参数
o.b.call(1);
o.b.call();
o.b.call(null)
var f=o.b.bind(null);
f();
1
2
3
4
5
6
7