js this绑定方式和改变this指向，及call，apply，bind区别

保持对代码的热爱并保持怀疑态度
文中fn皆表示函数的意思 function（）{}

this指向

• 默认绑定：没有明确隶属对象的函数直接执行，window

• 事件绑定：事件处理函数中的this，事件源

• 隐式绑定：对象的方法中的this，对象

• 显示绑定：使用函数的call或apply或bind改变this，函数方法的第一个参数

• new绑定：new关键字执行函数，new出来的对象

  this是一个关键字，一般存在于函数中，表示所在函数的执行对象
  this不是所在的函数，是所在函数的执行对象

  this是一个指针，指向
  但是只有在函数执行时才被指向了具体的对象，如果函数没有执行，this没有意义。
  后续中的fn皆表示函数的意思 function（）{}

默认绑定

function fn(){
        console.log(this);
    }
     fn();

函数的默认执行（this的默认绑定）（没有明确隶属对象的函数），this指向window

事件绑定

当函数被作为事件处理函数执行时，this指向事件源（不是事件目标）
document.onclick = fn;

隐式绑定

当函数被赋值给某个对象的方法时，通过这个对象的方法执行函数，叫隐式绑定，this就是当前对象

    var obj = {
       name:"obj"
   };
   obj.show = fn;
   obj.show();

new绑定

function Fn(){
}
	new fd;

通过new关键字绑定，当一个函数被new执行时，函数内部的this会指向new出来的对象

什么是隐式丢失？

var obj = {
    name:"obj"
};
obj.show = function(){
console.log(this)
};
obj.show();      这里的this指向了obj

var a = obj.show;  这里赋值给了a，a执行，那么这时候this的指向就变成了window
 a();

显示绑定

通过函数的call或apply或bind方法，强行修改当前函数中的this指向，叫强制（显示）绑定
显示绑定可以用来修复隐式丢失.

call

功能：改变原函数的this指向，并立即执行这个新函数，新函数没有被保存

参数：
参数1：要改变的原函数的this指向
其他参数（可以多个）:覆盖原函数的参数

返回值：原函数的返回值

是否改变原数据：否

var res =fn.call(“1”,“ads”,“swfw”）

apply

功能：改变原函数的this指向，并立即执行这个新函数，新函数没有被保存

参数：
参数1：要改变的原函数的this指向
参数2：必须为数组：覆盖原函数的arguments的值

返回值：原函数的返回值

是否改变原数据：否

var res =fn.apply(“1”,[“sdfd”,“asdw”]）

bind

功能：改变原函数的this指向，返回一个新函数，新函数被保存到bind的返回值中，也就函数本身

参数：
参数1：要改变的原函数的this指向
其他参数（可以多个）:覆盖原函数的参数

返回值：一个跟原函数一毛一样的并改变了this指向的心函数
如果你拿新函数和旧函数相比较的话是肯定不相等的啦

是否改变原数据：否

var res =fn.bind(“1”,“ads”,“sdfd”,“asdw”）

call,apply,bind 区别

相同点：都是改变this的指向，
不同点：
1.call，apply会立即执行，而bind不会
2.apply传参的第二个参数是个数组[]，而call，bind 是多个参数 " “,” “,” "

call 解决上方隐式丢失问题

  var obj = {
        name:"obj"
    };
    obj.show = function(){
      console.log(this);
    };
    obj.show();      
    
    var a = obj.show; 
     a.call(obj);

apply 解决上方隐式丢失问题

  var obj = {
        name:"obj"
    };
    obj.show = function(){
      console.log(this);
    };
    obj.show();      
    
    var a = obj.show; 
     a.apply(obj);

bind解决上方隐式丢失问题

  var obj = {
        name:"obj"
    };
    obj.show = function(){
      console.log(this);
    };
    obj.show();      
    
    var a = obj.show; 
     a.apply(obj);