js-this(by coderwhy)

原文地址：mp.weixin.qq.com/s/hYm0JgBI2…

1. this指向什么？

• 全局作用域下 this指向window

console.log(this); // window
var name = "why";
console.log(this.name); // why
console.log(window.name); // why

但是，开发中很少直接在全局作用域下去使用this，通常都是在函数中使用。

2. this绑定规则

2.1. 默认绑定

普通函数调用

• 独立函数调用会使用默认绑定，此时函数中的this指向全局对象(window)

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

函数调用链(一个函数调用另外一个函数)

• 所有的函数调用都没有被绑定到某个对象上

function test1() {
  console.log(this); // window
  test2();
}

function test2() {
  console.log(this); // window
  test3()
}

function test3() {
  console.log(this); // window
}
test1();

将函数作为参数 传入到另一个函数中

function foo(func) {
  func()
}

function bar() {
  console.log(this); // window
}

foo(bar);

现在对案例进行一些修改：会发现结果仍然是window；因为在真正函数调用的位置并没有进行任何的对象绑定，只是一个独立函数的调用

function foo(func) {
  func()
}

var obj = {
  name: "why",
  bar: function() {
    console.log(this); // window
  }
}

foo(obj.bar);

2.2. 隐式绑定

通过某个对象进行调用

通过对象调用函数

• foo的调用位置是obj.foo()方式进行调用的
• 那么foo调用时this会隐式的被绑定到obj对象上

function foo() {
  console.log(this); // obj对象
}

var obj = {
  name: "why",
  foo: foo
}

obj.foo();

案例1的变化

• 我们通过obj2又引用了obj1对象，再通过obj1对象调用foo函数
• 那么foo调用的位置上其实还是obj1被绑定了this

function foo() {
  console.log(this); // obj对象
}

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

var obj2 = {
  name: "obj2",
  obj1: obj1
}

obj2.obj1.foo();