函数调用和this指针
1. 全局环境的this指针
浏览器全局环境下this指向window对象
console.log(this);
//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
nodejs环境下this指向global对象
2. 函数中的this指针
2.1 全局环境下函数调用
非严格模式this指向window,严格模式除箭头函数外指向undefine
//a.js 非严格模式
function fun1(){console.log(this)}
fun1();//window
(function(){console.log(this)})() //window
var fun2 = ()=>{console.log(this)}
fun2();//window
//b.js 严格模式
'use strict';
function fun1(){console.log(this)}
fun1();//undefined
(function(){console.log(this)})() //undefined
var fun2 = ()=>{console.log(this)}
fun2();//window
2.2 作为对象方法调用
function作为对象属性时，this指针指向对象的实例
var obj1 = {
name: 'a',
func1:function(){console.log(this.name);}
}
obj1.func1();//a
//等同于
function func2(){console.log(this.name);}
var obj2 = {
name: 'b',
funRef:func2
}
obj2.funRef();
2.3 构造函数调用
构造函数调用时，this指针指向函数的实例(function也是对象的一种)
function func3(c){
this.c = c;
console.log(this.c);//c
console.log(this);//func3 {c: "c"}
}
var finst3 = new func3('c');
2.4 同步回调函数
同步回调函数中的this指针服从上面1-3点的规则
function callback()
{
console.log(this.d);//undefined
console.log(this);//window
}
function func4(cb){
cb.d = 'd';
cb();
}
func4(callback);
2.5 异步回调函数
关于JavaScript是单线程执行就不多提了，这里详细分析一下对于异步操作的回调函数中this的指向问题。
提到异步操作就不得不提Event Loop，其详细介绍可以参见阮一峰大神的这篇。
简单来说就是：
所有异步函数的执行被放在“任务队列”中由另外一个单独的线程执行。当异步操作有结果时，会通知主线程调用该异步操作的回调函数。
注意：这里就有问题了，当主线程调用异步操作的回调函数时，是以什么环境和作用域来执行的呢？
答案是： 以全局环境和执行回调函数时的作用域链来执行回调函数。
参考以下代码：
setTimeout(function(){
console.log(this);//1秒后输出window
}, 1000);
//再看
var asyncFun1 = {
propA:"a",
synFun:function() {
console.log(this.propA);
console.log(this);
},
asynFun: function(){setTimeout(this.synFun, 1000)}
}
asyncFun1.synFun();//输出依次是
//a
//{propA: "a", synFun: ƒ, asynFun: ƒ}
asyncFun1.asynFun();
//undefined
//window
//再再看
var asyncFun2={
propB:"b",
asynFun:function(){
var c = 'string c';
setTimeout(function(){
console.log(c);
},1000);
}
}
asyncFun2.asynFun();//输出'string c'
注意为什么会输出'string c': 虽然回调函数运行是在全局环境(this指向window)，但是在其作用域链中是能够访问到变量c的。
常见的异步操作包括：
setTimeout/setInterval
XMLHTTPRequest
jQuery AJAX(这里的this被处理过并不指向window)
Fetch
Promise
关于如何在异步操作的回调函数中使用正确的this指针，往下看。
3. 在异步函数回调中正确使用this指针
通过上面的分析我们知道在异步回调函数中this会指向window，那么我们需要怎么做才能让this指向我们指定的对象呢？
3.1 箭头函数与作用域链
3.1.1 箭头函数定义： (x,y)=>{return x+y;}
当参数只有一个时,小括号()可以省略： x=>{return x+1;}
当函数体只有一行语句并且该语句结果作为返回值时，{}花括号可以省略： x=>x+1;
var fun1 = (x)=>{return x + 1;}
var fun2 = x=>{return x+1;}
var fun3 = x=>x+1;
//返回值都是2
fun1(1);//2
fun2(1);//2
fun3(1);//2
3.1.2 箭头函数特性： 箭头函数体内没有自己的this指针
那么箭头函数体内的this指针将符合作用域链原则，指向作用域链上最近的this
function fun4() {
setTimeout(() => {
console.log(this.id);
}, 1000);
}
var id = 1;
fun4.call({ id: 2 });//输出为2
fun4();//输出为1
分析如下：
如果异步操作的回调函数是普通函数，则其this指向window对象。
但箭头函数体内没有this指针，则按作用域链原则，回调函数中的this指针应该为fun4的this指针。
fun4作为普通函数，在全局环境调用时this指向window对象，所以 fun4();输出为1
function.call作用在调用函数时，将新的对象替换原有对象。则意味着fun4.call时fun4体内的this指针将指向{ id: 2 }，所以输出为2
3.2 闭包和作用域链
接下来看看闭包中的this指针问题
//a.js
function debounce(fn, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
//定义context和args，通过作用域链达到保存this指针和arguments的作用
clearTimeout(timer);
timer = setTimeout(function() {
//用apply保证回调函数的this指针不会被异步函数重置为window
fn.apply(context, args);
}, delay);
}
}
//等同于
function debounce(fn, delay) {
var timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(()=>
{fn.apply(this, arguments) }, delay);
}
}
document.a1 = "2";
var obj1 = {
a1:"1",
fun1:function(){
console.log(this);
console.log(this.a1);
}
}
document.addEventListener('scroll', debounce(obj1.fun1, 2000));
//2秒后输出
//document
//2
//b.js
function debounce(fn, delay) {
var timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(()=> fn(), delay);
}
}
window.a1 = "3";
document.a1 = "2";
var obj1 = {
a1:"1",
fun1:function(){
console.log(this);
console.log(this.a1);
}
}
document.addEventListener('scroll', debounce(obj1.fun1, 2000));
//2秒后输出
//window
//3
3.3 Call,Apply,Bind
关于这三个函数的对比和作用网上介绍很多，其主要作用为：
使用that替换函数内部this的指针指向为that。
function.call(that, arg1, arg2);
function.apply(that, [arg1, arg2]);
function.bind(that);
//如下
var obj1 = {
a1:"1",
fun1:function(){console.log(this.a1)}
}
var obj2 = {
a1:"2"
}
obj1.fun1();//1
obj1.fun1.call(obj2);//2
var funBind = obj1.fun1.bind(obj2);
funBind();//2
