函数中 的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 是一致的