首先我们一定要牢记于心，this的指向，是在函数被调用的时候确定的。在函数【执行过程中】，this一旦被确定，就不可更改了。
在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。如果调用者(就是这个函数自己)，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。
想要准确确定this指向，找到函数的调用者以及区分他是否是独立调用就变得十分关键。
// 为了能够准确判断，我们在函数内部使用严格模式，因为非严格模式会自动指向全局
function fn() {
'use strict';
console.log(this);
}
fn(); // fn是调用者，独立调用，严格模式this指向undefined
window.fn(); // fn是调用者，被window所拥有，this指向window
以下例子都是严格模式下
// demo01
var a = 20;
function fn() {
console.log(this.a);
}
fn();//undefined
// demo02
var a = 20;
function fn() {
function foo() {
console.log(this.a); //这里的this
}
foo();
}
fn();//undefined
// demo03
var a = 20;
var obj = {
a: 10,
c: this.a + 20,
fn: function () {
return this.a;
}
};
console.log(obj.c);//NaN
console.log(obj.fn());//10
再看一个更容易混淆的例子：
var a = 20;
var foo = {
a: 10,
getA: function () {
return this.a;
}
}
console.log(foo.getA()); // 10
var test = foo.getA;
console.log(test()); // undefined
foo.getA()中，getA是调用者，它不是独立调用，被对象foo所拥有，因此它的this指向了foo。而test()作为调用者，尽管他与foo.getA的引用相同，但是它是独立调用的，因此this指向undefined，在非严格模式，自动转向全局window。
稍微修改一下代码，大家自行理解。
var a = 20;
function getA() {
return this.a;
}
var foo = {
a: 10,
getA: getA
}
console.log(foo.getA()); // 10
function foo() {
console.log(this.a)
}
function active(fn) {
fn(); // 真实调用者，为独立调用
}
var a = 20;
var obj = {
a: 10,
getA: foo
}
active(obj.getA);//undefined
var obj = {
a: 20,
getA: function() {
var self = this;
setTimeout(function() {
console.log(self.a)
}, 1000)
}
}
obj.getA();
var obj = {
a: 20,
getA: function() {
setTimeout(function() {
console.log(this.a)
}.bind(this), 1000)
}
}
function Person(name, age) {
// 这里的this指向了谁?
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
// 这里的this又指向了谁？
return this.name;
}
// 上面的2个this，是同一个吗，他们是否指向了原型对象？
var p1 = new Person('Nick', 20);
console.log(p1.getName());
我们已经知道，this，是在函数调用过程中确定，因此，搞明白new的过程中到底发生了什么就变得十分重要。
通过new操作符调用构造函数，会经历以下4个阶段。
创建一个新的对象；
将构造函数的this指向这个新对象；
执行构造函数内部的代码，为这个对象添加属性，方法等；
返回新对象。
因此，当new操作符调用构造函数时，this其实指向的是这个新创建的对象，最后又将新的对象返回出来，被实例对象p1接收。因此，我们可以说，这个时候，构造函数的this，指向了新的实例对象，p1。
而原型方法上的this就好理解多了，根据上边对函数中this的定义，p1.getName()中的getName为调用者，他被p1所拥有，因此getName中的this，也是指向了p1。
网友评论