函数的上下文就是函数里面的this是谁

Posted 2020-09-26 彭蒙善

 

规律1：函数用圆括号调用，函数的上下文是window对象

比如小题目：

function fun(){

var a = 888;

alert(this.a); //实际上访问的是window.a

}

var a = 666;

fun(); //弹出666

函数function fun(){}的上下文是什么！不要看它怎么定义，要看它怎么调用！！此时是fun()函数名加上圆括号直接调用，此时上下文就是window对象！

而我们知道：所有的全局变量都是window对象的属性，（注意：函数里面的局部变量，不是window的属性，不是任何东西的属性，它就是一个变量！！） 程序弹出666.

规律2：函数如果作为一个对象的方法，对象打点调用，函数的上下文就是这个对象

比如下面的例子，我们把fun函数定义出来了，然后又把这个函数绑定给了obj对象的c属性：

function fun(){

alert(this.a); //相当于弹出obj.a

}

//对象

var obj = {

"a" : 10,

"b" : 20,

//给这个对象增加一个方法，值就是fun函数

"c" : fun

}

//我们要看清楚函数执行的时候，是怎么执行的！！

//现在不是圆括号直接执行！！而是一个对象打点调用这个函数执行，所以函数的上下文是obj对象！！！

obj.c(); //弹出10

调用的时候，是

对象.函数()

此时根据规律，函数里面的this是这个对象。所以能够弹出10。

规律3：函数是事件处理函数，函数的上下文就是触发这个事件的对象

下面我们定义了一个fun，然后把这个fun当做了3个DOM元素的事件处理函数：

//函数

function fun(){

this.style.background = "red";

}

var box1 = document.getElementById("box1");

var box2 = document.getElementById("box2");

var box3 = document.getElementById("box3");

// 把同一个函数绑定给不同的对象

// this就是点击谁就是谁

box1.onclick = fun;

box2.onclick = fun;

box3.onclick = fun;

函数不会执行，直到用户点击了某一个div标签。此时点击谁，this就是谁。

规律4：定时器调用函数，上下文是window对象

//函数

function fun(){

alert(this.a);

}

var a = 888;

setInterval(fun,1000);

函数fun被定时器调用，此时函数的上下文就是window对象。每秒钟能弹出888.

做一个小例子吧，点击一个盒子，2秒钟之后变红：

小明同学写的程序是错误的：

var box1 = document.getElementById("box1");

box1.onclick = function(){

setTimeout(function(){

this.style.background = "red";

},2000);

}

这是因为我标蓝色的函数的最终调用者是定时器！所以函数的上下文是window对象。window对象没有背景颜色属性。

怎么办？备份this！备份上下文！

在定时器外面的事件处理函数中，this就是box1这个元素，此时我们可以备份上下文。把this存为局部变量self，后面的程序就用self指代box1。还可以用_this、that等等，我们一律使用self。

var box1 = document.getElementById("box1");

box1.onclick = function(){

var self = this;

setTimeout(function(){

self.style.background = "red";

},2000);

}

规律5：数组中存放的函数，被数组索引之后加圆括号调用，this就是这个数组

比如：

function fun(){

alert(this === arr); //true

alert(this.length); //3，因为数组的长度是3

}

var arr = [fun,"东风","五条"];

arr[0]();

一定要敏感：

arr[0]();

此时这个函数是从数组中枚举出来然后加圆括号执行的，所以最终调用者可以认为是这个数组，上下文就是这个数组。