国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

學(xué)習(xí)筆記整理-面向?qū)ο?02-認(rèn)識(shí)函數(shù)的上下文

2年前作者：東東愛編碼分類：Toy博客閱讀(19)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了學(xué)習(xí)筆記整理-面向?qū)ο?02-認(rèn)識(shí)函數(shù)的上下文。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

一、認(rèn)識(shí)函數(shù)的上下文

  • 什么是上下文
      垃圾分類，`這`是非常好的習(xí)慣，值得表?yè)P(yáng)
  隨手關(guān)燈，`這`是非常好的習(xí)慣，值得表?yè)P(yáng)
  遛狗栓繩，`這`是非常好的習(xí)慣，值得表?yè)P(yáng)
  課后復(fù)習(xí)，`這`是非常好的習(xí)慣，值得表?yè)P(yáng) 
  早睡早起，`這`是非常好的習(xí)慣，值得表?yè)P(yáng)
  • 函數(shù)的上下文
    • 函數(shù)中可以使用this關(guān)鍵字，它表示函數(shù)的上下文。
    • 與中文中"這"類似，函數(shù)中的this具體指代什么必須通過(guò)調(diào)用函數(shù)時(shí)的"前言后語(yǔ)"來(lái)判斷
  • 函數(shù)中的this
      var xiaoming = {
      nickname: '小明',
      age: 12,
      sayHello: function () {
          console.log('我是' + this.nickname + '，我' + this.age + '歲了'); 
        }
     };
  xiaoming.sayHello(); // 我是小明，我12歲了

       var xiaoming = {
    nickname: '小明',
    age: 12, 
    sayHello: function () {
       console.log('我是' + this.nickname + '，我' + this.age + '歲了'); 
     }
   };
  var sayHello = xiaoming.sayHello;  // 將函數(shù)"提"出來(lái)，單獨(dú)存為變量
  // 直接圓括號(hào)調(diào)用這個(gè)函數(shù)，而不是對(duì)象打點(diǎn)調(diào)用了
  sayHello(); // 我是undefined，我undefined歲了
  • 函數(shù)的上下文由調(diào)用方式?jīng)Q定
    • 同一個(gè)函數(shù)，用不同的形式調(diào)用它，則函數(shù)的上下文不同
      • 情形1：對(duì)象打點(diǎn)調(diào)用函數(shù)，函數(shù)中的this指代這個(gè)打點(diǎn)的對(duì)象。
          xiaoming.sayHello();
      • 情形2：圓括號(hào)直接調(diào)用函數(shù)，函數(shù)中的this指代window對(duì)象。
          var sayHello = xiaoming.sayHello; 
  sayHello();

          var obj = { a: 1,
   b: 2,
   fn: function () {
       console.log(this.a + this.b);
   }
  };
  var fn = obj.fn;
  fn();

1. 上下文規(guī)則1

  • 函數(shù)的上下文由調(diào)用函數(shù)的方式?jīng)Q定

    • 函數(shù)的上下文(this關(guān)鍵字)由調(diào)用函數(shù)的方式?jīng)Q定， function是"運(yùn)行時(shí)上下文"策略。
    • 函數(shù)如果不調(diào)用，則不能確定函數(shù)的上下文。

  • 規(guī)則1：對(duì)象打點(diǎn)調(diào)用它的方法函數(shù)，則函數(shù)的上下文是這個(gè)打點(diǎn)的對(duì)象。
    對(duì)象.方法()

      function fn() {
    console.log(this.a + this.b);
  }
  var obj = { 
    a: 66, b: 33, fn: fn
  }; 
  obj.fn(); // 99
    • 構(gòu)成對(duì)象.方法()的 形式，適用規(guī)則1
      var obj1 = {
  a: 1,
  b: 2,
  fn: function () {
      console.log(this.a + this.b);
   }
  };
  var obj2 = {
    a: 3,
    b: 4,
    fn: obj1.fn 
  };
  obj2.fn(); // 7
    • 構(gòu)成對(duì)象.方法()的形式，適用規(guī)則1
       function outer() { 
    var a = 11;
    var b = 22;
    return {
        a: 33,
        b: 44,
        fn: function () {
            console.log(this.a + this.b);
        }
   }; 
  }
  outer().fn(); // 77
    • 構(gòu)成對(duì)象.方法()的 形式，適用規(guī)則1
      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
    • 構(gòu)成對(duì)象.方法()的形式，適用規(guī)則1

2. 上下文規(guī)則2

  • 規(guī)則2：圓括號(hào)直接調(diào)用函數(shù)，則函數(shù)的上下文是window對(duì)象

      函數(shù)()

       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
    • 構(gòu)成函數(shù)()的形式，適用規(guī)則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); // 6

3. 上下文規(guī)則3

  • 規(guī)則3：數(shù)組(類數(shù)組對(duì)象)枚舉出函數(shù)進(jìn)行調(diào)用，上下文 是這個(gè)數(shù)組(類數(shù)組對(duì)象)

      數(shù)組[下標(biāo)]()

      var arr = ['A', 'B', 'C', function () { 
    console.log(this[0]);
  }];
  arr[3](); // "A"
    • 適用規(guī)則3

  • 什么是類數(shù)組對(duì)象：所有鍵名為自然數(shù)序列(從0開始)，且有length屬性的對(duì)象。

  • arguments對(duì)象是最常見的類數(shù)組對(duì)象，它是函數(shù)的實(shí)參列表。

      function fun() {
    arguments[3](); 
  }
  fun('A', 'B', 'C', function () { 
    console.log(this[1]); // 'B'
  });
    • 適用規(guī)則3

4. 上下文規(guī)則4

  • 規(guī)則4：IIFE中的函數(shù)，上下文是window對(duì)象。
      (function() {})();

      var a = 1;
  var obj = {
    a: 2,
    fun: (function () {
      var a = this.a;
      return function () {
        console.log(a + this.a); // 3
      } 
    })() // 適用規(guī)則4
  };
  obj.fun(); // 適用規(guī)則1

5. 上下文規(guī)則5

  • 規(guī)則5：定時(shí)器、延時(shí)器調(diào)用函數(shù)，上下文是window對(duì)象
      setInterval(函數(shù), 時(shí)間);
  setTimeout(函數(shù), 時(shí)間);

      var obj = {
  a: 1,
  b: 2,
  fun: function () {
    console.log(this.a + this.b); // 7
    }
  }
  var a = 3; 
  var b = 4;
  setTimeout(obj.fun, 2000); // 適用規(guī)則5

      var obj = {
    a: 1,
    b: 2,
    fun: function () {
      console.log(this.a + this.b); // 3
    }
  }
  var a = 3; 
  var b = 4;
  setTimeout(function() { 
    obj.fun(); // 適用規(guī)則1
  }, 2000);

6. 上下文規(guī)則6

  • 規(guī)則6：事件處理函數(shù)的上下文是綁定事件的DOM元素。
      DOM元素.onclick = function () {};
  • 請(qǐng)實(shí)現(xiàn)效果：點(diǎn)擊哪個(gè)盒子，哪個(gè)盒子就變紅，要求使用同一個(gè)事件處理函數(shù)實(shí)現(xiàn)。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>

    <script>
        function setColorToRed() {
            this.style.backgroundColor = 'red';
        }

        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');

        box1.onclick = setColorToRed;
        box2.onclick = setColorToRed;
        box3.onclick = setColorToRed;
    </script>
</body>
</html>
  • 請(qǐng)實(shí)現(xiàn)效果：點(diǎn)擊哪個(gè)盒子，哪個(gè)盒子在2000毫秒后就變紅，要求使用同一個(gè)事件處理函數(shù)實(shí)現(xiàn)。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>

    <script>
        function setColorToRed() {
            // 備份上下文
            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 = setColorToRed;
        box2.onclick = setColorToRed;
        box3.onclick = setColorToRed;
    </script>
</body>
</html>

7. call 和 apply

  • call和apply能指定函數(shù)的上下文。

      function sum() {
    alert(this.chinese + this.math + this.english);
  }
  var xiaoming = { 
    chinese: 80,
    math: 95,
    english: 93
  };
  sum.call(xiaoming);
  sum.apply(xiaoming);
    • 函數(shù).call(上下文);
    • 函數(shù).apply(上下文);

  • call和apply的區(qū)別

      function sum(b1, b2) {
    alert(this.c + this.m + this.e + b1 + b2);
  }
  sum.call(xiaoming, 5, 3); // call要用逗號(hào)羅列參數(shù)x
  sum.apply(xiaoming, [5, 3]); // apply要把參數(shù)寫到數(shù)組中

  • 到底使用call還是apply?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-649471.html

      function fun1() {
   fun2.apply(this, arguments);
  }
  function fun2(a, b) {
    alert(a + b);
  }
  fun1(33, 44);

8. 總結(jié)

規(guī)則 上下文
對(duì)象.函數(shù)() 對(duì)象
函數(shù)() window
數(shù)組[下標(biāo)]() 數(shù)組
IIFE window
定時(shí)器 window
DOM事件處理函數(shù) 綁定DOM的元素
call和apply 任意指定

到了這里，關(guān)于學(xué)習(xí)筆記整理-面向?qū)ο?02-認(rèn)識(shí)函數(shù)的上下文的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包