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

Posted 2022-08-12 勇敢*牛牛

function fn(a,b)
	console.log("aaa");

1、call、apply会执行函数

fn.call();
fn.apply();

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

var o=a:1;
fn.call(o);
fn.apply(o);

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

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

fn.call(o,1,2);
fn.apply(o,[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)

call,apply 会执行这个函数

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

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

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

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)

事件函数使用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();

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);

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

var o=
    a:1,
    b:function()
        console.log(this)
    

非严格模式时
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

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