this 指向问题，三个例子-优快云博客

本文深入探讨JavaScript中this关键字的行为变化，特别是在不同上下文和模式下的表现。解释了this如何根据函数调用方式的不同指向不同的对象，包括在严格模式与非严格模式下的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

'use strict';
var a = 20;
function foo () {
    var a = 1;
    var obj = {
        a: 10,
        c: this.a + 20,
        fn: function () {
            return this.a;
        }
    }
    return obj.c;

}
console.log(foo());    // ？
console.log(window.foo());  // ?

首先明确一点，一个函数如果独立调用，比如直接 foo（）, this在严格模式下是 undefined ，在非严格模式下会自动转向到window

第二点就是在进入新的函数作用域， this才会发生改变;

所以执行 foo() 会报错， this未定义；

如果在非严格模式下, this.a 就是window.a = 20 , 虽然obj是调用者, 但 this.a + 20 不在一个函数体中, 执行 obj.c的时候

并没有创建新的作用域, 所以this没有发生改变, 依然执行window

第三点是 谁调用函数， this会指向谁，并且调用后要立即执行;

执行 window.foo， this.a为20；

var a = 20;
var foo = {
    a: 10,
    getA: function () {
        return this.a;
    }
}
console.log(foo.getA()); // 10

var test = foo.getA;
console.log(test());  // 20

foo.getA()中，getA是调用者，他不是独立调用，被对象foo所拥有，因此它的this指向了foo。

而test()作为调用者，尽管他与foo.getA的引用相同，但是它是独立调用的，

因此this指向undefined，在非严格模式，自动转向全局window。

function foo() {
    console.log(this.a)
}

function active(fn) {
    fn(); // 真实调用者，为独立调用
}

var a = 20;
var obj = {
    a: 10,
    getA: foo
}

active(obj.getA); //20

这个列子也一样， fn真正执行的时候，其实obj并没有调用getA; 只是引用相同而已。

转载于:https://www.cnblogs.com/dhsz/p/8444356.html