JavaScript函数中的this四种绑定形式

Jakcy JavaScript 2021-10-29 39

this的默认绑定 当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象

// 1
function fire () {
  console.log(this === window)
  // 我是被定义在函数内部的函数哦!
  function innerFire() {
     console.log(this === window)
  }
  innerFire(); // 独立函数调用
}
fire(); // 输出true true
// 2
var obj = {
 fire: function () {
  function innerFire() {
   console.log(this === window)
  }
  innerFire(); // 独立函数调用
  }
}
obj.fire(); //输出 true

this的隐式绑定 当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面了,这时候,通过this可以直接访问所绑定的对象里面的其他属性;函数于对象是独立的,this是在代码运行期动态绑定的而不是在书写期;

// 1
function fire () {
  console.log(this.a)
}
var obj = {
  a: 1,
  fire: fire
 }
obj.fire(); // 输出1
// 2
var a = 2;
var obj = {
  a: 1,
  fire: function () {
    console.log(this.a)
   }
}
obj.fire(); // 输出1
// 3
var fireInGrobal = obj.fire;
fireInGrobal(); // 输出 2

this的显式绑定:(call和bind方法) call和bind的区别是:在绑定this到对象参数的同时: 1.call将立即执行该函数 2.bind不执行函数,只返回一个可供执行的函数

var obj = {
  a: 1, // a是定义在对象obj中的属性
  fire: function () {
   console.log(this.a)
  }
}
var a = 2; // a是定义在全局环境中的变量 
var fireInGrobal = obj.fire;
fireInGrobal(); // 输出2
fireInGrobal.call(obj); // 输出1

// 2
var fireInGrobal1 = fireInGrobal.bind(obj);
fireInGrobal1();// 输出1
// 输出1