JavaScript函數(shù)中上下文有哪些規(guī)則
1.規(guī)則1:對象.方法()
對象.方法()
對象打點調(diào)用它的方法函數(shù),則函數(shù)的上下文是這個打點的對象。
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ù)()
圓括號直接調(diào)用函數(shù),則函數(shù)的上下文是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();
輸出結(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ù)組下標
數(shù)組下標
數(shù)組(類數(shù)組對象)枚舉出函數(shù)進行調(diào)用,上下文是這個數(shù)組(類數(shù)組對象)。
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對象。
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:定時器、延時器
setInterval(函數(shù),時間);
setTimeout(函數(shù),時間);
定時器、延時器調(diào)用函數(shù),上下文是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); // 適用規(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
請實現(xiàn)效果:點擊哪個盒子,哪個盒子就變紅,要求使用同一個事件處理函數(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>
實現(xiàn)效果:
6.2 案例2
請實現(xiàn)效果:點擊哪個盒子,哪個盒子在2000毫秒之后就變紅,要求使用同一個事件處理函數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中幾個重要的屬性(this、constructor、prototype)介紹
this表示當前對象,如果在全局作用范圍內(nèi)使用this,則指代當前頁面對象window,prototype本質(zhì)上還是一個JavaScript對象,constructor始終指向創(chuàng)建當前對象的構(gòu)造函數(shù)2013-05-05JS排序方法(sort,bubble,select,insert)代碼匯總
新技術(shù)一直在不斷變化,掌握一些基礎(chǔ)是未來學習不斷更新的技術(shù)的堅實基礎(chǔ)。近來閑來無事,為了溫習一下從前學的數(shù)據(jù)結(jié)構(gòu),將數(shù)據(jù)結(jié)構(gòu)中的排序算法用JS實現(xiàn)了一遍,2016-01-01