你不知道的js—关于this

提示

本文只会讲this的前置知识，不会深入。会先告诉你为什么需要this。学习要知其所以然！！！

关于this

this关键字是js中最复杂的机制之一。它是很特别的存在，被定义在所有函数中。即使非常有经验的js开发者也很难说清它到底指向的是什么。任何先进的技术都和魔法无异。

今天我们开始揭开它神秘的面纱。

为什么要用this

function identify() {
    return this.name.toUpperCase()
}
function speak() {
    const greeting = 'Hello, I am ' + identify.call(this);
    console.log(greeting)
}
var me = {
    name: 'MaPaoPao'
}
var you = {
    name: 'XiaoMing'
}
identify.call(me) // MAPAOPAO
identify.call(you) // XIAOMING
speak.call(me) // Hello, I am MAPAOPAO
speak.call(you) // Hello, I am XIAOMING
复制代码

可以看到使用this，我们只需要在调用函数的时候，确定this的执行，函数内的代码会非常简洁明了。如果没有this要怎么做：

unction identify(context) {
    return context.name.toUpperCase()
}
function speak(context) {
    const greeting = 'Hello, I am ' + identify(context);
    console.log(greeting)
}
var me = {
    name: 'MaPaoPao'
}
var you = {
    name: 'XiaoMing'
}
console.log(identify(you))
speak(me)
复制代码

要使用的对象不得不通过参数传进函数中，函数中的参数越多会导致代码结构越复杂。

随着使用场景越来越复杂，显示传递上下文对象会让代码变得一团糟。而this提供了一种更优雅的方式来隐式‘传递’一个对象，因此可以将API设计得更加简洁并且易于复用。

对this的误解

指向自身？

执行代码，foo执行3次，2打印了3次。而foo.count依旧是1。证明this并没有指向foo自身。

function foo() {
    console.log(2) // 2 2 2
    this.count++;
}
foo.count = 1;
foo();
foo();
foo();
console.log(foo.count) // 1
复制代码

指向函数的作用域？

尽管有些情况下它是正确的，但是这种说法依旧是错误的。

这段代码试图通过this联通foo和bar的静态作用域，使得bar可以使用foo作用域中的变量，显然是不能实现的。

function foo() {
    var a = 2;
    this.bar();
}
function bar() {
    console.log(this.a);
}
foo() // a is not defined
复制代码

this到底是什么

本片介绍了this的用途和一些对this的误解，为的是加深读者的理解，下篇我们会把this讲通透。结尾先抛出一个思想： this实际上是函数被调用的时候发生的绑定，它指向取决于函数在哪里被调用。

下一篇你不知道的js—this全面解析