JavaScript – this绑定规则的特殊应用

这是我参与新手入门的第3篇文章

this绑定规则特殊应用

忽略显示绑定

如果在显式绑定中，传入了null或undefined，那么这个显式绑定就会被忽略，使用默认规则。

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

var obj = {
  name: "zhangsan",
};

foo.call(obj); // obj
foo.call(null); // window
foo.call(undefined); // window

var bar = foo.bind(null);
bar(); // window

var baz = foo.bind(undefined);
baz(); // window
复制代码

间接函数引用

创建一个函数的间接引用，这种情况使用默认规则。

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

var obj1 = {
  name: "zhangsan",
  foo: foo,
};

var obj2 = {
  name: "lisi",
};

obj1.foo(); //obj
(obj2.foo = obj1.foo)();  // window
复制代码

ES6中的箭头函数

在ES6中的箭头函数，不使用this的四种绑定规则，而是根据外层作用域的this来决定。

1、模拟一个网络请求

• 使用setTimeout模拟网络请求，请求到数据后如何可以存放到data中呢？

• 需要拿到obj对象，设置data

• 直接拿到的this是window，我们需要在外层定义：var _this = this

• 在setTimeout的回调函数中使用_this就代表了obj对象

  var obj = {
    data: [],
    getData: function() {
      var _this = this;
      setTimeout(function() {
        // 模拟获取到的数据
        var res = ["abc", "cba", "nba"];
        _this.data.push(...res);
      }, 1000);
    }
  }
  
  obj.getData();
  复制代码

上例的代码在ES6之前是我们最常用的方式，从ES6开始，我们会使用箭头函数：

• 为什么在setTimeout的回调函数中可以直接使用this呢？

• 因为箭头函数并不绑定this对象，那么this引用就会从上层作用域中找到对应的this

  var obj = {
    data: [],
    getData: function() {
      setTimeout(() => {
        // 模拟获取到的数据
        var res = ["abc", "cba", "nba"];
        this.data.push(...res);
      }, 1000);
    }
  }
  
  obj.getData();
  复制代码

上例中如果getData也是一个箭头函数，那么setTimeout中的回调函数中的this指向谁呢？

• 答案是window；
• 依然是不断的从上层作用域找，那么找到了全局作用域；
• 在全局作用域内，this代表的就是window

var obj = {
  data: [],
  getData: () => {
    setTimeout(() => {
      console.log(this); // window
    }, 1000);
  }
}

obj.getData();
复制代码