javascript 的 this 指向问题

函数中 的this 指向问题

我们这来讨论的是 es6 之前的 ECMAscript

讨论这个问题首先要明确一点，函数中的 this 指向跟函数的调用有关系，所以 this 指向 只看函数是如何调用的就ok了(不用管函数是如何声明的)

函数的四种调用模式

函数调用模式

函数中的 this 指向 全局对象 window(在浏览器环境中)

Syntax:

• 函数名 + 小括号

function demo (){
    console.log(this);
}
// 回调函数也是一样的,this 指向只看函数如何被调用的
function demo2(callback){
    callback();
}
demo(); //Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
demo2(function(){console.log(this)}); // VM39:9 Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

• (function(){})() 立即执行函数

;(function(){
    console.log(this);
})();
//Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

方法调用模式

方法中的 this 指向 调用该方法的对象

Syntax:

• 对象.方法名();

var demoObj = {
    name:'kailey',
    fn: function () {console.log(this);}
}
demoObj.fn(); // {name: "kailey", fn: ƒ}

// 回调函数 中还是看函数是如何被调用的
function demo2(callback) {
    callback();
}
demo2(demoobj.fn); // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
// 这里只是将堆空间中的地址传给了 callback 这个变量，callback 和 demoObj.fn() 两个函数的调用在栈中的位置不同，但都是堆中 这个函数对象的副本。

构造器模式

this 指向 这个构造器的实例对象

Syntax:

• new + 构造函数

function Person (name,age) {
    this.name = name;
    this.age = age;
}
Person.prototype = {
    say: function () {
        console.log('i am ' + this.name + "今年" + this.age + " 岁！");
    }
};
var person = new Person();
console.dir(person);
// Person age: undefinedname: undefined__proto__: Object

apply 和 call 调用模式

this 指向 apply或者call的第一个参数

Syntax:

• 函数名.apply(thisArg,[paramsArray]) 或者 函数名.apply(thisArg,paramsLists)
• 参数数组或者参数列表都是可以省略的

function fn () {
    console.log(this);
}
var obj = {
    name:'tom',
    age: 18,
}
fn.apply(obj);
// {name: "tom", age: 18}

总结：

函数中 this 指向只看函数的调用方式就ok 了

补充

1. 函数是运行在其声明时候的语法环境中，这里语法环境就是函数的作用域，和变量访问有关。
2. 回调函数的作用域问题(声明位置)

    function demo (callback) {
    }
    demo(function(){}); // 此时的 匿名回调函数 声明的语法环境和 demo 是一致的