JavaScript函數(shù)中上下文有哪些規(guī)則
1.規(guī)則1：對(duì)象.方法()
對(duì)象.方法()
對(duì)象打點(diǎn)調(diào)用它的方法函數(shù)，則函數(shù)的上下文是這個(gè)打點(diǎn)的對(duì)象。
1.1 案例1
function fn() {
console.log(this.a + this.b);
}
var obj = {
a: 66,
b: 33,
fn: fn
}
obj.fn();
輸出結(jié)果：
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();
輸出結(jié)果：
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();
輸出結(jié)果：
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();
輸出結(jié)果：
7
2.規(guī)則2：函數(shù)()
函數(shù)()
圓括號(hào)直接調(diào)用函數(shù)，則函數(shù)的上下文是window對(duì)象。
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();
輸出結(jié)果：
7
2.2 案例2
function fun() {
return this.a + this.b;
}
var a = 1;
var b = 2;
var obj = {
a: 3,
b: fun(), // 適用規(guī)則2
fun: fun
}
var result = obj.fun(); // 適用規(guī)則1
console.log(result);
輸出結(jié)果：
6
3.規(guī)則3：數(shù)組下標(biāo)
數(shù)組下標(biāo)
數(shù)組（類數(shù)組對(duì)象）枚舉出函數(shù)進(jìn)行調(diào)用，上下文是這個(gè)數(shù)組（類數(shù)組對(duì)象）。
3.1 案例1
var arr = ['A', 'B', 'C', function () {
console.log(this[0]);
}];
arr[3]();
輸出結(jié)果：
A
3.2 案例2
function fun() {
arguments[3]();
}
fun('A', 'B', 'C', function () {
console.log(this[1]);
});
輸出結(jié)果：
B
4.規(guī)則4：IIFE
(function(){})();
IIFE（立即可執(zhí)行函數(shù)）中的函數(shù)，上下文是window對(duì)象。
4.1 案例1
var a = 1;
var obj = {
a: 2,
fun: (function () {
var a = this.a; // 適用規(guī)則1
return function () { // 適用規(guī)則4
console.log(a + this.a); // 2+1
}
})()
};
obj.fun();
輸出結(jié)果：
3
5.規(guī)則5：定時(shí)器、延時(shí)器
setInterval(函數(shù),時(shí)間);
setTimeout(函數(shù),時(shí)間);
定時(shí)器、延時(shí)器調(diào)用函數(shù)，上下文是window對(duì)象。
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); // 適用規(guī)則5
輸出結(jié)果：
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(); // 適用規(guī)則1
}, 2000);
輸出結(jié)果：
3
6.規(guī)則6：事件處理函數(shù)
DOM元素.onclick = function(){};
事件處理函數(shù)的上下文是綁定事件的DOM元素。
6.1 案例1
請(qǐng)實(shí)現(xiàn)效果：點(diǎn)擊哪個(gè)盒子，哪個(gè)盒子就變紅，要求使用同一個(gè)事件處理函數(shù)實(shí)現(xiàn)。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>規(guī)則6：事件處理函數(shù)</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>
實(shí)現(xiàn)效果：
6.2 案例2
請(qǐng)實(shí)現(xiàn)效果：點(diǎn)擊哪個(gè)盒子，哪個(gè)盒子在2000毫秒之后就變紅，要求使用同一個(gè)事件處理函數(shù)實(shí)現(xiàn)。
與案例1的區(qū)別：需要備份上下文。
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;
到此這篇關(guān)于JavaScript函數(shù)中上下文有哪些規(guī)則的文章就介紹到這了,更多相關(guān)JavaScript 函數(shù)上下文規(guī)則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript動(dòng)態(tài)引用CSS文件的2種方法介紹
這篇文章主要介紹了Javascript動(dòng)態(tài)加載CSS文件的2種方法,經(jīng)常使用和非常實(shí)用的方法,需要的朋友可以參考下2014-06-06
JS的Document屬性和方法，希望大家了解下，方便以后的開發(fā)應(yīng)用。2010-01-01
cancelBubble阻止事件冒泡...2006-10-10
JavaScript CSS修改學(xué)習(xí)第三章 修改樣式表
在這一章我打算通過直接修改頁(yè)面的樣式表而不是通過訪問元素的辦法來修改PRE的背景顏色。不幸的是，瀏覽器嚴(yán)重的不兼容性讓這個(gè)代碼基本上不能使用。2010-02-02
這篇文章主要介紹了深入理解JavaScript中的箭頭函數(shù),文中主要針對(duì)ES6版本的JS進(jìn)行相關(guān)的講解,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了Js里的for…in和for…of的用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
三個(gè)js循環(huán)的關(guān)鍵字示例(for與while)
這篇文章主要介紹了三個(gè)js循環(huán)的關(guān)鍵字示例，主要是for與while,需要的朋友可以參考下2016-02-02
下面小編就為大家?guī)硪黄狫S 面向?qū)ο笾^承---多種組合繼承詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章介紹了JavaScript中的內(nèi)置對(duì)象，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
JavaScript與DOM組合動(dòng)態(tài)創(chuàng)建表格實(shí)例
這篇文章簡(jiǎn)單介紹了DOM 1.0一些基本而強(qiáng)大的方法以及如何在JavaScript中使用它們;你可以學(xué)到如何動(dòng)態(tài)地創(chuàng)建、獲取、控制和刪除HTML元素2012-12-12