'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; 只是引用相同而已。