建议改成：this的全面解析(一)

嗨，大家好！过了那么几天我又开始写文章了，这次给大家带来的是this的全面解析。会不会有人会问，怎么突然就这么高产了？其实是这样的，因为这次疫情的出现，让我原本的计划出现了变动，当然也让我认清了我小公司的老板是多么的抠门。所以接下来的文章，基本都是会写一些面试多次会考的问题。当然，作为前端工程师，那么我们的基本功除了HTML，CSS意外，最重要的就是这个JS中的this。废话说完，那么接下来我们就开始了。

this是指向的是谁？

在多数的情况下，this指向的是调用方法的那个对象。简单的说就是谁调用函数，那么this就是指向这个对象。

1
2
3
4
5
6
7
8
9
10
11
12

var a = 1
function foo() {
    console.log(this.a)
}
foo() // 输出 1

let obj = {
    a: 2,
    foo:foo
}

obj.foo() // 输出2

上面的代码对于老手来说应该没有什么问题。这里我对新手提点注意的点，那就是foo()的调用其实相当于window.foo()，又因为var定义的变量在非严格模式下会自动挂载到全局对象中，在浏览器中，指向 window；在 Node 中，指向 Global。（严格模式下，指向 undefined）

this的作用域指向哪里？

很多新手学习JavaScript的同学来说，都会认为this指向的是函数的作用域，实际上并不是这样的，实际上你看了上面的两个例子之后，
你就会发现，第一个符合，而第二个却是不符合的。再看下面一个经典的题目，你可能就有点意思了。（不懂作用域的同学，之后我也会出一篇的。）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var name = "zhangsan";

var obj = {

    name:"RadiomM",

    fn:function() { 

        var x = function() { console.log(this.name) };

        x();

    }

}

obj.fn() // zhangsan

是不是答案有点出乎了意料，这大多是因为觉得this指向函数作用域的关系，看x函数在obj对象的属性方法中定义，想当然的以为这时候调用函数x的就是这个obj对象，事实上这是大错特错的，有必要简单的说说，什么是声明，什么是调用。

声明

看下面的例子：

1
2
3
4
5

var a = 1

funciton foo() {
    console.log(a)
}

没错，就是这么简单，这就是声明函数foo。

调用

看下面的例子：

1
2
3
4
5
6
7

var a = 1

funciton foo() {
    console.log(a)
}
// 这就是调用
foo()

分析

重要的事情说三遍，建议你大声跟着读下面的字：
this的作用域是在调用时指向的，而不是声明指向的！！！！！
this的作用域是在调用时指向的，而不是声明指向的！！！！！
this的作用域是在调用时指向的，而不是声明指向的！！！！！
实际上，你读完上面的字，你还是会疑惑，那么为什么输出的就是这个zhangsan呢？其实，我在第一个例子中
已经给了提示了，实际上这个x()就相当于window.x()，那么这道题就相当的明了了。

总结

话不多说，直接抬总结上来：

1、this绑定实际上是在函数被调用时发生的绑定，它的指向取决于函数在哪里被调用。

2、this的作用域并不是指向函数的作用域。

其实这篇文章仅仅是入门this的基础，下一篇文章我将会全面解析this的绑定规则。
看到这里你可能会问什么会是下一篇呢？因为我写累了啊，哈哈。
给大兄弟来首歌轻松轻松。（这篇文章就是在快乐气氛下写完的。学习可别忘了快乐，hasaki！）

如果文章有错误的地方，希望小哥哥小姐姐们在评论区指出，毕竟作者的水平确实有限。