javascript this用法

转自1：http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

 

this是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，

　　function test(){

　　　　this.x = 1;

　　}

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

下面分四种情况，详细讨论this的用法。

情况一：纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

请看下面这段代码，它的运行结果是1。

　　function test(){

　　　　this.x = 1;

　　　　alert(this.x);

　　}

　　test(); // 1

为了证明this就是全局对象，我对代码做一些改变：

　　var x = 1;

　　function test(){

　　　　alert(this.x);

　　}

　　test(); // 1

运行结果还是1。再变一下：

　　var x = 1;

　　function test(){

　　　　this.x = 0;

　　}

　　test();

　　alert(x); //0

情况二：作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

　　function test(){

　　　　alert(this.x);

　　}

　　var o = {};

　　o.x = 1;

　　o.m = test;

　　o.m(); // 1

情况三 作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

　　function test(){

　　　　this.x = 1;

　　}

　　var o = new test();

　　alert(o.x); // 1

运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：

　　var x = 2;

　　function test(){

　　　　this.x = 1;

　　}

　　var o = new test();

　　alert(x); //2

运行结果为2，表明全局变量x的值根本没变。

情况四 apply调用

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。

　　var x = 0;

　　function test(){

　　　　alert(this.x);

　　}

　　var o={};

　　o.x = 1;

　　o.m = test;

　　o.m.apply(); //0

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。

如果把最后一行代码修改为

　　o.m.apply(o); //1

运行结果就变成了1，证明了这时this代表的是对象o。

 

 

转自2：https://segmentfault.com/a/1190000002968751

 

this简述

每个函数在被调用时都会自动取得两个特殊的对象：this 和 arguments，arguments 是一个类数组对象，包含着传入函数中的所有参数， this 引用的是函数据以执行的环境对象。

this 对象是在运行时基于函数的执行环境绑定的，它可能是全局对象或者其他的某个对象，随着函数的执行环境不同，this的值也会不一样。但是总有一个原则，那就是

this 指的是 调用函数的 那个对象。

还有另一个原则：当没有明确的调用函数的那个对象时，this指向全局对象global，浏览器模式下就是window了。

By default, this refers to the global object.

---

下面具体讲讲this 的指代原则。

this的指代原则

1. 函数直接被调用

此时函数属于全局性调用，其this代表全局对象global

var a = 5;

function test() {
    console.log(this.a);
}

test(); // 5

注意下面这种情况：

function f1(){
    console.log(this);
    function f2(){
        console.log(this);
    }
    f2();
}
f1();  // Window window

f2()输出的也是window，可见无论是在全局中直接被调用，还是内嵌在函数中被调用，只要是直接通过名字调用函数的，函数中的this在非严格模式下都是指向全局对象，而严格模式下就是undefined

2. 函数作为对象的方法调用

此时this指向这个对象。

function test() {
    console.log(this.a);
}

var obj = {};
obj.a = 5;
obj.m = test;
obj.m(); // 5

3. 函数作为构造函数调用

此时，this指向生成的新对象。

var a = 3; //全局变量a

function Test() {
    this.a = 5; // 对象属性a
}

var obj = new Test();
console.log(obj.a); // 5, 不是3！

4. 匿名函数中的this

匿名函数的执行环境具有全局性，因此，其this对象通常指向window。

var name = 'The window';

var obj = {
    name: 'My object',

    getName: function() {
        return function() {
            return this.name;
        };
    }
};

console.log(obj.getName()()); // 'The window'

 

var name = 'The window';

var obj = {
    name: 'My object',

    getName: function() {
        var that = this; //将this赋值给变量，那么that就是执行object了
        return function() {
            return that.name;
        };
    }
};
console.log(obj.getName());//'My object'

设置this的值

1. call() / apply()

这两个方法的作用都是在特定的作用域中调用函数，从而设置了函数体内this 的值。
apply() 方法接收两个参数：第一个参数是函数要运行的作用域，即对象。第二个参数是参数数组，既可以是Array的实例，也可以是arguments对象。call()和apply()的作用相同，二者唯一的差别就是接收参数的方式不同，即在使用call()方法时，传递给函数的参数必须逐个列举出来。
通过例子看call()/apply()是如何改变this值的。

window.color = 'red';
var o = {color: 'blue'};

function sayColor() {
    console.log(this.color);
}
sayColor.call(o); // blue

sayColor.call(window); // red
sayColor.call(this); // red
sayColor(); // red

2. bind()

该方法创建一个函数的实例，其this的值会被绑定到传给bind()函数的值。创建的新函数无论在哪里调用，this的值都是固定的。

window.color = 'red';
var o = {color: 'blue'};

function sayColor() {
    console.log(this.color);
}
var newSaycolor = sayColor.bind(o);
newSayColor(); // blue，全局中调用，结果仍为blue

需要注意的是，支持bind()方法的浏览器有 IE9+ 、Firefox 4+ 、 Safari 5.1+ 、 Opera 12+ 和 Chrome。

eval()

使用 eval() 方法时，this 指向哪里呢？
答案很简单，看谁在调用 eval() 方法，eval()中的this就是调用者的执行环境中的 this 。

---

这是我关于this的一点理解，欢迎大家拍砖~