JS中函数的上下文和上下文规则
一、函数的上下文
- 函数中可以使用this关键字，它表示函数的上下文
- 函数中的this具体指代什么必须通过调用函数时的“前言后语”来判断
- 函数的上下文由调用方式决定 1.情形1：对象打点调用函数，函数中的this指代这个打点的对象
xiaoming.sayHello()2. 情形2：圆括号直接调用函数，函数中的this指代window对象var sayHello =xiaoming.sayHello;``````sayHello();总之，函数只有被调用，它的上下文才能被决定
二、上下文规则
（1）规则一：对象打点调用它的方法函数，则函数的上下文是这个打点的对象
对象.方法()
functionfun(){
console.log(this.a +this.b);}var obj ={
a:1,
b:2,
c:[{
a:3,
b:4,
c: fun
}]};var a =5;
obj.c[0].c();//构成对象.方法()的 形式，适用规则1 结果为7
（2）规则二：圆括号直接调用函数，则函数的上下文是window对象
函数()
functionfun(){returnthis.a +this.b;}var a =1;var b =2;var obj ={
a:3,
b:fun(),//适用于规则2 window对象 3
fun: fun
};var result = obj.fun();//适用于规则1 结果为6
console.log(result);
（3）规则三：数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）
数组[下标]()
var arr =['A','B','C',function(){
console.log(this[0]);}];
arr[3]();//A
（4）规则四：IIFE中的函数，上下文是window对象
(function(){})();
var a =1;var obj ={
a:2,
fun:(function(){//IIFE立即执行，返回内层函数var a =this.a;//适用规则4，this.a是window a属性即1returnfunction(){
console.log(a +this.a);//前面指闭包中的a值，即1，this.a是规则1中 2}//适用规则4 })()//最后结果3};
obj.fun()//适用规则1 即2
（5）规则五：定时器、延时器调用函数，上下文是window对象
setInterval(函数, 时间);
setTimeout(函数, 时间);
var obj ={
a:1,
b:2,fun:function(){
console.log(this.a +this.b);}}var a =3;var b =4;setTimeout(obj.fun,2000);//适用规则五 7
var obj ={
a:1,
b:2,fun:function(){
console.log(this.a +this.b);}}var a =3;var b =4;setTimeout(function(){//延时器调用的是外层的匿名函数
obj.fun();//适用规则1 //真正调用函数的不再是延时器，而是obj.fun调用的。},2000);
（6）规则六：事件处理函数的上下文是绑定事件的DOM元素
DOM元素.onclick=function(){};
案例1：实现效果：点击哪个盒子，哪个盒子就变红，要求使用同 一个事件处理函数实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
div{
width:200px;
height:200px;
float: left;
border:1px solid #000;
margin-right:10px;}</style></head><body><div id="box1"></div><div id="box2"></div><div id="box3"></div><script>functionsetColorToRed(){this.style.backgroundColor ='red';//事件处理中表示绑定事件的元素}var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var box3 = document.getElementById('box3');
box1.onclick = setColorToRed;
box2.onclick = setColorToRed;
box3.onclick = setColorToRed;</script></body></html>
案例二：实现效果：点击哪个盒子，哪个盒子在2000毫秒后就变红，要求使用同一个事件处理函数实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
div{
width:200px;
height:200px;
float: left;
border:1px solid #000;
margin-right:10px;}</style></head><body><div id="box1"></div><div id="box2"></div><div id="box3"></div><script>functionsetColorToRed(){// 备份上下文：用一个变量将外部的this备份一下，不会干扰了var self =this;setTimeout(function(){
self.style.backgroundColor ='red';},2000);//事件处理时的上下文是点击的那个盒子DOM元素 -> 符合规则六-> 存储到self//但是里面加了一层函数，加了延时器。函数上下文就变了 符合规则五}var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var box3 = document.getElementById('box3');
box1.onclick = setColorToRed;
box2.onclick = setColorToRed;
box3.onclick = setColorToRed;</script></body></html>
总结：
问：什么时候需要备份？‘
答：当你的函数有内层函数，万一内层函数会改变上下文，就需要备份了
三、call和apply能指定函数的上下文
1.语法
函数.call(上下文);//sum.call(xiaoming)函数.apply(上下文);//sum.apply(xiaoming)
functionsum(){alert(this.chinese +this.math +this.english);}var xiaoming ={
chinese:80,
math:95,
english:93}sum.call(xiaoming)sum.apply(xiaoming)
2.call和apply的区别
functionsum(b1, b2){alert(this.c +this.m +this.e + b1 + b2);}sum.call(xiaoming,5,3);//call要用逗号罗列参数sum.apply(xiaoming,[5,3]);//apply要把参数写到数组中
总结：
以及备份上下文
学到目前的微微一点总结，可能不太全面
本文转载自: https://blog.csdn.net/liuxudanhahaha/article/details/122251740
版权归原作者 爱吃冰棍的小刘 所有， 如有侵权，请联系我们删除。
版权归原作者 爱吃冰棍的小刘 所有， 如有侵权，请联系我们删除。