变化莫测的this

写在前面

知识就是力量。 ——安琪拉

知识就是力量，但更重要的是运用知识的技能。 —— 培根

本文主要介绍了JavaScript 中 this 关键词在不同环境中的指向问题。

文末对三种修改this指向的方法做了描述和对比。

this是什么？

JavaScript this 关键词指的是它所属的对象。它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。

单独的情况下，this 指的是全局对象。

在普通函数中，非严格模式下，this 指的是全局对象；严格模式下，this 是 undefined。

在事件调用环境中，this 指的是接收事件的元素。

1.方法中的this

在对象方法中，this 指的是此方法的“拥有者”。

看个例子：

var obj = {
    a: 1,
    b: function() {
        console.log('this:', this);
        console.log('this.a:', this.a);
    }
}

【情况一】：对象中的函数被直接调用——this指向函数的“拥有者”

obj.b()

result: this指向obj对象
this: {a: 1, b: ƒ}
this.a: 1

【情况二】：函数被多层对象包含调用——如果函数被最外层对象调用,this的指向也只是它的上一级

window.obj.b()

result: this依然指向obj对象
this: {a: 1, b: ƒ}
this.a: 1

【情况三】：函数被复制给另外一个对象——谁调用，指向谁。

var c = obj.b;
c()

result: 这种情况相当于window.c();
this: Window对象
this.a: undefined

出现情况三的原因： 函数中的this,在函数创建时没有任何意义,只有在调用时才具有意义

2.箭头函数中的this

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

var obj = {
    fn: () => {
        console.log(this);
    }
}

obj.fn();  // this指向Window
window.obj.fn(); // this指向Window

var c = obj.fn
c(); // this指向Window

在箭头函数中引用this实际上调用的是定义时的上一层作用域的this。因此上面三种情况，this全部指向Window。

3. 单独情况下的this

3.1 浏览器环境中

在浏览器环境中this指向Window对象。

console.log(this);  // result: Window

3.2 node环境中

在浏览器环境中this指向的是导出的对象:module.exports。

console.log(this); // result: {}
console.log(this === module.exports); // result: true

4.普通函数中的this

非严格模式下，指向Window对象

function jump() {
    console.log(this); // result: Window
}
jump();

严格模式下，指向undefined

'use strict';
function jump() {
    console.log(this); // result: undefined
}
jump();

普通函数直接调用时，this最终指向的是调用他的对象。函数和变量 (注意：用var声明的变量, let和const不是）都是存在Window对象中的,依然遵循谁调用,指向谁）

'use strict';
function jump() {
    console.log(this); // result: Window
}
window.jump();

5.事件调用环境中的this

在事件调用环境this指向接收事件的元素：谁触发,函数中this就指向谁

<body>
    <div class="anqila"></div>
    <div class="laoyase"></div>
</body>
<script>
    let anqila = document.querySelector('.anqila');
    let laoyase = document.querySelector('.laoyase');

    anqila.onclick = move;
    laoyase.onclick = move;
    function move() {
        console.log(this);  // result: 点击的元素，如：<div class="anqila"></div>
    }
</script>

6.构造函数中的this

当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象（实例对象）。

注意：虽然构造函数返回的默认值是 this 所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回 this 对象）。

function Person() {
    this.age = 10;
    // console.log(this);  // 指向Person {age: 10}
}

var lily = new Person();

下面，让我们来看看这几种方式，会返回什么吧？（面试高频迷惑行为 O(∩_∩)O~）

Person.age = 20;
Person.prototype.age = 30;
Person.prototype.method = function() {
    console.log(this.age);
}

情况一：

new Person().method();

情况二：

Person.prototype.method();

情况三：

var prototype = Person.prototype;
var method = prototype.method;
method();

答案公布，你都答 or 猜对了嘛~
情况一：this被绑定到正在构造的新对象，所以返回的是10；
情况二：遵循最近原则，this指向最近的调用他的对象，即Person.prototype，所以返回的是30；
情况三：相当于window.method(),this指向window，所以返回的是undefined;

[拓展小知识——new 操作符做的事情]

以上面的构造函数为例：

1.创建一个空对象: var obj = new Object();
2.设置原型链 (当调用构造函数创建一个新实例后, 该实例的内部将包含一个指针,指向构造函数的原型对象): obj.proto = Person.prototype;
3.改变this指向并执行函数 (创建新的对象后,将构造函数的作用域赋值给新对象,因此this就指向了这个新对象): var result = Person.call(obj);

判断函数返回类型(如果构造函数没有返回值,隐式返回this对象--即新对象): if (typeof(result) === "object") {
lily = result
} else {
lily = obj;
}

普通函数没有定义返回值得情况下返回undefined,在有返回值的时候直接返回返回值
构造函数在没有return的情况下返回新创建的对象，在有显示返回值的情况下，如果返回值为基本数据类型{string，number，null，undefined，Boolean}，返回值仍然是新创建的对象，只有在显示返回一个非基本数据类型时，函数的返回值才为指定对象。在这种情况下，this所引用的值就会被丢弃了

7. 改变this指向的方法

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

【call】
第一个参数是用作“this”的对象，其余参数用作函数的参数

add.call(o, 5, 7);  // 16

【apply】
第一个参数是用作“this”的对象，第二个参数是一个数组，数组中的成员用作函数参数

add.apply(o, [10, 20]);   // 34

在非严格模式下使用 call 和 apply 时，如果用作 this 的值不是对象，则会被尝试转换为对象。null 和 undefined 被转换为全局对象。

【bind】
ECMAScript 5 引入了 Function.prototype.bind()。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

The end~

参考文档：

JavaScript this 关键词

MDN web docs