深入理解Js中的this

1446 字

7 分钟

深入理解Js中的this

2023-03-03

JS

TIP
JavaScript是静态作用域static scope，但Js中的this是一个例外，this的指向问题类似动态作用域，它不关心this如何声明以及在何处声明的，只与this的调用方式有关，即我们只能在运行时才能确定this的指向

作用域📜#

TIP
JavaScript作用域为静态作用域static scope，也可以称为词法作用域lexical scope，其主要特征在于，函数作用域中遇到既不是参数也不是函数内部定义的局部变量时，去函数定义时上下文中查，而与之相对应的是动态作用域dynamic scope则不同，其函数作用域中遇到既不是参数也不是函数内部定义的局部变量时，到函数调用时的上下文中去查

1
var a = 1;
2
var s = function () {
3
    console.log(a);
4
};
5
(function () {
6
    var a = 2 ;
7
    s(); // 1
8
})();
9
// 调用s()是打印的a为1，此为静态作用域，也就是声明时即规定作用域，而假如是动态作用域的话在此处会打印2。现在大部分语言都采用静态作用域，比如C、C++、Java、PHP、Python等等，具有动态作用域的语言有Emacs Lisp、Common Lisp、Perl等。

全局作用域📜#

TIP
直接声明在顶层的变量或方法就运行在全局作用域，借用函数的[[Scopes]]属性来查看作用域，[[Scopes]]是保存函数作用域链的对象，是函数的内部属性无法直接访问但是可以打印来查看

1
function s () {};
2
console.dir(s);
3
/*
4
  ...
5
  [[Scopes]]: Scopes[1]
6
    0: Global ...
7
*/
8
// 可以看见声明的s函数运行的上下文环境是全局作用域

函数作用域📜#

TIP
当声明一个函数后，函数内部定义的一些方法和成员的执行环境就是这个函数的函数作用域

1
(function localContext() {
2
    var a = 1;
3
    function s() {return a;}
4
    console.dir(s);
5
})();
6
/*
7
  ...
8
  [[Scopes]]: Scopes[2]
9
    0: Closure (localContext) {a: 1}
10
    1: Global ...
11
*/
12
// 可以看见声明的s函数运行的上下文环境是函数localContext的作用域，也可以称为局部作用域

块级作用域📜#

TIP
代码块中如果存在let或const,代码块会对这些命令声明的变量从块的开始就形成一个封闭的作用域

1
{
2
    let a = 1 ;
3
    function s() {
4
        return a ;
5
    }
6
    console.dir(s);
7
    /*
8
      ...
9
      [[Scopes]]: Scopes[2]
10
        0: Block {a: 1}
11
        1: Global ...
12
    */
13
}

使用⌨#

1. 默认绑定#

TIP
最常用的函数调用类型即独立函数调用，这个也是优先级最低的一个，此时this指向全局对象，注意如果使用严格模式strict mode，那么全局对象将无法使用默认绑定，因此this会变为undefined

1
var a = 1; //  变量声明到全局对象中
2
function f1() {
3
    return this.a;
4
}
5

6
function f2() {
7
    "use strict";
8
    return  this;
9
}
10

11
console.log(f1()); // 1 // 实际上是调用window.f1()而this永远指向调用者即window
12
console.log(f2()); // undefined // 实际上是调用 window.f2() 此时由于严格模式use strict所以在函数内部this为undefined

2. 隐式绑定#

TIP
对象属性引用链中只有最顶层或者说最后一层会影响this，同样也是this永远指向调用者，具体点说应该是指向最近的调用者

1
function f() {
2
    console.log(this.a);
3
}
4
var obj1 = {
5
    a: 1,
6
    f: f
7
};
8
var obj2 = {
9
    a: 11,
10
    obj1: obj1
11
};
12
obj2.obj1.f(); // 1 // 最后一层调用者即obj1

1
function f() {
2
    console.log(this.a);
3
}
4
var obj1 = {
5
    a: 1,
6
    f: f
7
};
8
var obj2 = {
9
    a: 11,
10
};
11
obj2.f = obj1.f; // 间接引用
12
obj2.f(); // 11 // 调用者即为obj2

3. 显示绑定#

TIP
使用apply、call,bind强制绑定this,此外需要注意使用bind绑定this的优先级是大于apply和call的，即使用bind绑定this后的函数使用apply和call是无法改变this指向的

1
window.name = "A"; // 挂载到window对象的name
2
document.name = "B"; // 挂载到document对象的name
3
var s = { // 自定义一个对象s
4
    name: "C"
5
}
6

7
var rollCall = {
8
    name: "Teacher",
9
    sayName: function(){
10
        console.log(this.name);
11
    }
12
}
13
rollCall.sayName(); // Teacher
14

15
// apply
16
rollCall.sayName.apply(); // A // 不传参默认绑定window
17
rollCall.sayName.apply(window); // A // 绑定window对象
18
rollCall.sayName.apply(document); // B // 绑定document对象
19
rollCall.sayName.apply(s); // C // 绑定自定义对象
20

21
// call
22
rollCall.sayName.call(); // A // 不传参默认绑定window
23
rollCall.sayName.call(window); // A // 绑定window对象
24
rollCall.sayName.call(document); // B // 绑定document对象
25
rollCall.sayName.call(s); // C // 绑定自定义对象
26

27
// bind // 最后一个()是为让其执行
28
rollCall.sayName.bind()(); //A // 不传参默认绑定window
29
rollCall.sayName.bind(window)(); //A // 绑定window对象
30
rollCall.sayName.bind(document)(); //B // 绑定document对象
31
rollCall.sayName.bind(s)(); // C // 绑定自定义对象

4. `new`绑定#

1
function _new(base,...args){
2
    var obj = {};
3
    obj.__proto__ = base.prototype;
4
    base.apply(obj, args);
5
    return obj;
6
}
7

8
function Funct(a) {
9
    this.a = a;
10
}
11
var f1 = new Funct(1);
12
console.log(f1.a); // 1
13

14
var f2 = _new(Funct, 1);
15
console.log(f2.a); // 1

5. 箭头函数#

TIP
箭头函数没有单独的this，在箭头函数的函数体中使用this时，会取得其上下文context环境中的this。箭头函数调用时并不会生成自身作用域下的this，它只会从自己的作用域链的上一层继承this。由于箭头函数没有自己的this指针，使用apply、call、bind仅能传递参数而不能动态改变箭头函数的this指向，另外箭头函数不能用作构造器，使用new实例化时会抛出异常

1
window.name = 1;
2
var obj = {
3
    name: 11,
4
    say: function(){
5
        const f1 = () => {
6
            return this.name;
7
        }
8
        console.log(f1()); // 11 // 直接调用者为window 但是由于箭头函数不绑定this所以取得context中的this即obj对象
9
        const f2 = function(){
10
            return this.name;
11
        }
12
        console.log(f2()); // 1 // 直接调用者为window 普通函数所以
13
        return this.name;
14
    }
15
}
16

17
console.log(obj.say()); // 11 // 直接调用者为obj 执行过程中的函数内context的this为obj对象

深入理解Js中的this

https://blog.oceanh.top/posts/frontend/深入理解js中的this/

作者

Ocean Han

发布于

2023-03-03

许可协议

CC BY-NC-SA 4.0

最后修改时间

2026-01-11 15:01:45

作用域📜#

全局作用域📜#

函数作用域📜#

块级作用域📜#

使用⌨#

1. 默认绑定#

2. 隐式绑定#

3. 显示绑定#

4. new绑定#

5. 箭头函数#

4. `new`绑定#