怎么新建MySQL数据库
发布时间：2022-06-27
作者：admin
阅读：279
阅读：279
今天就跟大家聊聊有关“JS函数上下文规则包括什么，具体应用是怎样”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“JS函数上下文规则包括什么，具体应用是怎样”文章能对大家有帮助。
1.规则1：对象.方法()
感谢各位的阅读，以上就是“JS函数上下文规则包括什么，具体应用是怎样”的内容了，经过本文的学习后，相信大家对JS函数上下文规则包括什么，具体应用是怎样都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！
1.规则1：对象.方法()
对象.方法()
对象打点调用它的方法函数，则函数的上下文是这个打点的对象。
1.1 案例1
function fn() {
console.log(this.a + this.b);
}
var obj = {
a: 66,
b: 33,
fn: fn
}
obj.fn();
输出结果：
99
1.2 案例2
var obj1 = {
a: 66,
b: 33,
fn: function () {
console.log(this.a + this.b);
}
}
var obj2 = {
a: 66,
b: 33,
fn: obj1.fn
}
obj2.fn();
输出结果：
7
1.3 案例3
function outer() {
var a = 11;
var b = 22;
return {
a: 33,
b: 44,
fn: function () {
console.log(this.a + this.b);
}
}
}
outer.fn();
输出结果：
77
1.4 案例4
function fun() {
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();
输出结果：
7
2.规则2：函数()
函数()
圆括号直接调用函数，则函数的上下文是window对象。
2.1 案例1
var obj1 = {
a: 1, b: 2, fn: function () {
console.log(this.a + this.b);
}
}
var a = 3;
var b = 4;
var fn = obj1.fn;
fn();
输出结果：
7
2.2 案例2
function fun() {
return this.a + this.b;
}
var a = 1;
var b = 2;
var obj = {
a: 3,
b: fun(), // 适用规则2
fun: fun
}
var result = obj.fun(); // 适用规则1
console.log(result);
输出结果：
6
3.规则3：数组下标
数组下标
数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）。
3.1 案例1
var arr = ['A', 'B', 'C', function () {
console.log(this[0]);
}];
arr[3]();
输出结果：
A
3.2 案例2
function fun() {
arguments[3]();
}
fun('A', 'B', 'C', function () {
console.log(this[1]);
});
输出结果：
B
4.规则4：IIFE
(function(){})();
IIFE（立即可执行函数）中的函数，上下文是window对象。
4.1 案例1
var a = 1;
var obj = {
a: 2,
fun: (function () {
var a = this.a; // 适用规则1
return function () { // 适用规则4
console.log(a + this.a); // 2+1
}
})()
};
obj.fun();
输出结果：
3
5.规则5：定时器、延时器
setInterval(函数,时间);
setTimeout(函数,时间);
定时器、延时器调用函数，上下文是window对象。
5.1 案例1
var obj = {
a: 1, b: 2, fun: function () {
console.log(this.a + this.b);
}
}
var a = 3;
var b = 4;
setTimeout(obj.fun, 2000); // 适用规则5
输出结果：
7
5.2 案例2
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
}, 2000);
输出结果：
3
6.规则6：事件处理函数
DOM元素.onclick = function(){};
事件处理函数的上下文是绑定事件的DOM元素。
6.1 案例1
请实现效果：点击哪个盒子，哪个盒子就变红，要求使用同一个事件处理函数实现。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>规则6：事件处理函数</title>
<style>
* {
margin: 0;
padding: 0;
}
body div {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<script>
function changeColor() {
this.style.backgroundColor = 'red';
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.onclick = changeColor;
box2.onclick = changeColor;
box3.onclick = changeColor;
</script>
</body>
</html>
实现效果：
6.2 案例2
请实现效果：点击哪个盒子，哪个盒子在2000毫秒之后就变红，要求使用同一个事件处理函数实现。
与案例1的区别：需要备份上下文。
function changeColor() {
var self = this; // 备份上下文
setTimeout(function () {
self.style.backgroundColor = 'red';
}, 2000);
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.onclick = changeColor;
box2.onclick = changeColor;
box3.onclick = changeColor;感谢各位的阅读，以上就是“JS函数上下文规则包括什么，具体应用是怎样”的内容了，经过本文的学习后，相信大家对JS函数上下文规则包括什么，具体应用是怎样都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理