函数的上下文
概述
在函数体的语句中，会出现this这个词，this就是函数的上下文
函数中this是谁，就说明函数的上下文是谁
函数中的this是谁，要看是如何调用的，因为this不是一成不变的
比如我们看下面的例子
var obj = {
a: 100,
fun: function() {
console.log(this.a);
}
};
我们此时在obj对象中定义了一个fun函数，就是obj的属性
现在如果直接对象打点调用
obj.fun();
此时会弹出100，说明上下文就是对象本身
如果此时我们将整个方法进行一次赋值
var obj = {
a: 100,
fun: function() {
console.log(this.a);
}
};
var f = obj.fun;
f();
页面中就会弹出undefined，因为此时this的上下文不是obj了，而是window
规则1：直接圆括号执行，上下文是window对象
什么叫做直接圆括号调用，就是没有对象打点执行，不是方括号枚举执行，通常是从数组、对象中提取出来后单独执行的
var obj = {
a: 100,
fun: function() {
alert(this.a);
}
};
var f = obj.fun;
f();
f()就是直接圆括号执行，因为这个f是从obj提取出来的
- 直接圆括号执行的
this指向的是window对象 - 需要注意的是
js中全局变量都是window对象的属性 - 还需要注意的是IIFE也属于直接圆括号调用的范畴，里面的
this都是window对象
var a = 300;
var obj = {
a: 100,
b: (function() {
console.log(this.a)
})()
};
弹出的内容是300，一位IIFE的this指向的是window
小题目
企业面试题
var xiaohong = {
name: '小红',
age: 25,
sayHello: (function() {
console.log(this.age)
return this.age >= 18 ? '女士' : '女生'
})()
}
console.log(`大家好，我叫${xiaohong.name}，我是一个${xiaohong.sayHello}`);
答案是女生，这道题的重点是IIFE里面的this，上面我们说过了IIFE里面的this指向的是window，所以此时IIFE里面的this.age是undefined，由于undefined >= 18结果是false，三元表达式走后面的“女生”
小题目
var obj = {
a: 100,
fun: function() {
var a = 200;
console.log(this.a);
}
}
var a = 300;
var f = obj.fun;
f();
答案是300，切记this指向谁一定要看调用，此时我们发现，调用是圆括号直接执行的。所以我们就知道了，内部的this就是window，所以obj里面的所有的a都是障眼法。由于全局变量都是window对象的属性，所以var a = 300就是window.a = 300，此时弹出的结果就是300
规则2：从对象中调用或者数组中枚举执行的函数，上下文就是这个对象或者数组
先补充点函数知识
函数的length指的是函数的形参列表长度
function fun(a, b, c, d, e, f) {
}
console.log(fun.length);
函数的实参是一个arguments对象
function fun(a, b, c, d, e, f) {
console.log(arguments)
}
fun(1, 2, 3, '你好', '哈哈');
每一个函数都有一个属性是arguments，值是一个类数组对象
什么是类数组对象？
类数组对象和数组很像，本质是对象，拥有数组的length属性，有对应的下标索引值。函数的arguments或者我们document.getXX获取DOM的时候返回对象类型都是类数组对象，因为这些对象虽然看似数组，但是没有数组的能力，不能进行push等等操作
我们知道函数中this是上下文，需要看如何调用，如果想表达函数自己，用arguments.callee
function fun() {
console.log(arguments.callee == fun)
}
fun();
小题目
function fun1(a, b, c) {
arguments[0]();
}
function fun2(a, b, c, d, e) {
console.log(this.length);
}
fun1(fun2, 9, 2, 4, 2, 34, 234);
此时this是看谁调用的。fun1在调用时，fun1调用的时候执行了函数arguments[0]，因为arguments是fun1的实参列表，所以第0项就是fun2函数，所以符合规则2；fun2函数中的this指的就是fun1函数的arguments类数组对象，所以length就是7
小题目
此时我们把上面的题目升级
function fun1(a, b, c) {
arguments[0](1, 2, 3, 4, 5, 6);
}
function fun2(a, b, c, d, e) {
console.log(this.length);
console.log(arguments.length);
console.log(arguments.callee.length);
console.log(this.callee.length);
}
fun1(fun2, 9, 2, 4, 2, 34, 234);
解析：通过分析知道了fun2中的this指的是fun1函数，所以此时this.length指的就是fun1的arguments类数组对象（因为是类数组枚举执行的符合规则2）
arguments本身是fun2函数自己的实参列表，所以长度是6（调用的时候传了1~6的参数）
我们知道arguments.callee是fun2函数自己，所以length就是形参列表为5
this.callee.length指的就是fun1的形参列表为3
小题目
var m = 2;
var obj = {
fun1: function() {
return this.fun2();
},
fun2: fun2,
m: 4
};
function fun2() {
return this.m;
}
console.log(obj.fun1());
题目的核心就是上下文的传递
小题目
综合前面规则1和规则2出的面试题
var num = 1;
var obj = {
num: 2,
fun: (function() {
var num = 3;
this.num += 4;
return function() {
this.num *= 5;
num *= 6;
console.log(num);
}
})()
};
obj.fun();
obj.fun();
console.log(num);
console.log(obj.num);
var f1 = obj.fun;
f1();
console.log(num);
console.log(obj.num);
var f2 = obj.fun;
f2();
console.log(num);
小题目
var length = 1;
var obj = {
length: 10,
b: [{
length: 20,
fun: function() {
console.log(this.length);
}
}]
};
var arr = [obj, obj.b, obj.b[0], obj.b[0].fun];
arr[0].b[0].fun();
arr[1][0].fun();
arr[2].fun();
arr[3]();
规则3：定时器直接调用，上下文是window对象
var a = 100;
function fun() {
console.log(this.a++);
}
setInterval(fun, 1000);
需要注意的是定时器调用和定时器内部调用是有区别的
下面代码是定时器在调用obj.fun函数，所以调用者是定时器
var obj = {
a: 300,
fun: function() {
console.log(this.a++);
}
}
var a = 100;
setInterval(obj.fun, 1000);
下面的代码本质是obj在调用函数，所以上下文是obj
var obj = {
a: 300,
fun: function() {
console.log(this.a++);
}
}
var a = 100;
setInterval(function() {
obj.fun();
}, 1000);
规则4：DOM事件中的this，指的是触发事件的这个DOM元素
// 首先生成四个div
for (var i = 0; i < 4; i++) {
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'white';
div.style.display = 'inline-block';
div.style.marginRight = '16px';
div.style.border = '1px solid black';
div.id = ('box' + i);
document.body.appendChild(div);
}
// 点击div修改颜色
var box0 = document.getElementById('box0');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
function changeColor() {
this.style.backgroundColor = 'purple';
}
box0.onclick = changeColor;
box1.onclick = changeColor;
box2.onclick = changeColor;
box3.onclick = changeColor;
规则5：call()和apply()可以设置函数的上下文
函数的上下文主要是看谁在调用，但是我们可以通过call()和apply()区设置函数的上下文
call()和apply()本质就是调用函数的同时，指定上下文
比如我们有一个changeSex的函数，它的作用是修改sex的属性
此时有一个xiaohong对象，sex为女
此时我们调用这个changeSex函数，强行将函数的上下文绑定为xiaohong
function changeSex() {
if (this.sex == '男') {
this.sex = '女';
} else {
this.sex = '男';
}
console.log(this);
}
var xiaohong = {
name: '小红',
sex: '女'
}
changeSex.call(xiaohong);
console.log(xiaohong.sex);
此时小红对象被修改为了男
apply函数也有同样的功能
changeSex.apply(xiaohong);
规范
函数.call(带有上下文的内容);
函数.apply(带有上下文的内容);
函数的上下文就是带有上下文的内容
需要注意的是call()和apply()的本质核心是有区别的：主要是语法上的区别。call是接收参数，apply是接收数组
call方法要求，所有的参数在上下文对象后面一一罗列
function person(name, age, height, weight) {
this.name = name;
this.age = age;
this.height = height;
this.weight = weight;
};
var xiaoming = {
name: '小明',
age: 3,
height: 60,
weight: 15
};
person.call(xiaoming, '小明', 23, 183, 65);
此时我们换成apply，apply要求所有的参数必须规整到一个数组中
person.apply(xiaoming, ['小明', 30, 183, 75]);
apply本质上只要求两个参数，第二个参数是一个数组集合
在使用结果上两种方式都是一样的
小题目
function fun1() {
fun2.apply(obj, arguments)
}
function fun2(a, b, c) {
console.log(obj);
console.log(a);
console.log(b);
console.log(c);
}
var obj = {
name: '小明',
sex: '男'
}
fun1('香蕉', '葡萄', '梨子');
此时你会发现apply有一个功能是将第二个数组参数进行解构，变成一个个的罗列参数，比如我们传进arguments是一个类数组对象，但是我们在fun2函数接收的a,b,c形参中进行了解构，也就是分别变成了 香蕉、葡萄、梨子
小题目
此时我们想根据apply的特点出一个思考题，利用Math方法进行数组的最大值查找
Math.max.apply(null, [789, 2342, 123, 2134, 2345, 22])
我们知道apply第二个参数是数组，但是apply有能力给解构，所以我们可以利用这个特点求数组的最大或最小值
上面的题目是企业中经常遇到的面试题，一定不要只写循环遍历求最大最小值
企业面试题
题目1
var a = 1;
function fn() {
this.a++;
a += 10;
var a = 8;
}
fn()
console.log(a)
答：结果是2，因为fn执行的时候内部的this指的是window也就是全局的a=1，所以this.a++等于2；函数内部的a += 10本质上是undefined += 10结果为NaN，因为后面有个var a = 8；因为变量声明提升的原因造成的
题目2
var length = 5;
var arr = [fn1, fn2];
function fn1() {
return this.length;
}
function fn2() {
return this[0];
}
var a = arr[0]();
var b = arr[1]()();
console.log(a);
console.log(b);
因为a此时的this是数组枚举执行，符合规则2，也就是上下文是arr数组，所以length是2
b其实最后返回的就是一个函数，函数直接圆括号执行此时上下文是window所以是5
题目3
var number = 2;
var obj = {
number: 3,
fn1: (function() {
this.number *= 2;
number = number * 3;
var number = 2;
return function() {
this.number *= 4;
number *= 5;
console.log(number);
}
})(),
fn2: function() {
this.number *= 2;
}
}
var fn1 = obj.fn1;
console.log(number);
fn1();
obj.fn1();
obj.fn2();
console.log(window.number);
console.log(obj.number);
题目4
var length = 5;
function getLength() {
return this.length;
}
function foo() {
this.length = 1;
return (function() {
var length = 2;
return {
length: function(a, b, c) {
return this.arr.length;
},
arr: [1, 2, 3, 4],
info: function() {
return getLength.call(this.length);
}
}
})();
}
var result = foo().info();
console.log(result);
答案是3，因为result是一个对象，这个对象打点调用info，info函数中执行了getLength函数，并且将上下文一同绑定了，绑定的是对象的length属性，该属性值是一个函数，所以getLength函数在执行时候的this就是函数，this.length也就是该函数的length结果为3