欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript函數(shù)中上下文有哪些規(guī)則

 更新時間:2021年10月19日 14:31:40   作者:daixiangcn  
上下文是從英文context翻譯過來,指的是一種環(huán)境。在軟件工程中,上下文是一種屬性的有序序列,它們?yōu)轳v留在環(huán)境內(nèi)的對象定義環(huán)境。在對象的激活過程中創(chuàng)建上下文,對象被配置為要求某些自動服務(wù)。又比如計算機技術(shù)中,相對于進程而言,上下文就是進程執(zhí)行時的環(huán)境

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)文章

  • innerText 使用示例

    innerText 使用示例

    在元素間的文本就是通過對象.innerText,下面有個不錯的示例,感興趣的朋友可以參考下
    2014-01-01
  • js oncontextmenu事件使用詳解

    js oncontextmenu事件使用詳解

    這篇文章主要介紹了js oncontextmenu事件使用詳解,需要的朋友可以參考下
    2017-03-03
  • 轉(zhuǎn)換字符串為json對象的方法詳解

    轉(zhuǎn)換字符串為json對象的方法詳解

    這篇文章主要介紹了轉(zhuǎn)換字符串為json對象的方法。需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • 關(guān)于前端要知道的?AST知識

    關(guān)于前端要知道的?AST知識

    這篇文章主要介紹了關(guān)于前端要知道的?AST知識,在計算機科學中,抽象語法樹是源代碼語法結(jié)構(gòu)的一種抽象表示,需要的朋友可以參考下
    2023-04-04
  • JavaScript的事件流你了解嗎

    JavaScript的事件流你了解嗎

    這篇文章主要為大家介紹了JavaScript的事件流,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助<BR>
    2022-01-01
  • JavaScript中幾個重要的屬性(this、constructor、prototype)介紹

    JavaScript中幾個重要的屬性(this、constructor、prototype)介紹

    this表示當前對象,如果在全局作用范圍內(nèi)使用this,則指代當前頁面對象window,prototype本質(zhì)上還是一個JavaScript對象,constructor始終指向創(chuàng)建當前對象的構(gòu)造函數(shù)
    2013-05-05
  • scrollTop 用法說明

    scrollTop 用法說明

    scrollTop屬性是什么? 有些情況下,“元素中內(nèi)容”的高度會超過“元素本身”的高度,
    2009-06-06
  • JS排序方法(sort,bubble,select,insert)代碼匯總

    JS排序方法(sort,bubble,select,insert)代碼匯總

    新技術(shù)一直在不斷變化,掌握一些基礎(chǔ)是未來學習不斷更新的技術(shù)的堅實基礎(chǔ)。近來閑來無事,為了溫習一下從前學的數(shù)據(jù)結(jié)構(gòu),將數(shù)據(jù)結(jié)構(gòu)中的排序算法用JS實現(xiàn)了一遍,
    2016-01-01
  • 什么是JavaScript

    什么是JavaScript

    JavaScript是一種基于對象和事件驅(qū)動的客戶端腳本語言。JavaScript最初的設(shè)計是為了檢驗HTML表單輸入的正確性。javaScript起源于Netscape公司的LiveScript語言。
    2009-08-08
  • ECMAScript6快速入手攻略

    ECMAScript6快速入手攻略

    本文譯自 Github 上的一篇文章,目的是對還不太熟悉 ES6語法的同學做一個簡單的掃盲。下面一起來學習。
    2016-07-07

最新評論