1. 直接调用模式

[JavaScript] 纯文本查看 复制代码

var foo = function(){
    console.log(this)
};
// 如果一个函数，是直接调用，与任何对象都没有关系时，这个调用，就是函数调用
// 函数调用模式中：this指的就是window
foo();  //  window

2. 方法调用模式（对象内部）

[JavaScript] 纯文本查看 复制代码

var obj = {
    foo:function(){            console.log(this)
        }
}
// 如果一个函数，是作为某个对象一个方法调用的(与某象相关联)，那么这种调用，就属于方法调用
// 方法调用模式中：this就指向了当前调用的对象
obj.foo();  // obj

3. 构造函数调用模式

[JavaScript] 纯文本查看 复制代码

var Person = function(){
    this.foo = function(){
         console.log(this);
     }
};
// 如果一个函数是配合new运算符，来使用的，那么该种就属于，构造函数调用
// 构造函数调用模式中：this指向new创建出来的新对象
var p = new Person();
p.foo();    // p

4. 上下文调用模式，也称借用方法

[JavaScript] 纯文本查看 复制代码

call/apply/bind 可以动态改变this的指向


var x = 100;
function fun(){
    console.log(this.x);
}
var obj = {};
obj.x = 200;
obj.fun = fun;

// 上下文调用模式中：this指向第一个参数，如果为空指向window
obj.fun.apply();         // 100    100是window中的x，说明this指向window

obj.fun.apply(obj);    // 200    200是obj中的x，说明this指向的是obj对象

5. this的问题的总结
遇到this指向问题时，先看有没有call、apply、bind
如果有，那么this指向 call、apply、bind 中第一个参数
如果没有，分析this所处的函数，究竟属于那种函数：
    1. 普通函数：this指向 window
    2. 对象内部方法： this指向对象
    3. 构造函数：this指向该构造函数实例出来的新对象


点击查看更多精彩前端资源