JavaScript - this绑定规则的特殊应用JS中的this在通常的4种绑定(默认绑定、隐式绑定、显示绑定、ne

这是我参与新手入门的第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();