js中this的粗暴简单理解

发表于 更新于 分类于 ， ， 本文字数： 882 阅读时长 ≈ 1 分钟

从 C# 转到 JS, 感觉 各种帖子中的对于 JS 中的 this 指向描述得复杂无比，本来好好简单的事情，害得我花了好久的时间才理解。于是将自己的拙见分享出来。

要理解 this 的指向，只需要记住：

this 指向执行时所在的上下文，即被调用函数所在的对象。

一般情况

那么究竟要怎么确定 this 对象呢？我们只需要一级一级向上，遇到的第一个对象就是我们要的 this 对象。

下面举例说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fun(){
    console.log(this.s);
}

var obj = {
    s:'1',
    f:fun
}

var s = '2';

// 例1
obj.f(); //1

// 例2
fun(); //2

例 1 中，从 obj.f() 向上级搜索，找到的第一个对象就是 obj ,所以例 1 中的 this 是 obj。

例 2 中，从 f() 开始向上搜索，找到的第一个对象是当前 model。

下面再来一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var A = {
    name: '张三',
    f: function () {
        console.log('姓名：' + this.name);
    }
};

var B = {
    name: '李四'
};

B.f = A.f;

// 例3
B.f()   // 姓名：李四

// 例4
A.f()   // 姓名：张三

例 3 中，B 对象中的 f() 函数是由 A 传递给它的，因为函数在内存中是一个单独的地址，所以 A 在将 f 赋给 B 的过程中，并不会将 A 的作用域也一并传递过去，所以，B 中 f() 的上一级就是 B。

匿名函数

上面的规则，不适用于匿名函数。匿名函数是在哪儿声明，它的 this 就指向声明位置处函数的上下文中的 this。

特殊情况

JS 提供了一些可以修改 this 指向的函数。它们分别是call()、apply()、bind()。这些方法会指定里面 this 的指向。

具体区别请见 JavaScript 中 call()、apply()、bind() 的用法。