JavaScript中this的指向

发布时间:2017年05月22日评论数：2阅读数： 6995

在函数执行时，this 总是指向调用该函数的对象。要判断 this 的指向，其实就是判断 this 所在的函数属于谁。

1、有所属对象的时候指向该对象
2、没有所属对象的时候指向全局即：window
3、用new实例化出新对象后就指向新对象
4、通过apply，call或bind可以改变this指向

函数有所属对象时：指向所属对象

var myObject = {
        value: 100
    };
    myObject.getValue = function () { 
        console.log(this.value); 
        // 输出 100  // 输出 { value: 100, getValue: [Function]}， // 其实就是 myObject 对象本身 console.log(this);  
        return this.value;
    }; 
    console.log(myObject.getValue()); // => 100

getValue() 属于对象 myObject，并由 myOjbect 进行 . 调用，因此 this 指向对象 myObject。

函数没有所属对象：指向全局对象window

var myObject = {
        value: 100
    };
    myObject.getValue = function () { 
        var foo = function () {  
                console.log(this.value) // => undefined  console.log(this);// 输出全局对象 global 
            };  
            foo();  
            return this.value;
    }; 
    console.log(myObject.getValue()); // => 100

在上述例子中，foo函数虽然定义在 getValue 的函数体内，但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上，所以当调用时，它的 this 指针指向了window。

new实例化后：指向新对象

var SomeClass = function(){ 
        this.value = 100;
    };
var myCreate = new SomeClass(); 
console.log(myCreate.value); // 输出100

通过apply，call或bind：指向绑定的对象

var myObject = {
        value: 100
    }; 
var foo = function(){ 
        console.log(this);
    }; 
    foo(); // 全局变量 global
    foo.apply(myObject); // { value: 100 }
    foo.apply();//参数为空的时候默认指向全局
    foo.call(myObject); // { value: 100 } 
var newFoo = foo.bind(myObject);
    newFoo(); // { value: 100 }