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 了

补充

函数是运行在其声明时候的语法环境中，这里语法环境就是函数的作用域，和变量访问有关。

回调函数的作用域问题(声明位置)

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