Javascript | 理解Javascript中的this关键字

先来看一段代码：

function fn(arg) {
    alert(this.arg);
    alert(this);
}
fn(123);//undefined  [object Window]
var o = { fn: fn };
o.fn(123); //undefined  [object Object]

 

第一个问题，为什么this.arg是undefined？

因为this指向的是调用该函数的对象，而不是函数。无论在window或者对象o中，都没有定义arg这个变量。

在严格模式下运行这个函数，会出现Uncaught TypeError: Cannot read property 'arg' of undefined错误。 

 

 

第二个问题，为什么第一个this是指向window，第二个是Object？我们知道js中，函数调用有4种方式：

• fn() 
• obj.fn() 
• fn.call(obj)和foo.apply(obj) 
• new fn() 

 

fn(a) 相当于 fn.call(undefined) 

本来在这种调用模式下，打印出的this应该是undefined才对，但是在浏览器中有一条规定：

如果你传的 context 不是一个对象，那么 window 对象就是默认的 context。  

(这条规则在 Node.js 和 strict 模式下会稍微不一样，不过那不是我们现在要讨论的)

所以上面的例子中第一个this打印出来是window。

 

obj.fn(a) 相当于 fn.call(obj)

因此在这种情况下，fn的this参数绑定的是对象obj。

因此第二个this打印出来是Object，即对象o。

 

fn.call(obj) 不用说，绑定的就是obj。

 

new fn()  绑定的就是新创建的对象。

 

理解这四种情况之后，就不会对this感到迷茫了。

当你不知道this指向哪个对象时，就把函数转化为function.call()的方式。

最后再来一个例子：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();//这里fn为上文提到的第一种调用方式
    }
};
obj.getAge();//NaN

 

知道为什么this指向window，为什么getAge()返回的是NaN了吧？

 

转载于:https://www.cnblogs.com/Lxylona/p/Javascript-this.html