Js 的 this（上下文）

this 是什么？

控台输入以下代码

console.log(this);
console.log(this === window);

这里的this是window对象。

var obj = {
  foo: function () {
    console.log(this);
    console.log(this === window);
  }
}

obj.foo();

这里的this是obj。

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

test();

test() 中打印this，js会先寻找方法this是否被定义，如未定义就会引用全局，所以打印出的this是Window对象, 尝试以下代码：

• 例一：

function testTwo() {
  var this = 123;
  console.log(this);
}

testTwo();

报错

Uncaught SyntaxError: Unexpected token 'this'

• 例二：

function testThree() {
  this = 123;
  console.log(this);
}

testThree();

报错

Uncaught SyntaxError: Invalid left-hand side in assignment

总结：
面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

ps: 以上总结来自于菜鸟教程，我自己是总结不出的😂。

如何改变this

从上面的代码中可以看出this是无法直接赋值的，回到刚开始的代码：

var obj = {
  foo: function () {
    console.log(this);
    console.log(this === window);
  }
}

obj.foo();

以上的代码，打印出的this是obj对象, 那如何使用全局的‘this’呢？

三种方法：

• call

var obj = {
  foo: function (one, two, three) {
    console.log(this);
    console.log(this === window);
  }
}

obj.foo.call(window, 1, 2, 3);

• apply

var obj = {
  foo: function (one, two, three) {
    console.log(this);
    console.log(this === window);
  }
}

obj.foo.apply(window, [1, 2, 3]);

• bind

var obj = {
  foo: function (one, two, three) {
    console.log(this, one, two, three);
    console.log(this === window);
  }
}

var myBoundFoo = obj.foo.bind(window);
myBoundFoo(1, 2, 3);

总结：

• call、apply 用法相似，都是直接传参调用。call的参数挨个传入，apply的参除了window，其他参数都放入数组，以数组的方式传入。
• bind与call、apply不同，它不会调用foo方法，而是自己返回一个方法，通过调用此方法往里传参。

this的使用

参考菜鸟教程