在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。
- 有所属对象的时候指向该对象
- 没有所属对象的时候指向全局即:window
- 用new实例化出新对象后就指向新对象
- 通过apply,call或bind可以改变this指向
函数有所属对象时:指向所属对象
1 var myObject = { 2 value: 100 3 }; 4 myObject.getValue = function () { 5 console.log(this.value); 6 // 输出 100 // 输出 { value: 100, getValue: [Function]}, // 其实就是 myObject 对象本身 console.log(this); 7 return this.value; 8 }; 9 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 }