|
1.规则1：对象.方法()对象.方法()
对象打点调用它的方法函数，则函数的上下文是这个打点的对象。
1.1 案例1function fn() { console.log(this.a + this.b);}var obj = { a: 66, b: 33, fn: fn}obj.fn();输出结果： 99
1.2 案例2var 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 案例3function 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 案例4function 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 案例1var 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 案例2function 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(); // 适用规则1console.log(result);输出结果： 6
3.规则3：数组下标数组下标
数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）。
3.1 案例1var arr = ['A', 'B', 'C', function () { console.log(this[0]);}];arr[3]();输出结果： A
3.2 案例2function fun() { arguments[3]();}fun('A', 'B', 'C', function () { console.log(this[1]);});输出结果： B
4.规则4：IIFE(function(){})();
IIFE（立即可执行函数）中的函数，上下文是window对象。
4.1 案例1var 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 案例1var 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 案例2var 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;到此这篇关于JavaScript函数中上下文有哪些规则的文章就介绍到这了,更多相关JavaScript 函数上下文规则内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JavaScript中var let const的用法有哪些区别
jQuery实现呼吸轮播图 |
