关于javascript里面的this关键字的意义

本文是翻译的繁体文章，而且还不完整,尽量读原文吧：https://software.intel.com/zh-cn/blogs/2013/10/09/javascript-this

 

注意：搞过java,c#和c++的人千万不能照搬以前的知识

this是执行上下文的一个属性，而不是变量对象的一个属性或者说是代表类的当前实例。再白话一点，看调用的上下文环境是什么才能决定this在执行的那一刻到底代表什么。

 

一、this指向调用该函数的对象

语法:

对象.方法名(); //这种情况下函数或者方法内的this代表这个对象

 

示例：

var obj = {
    x: 20,
    f: function(){ console.log(this.x); }
};

obj.f(); //调用f函数的时候，点前面的对象是obj,因此f函数内的this指向obj,输出结果是20

obj.innerobj = {
    x: 30,
    f: function(){ console.log(this.x); }
}

obj.innerobj.f(); //由于调用f函数时，点前面的对象是obj.innerobj,因此f函数内的this指向innerobj,输出结果是30

 

二、this指向全局对象

语法:

函数名称([参数]);//函数内的this关键字指向默认浏览器的window对象

 

示例：

var x = 10;
var f = function(){
    console.log(this.x);
};

f(); //由于调用f函数时,没有指明[对象.]的形式，因此f函数内的this在执行时指向全局对象，即window,因此输出10

 

深入理解示例1:

var x = 10;
var obj = {
    x: 20,
    f: function(){
        console.log(this.x);
        var foo = function(){ console.log(this.x); }
        foo(); // (2)
    }
};

obj.f();  // (1)

 

如果你认为上面的代码应该输出20,20的话就还是没有转换为js的思考方式考虑问题（还是java的思路呢），记住是谁调用或者说谁执行就是谁的，(1)位置的代码是obj.f()调用的,第一次的console.log(this.x)的时候this就是obj，因此输出20,第二次的(2)位置的代码是没有指明调用对象是谁，就是直接用foo()调用的，属于全局对象调用方式，则foo函数里面的this.x指向window.x，所以输出10。

要是想输出20,20应该怎么写呢？得把指向obj的this存起来，然后在后面的代码里面去使用，示例如下：

var x = 10;
var obj = {
    x: 20,
    f: function(){
        console.log(this.x);
        var me=this;
        var foo = function(){ console.log(me.x); }
        foo(); // (2)
    }
};

obj.f();  // (1)

 

另外一个示例:

var x = 10;
var obj = {
    x: 20,
    f: function(){ console.log(this.x); }
};

obj.f(); // (1)

var fOut = obj.f;
fOut(); //(2)

var obj2 = {
    x: 30,
    f: obj.f
}

obj2.f(); // (3)

 

(1)位置的代码是obj.去调用的，所以执行的时候this代表obj，输出20

(2)位置的代码是全局调用的方式，没有指明是哪个对象，那么执行的时候this指向window,输出10

(3)位置的代码是obj2.去调用的，执行的时候this代表obj2,输出30