<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          深入理解Javascript中apply、call、bind方法的總結。

          時間:?2017-11-22閱讀:?1038標簽:?js知識

          網上文章雖多,大多復制粘貼,且晦澀難懂,我希望能夠通過這篇文章,能夠清晰的提升對apply、call、bind的認識,并且列出一些它們的妙用加深記憶。


          apply、call

          在 javascript 中,call 和 apply 都是為了改變某個函數運行時的上下文(context)而存在的,換句話說,就是為了改變函數體內部 this 的指向。

          JavaScript 的一大特點是,函數存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念。

          先來一個栗子:

          function fruits() {}
          fruits.prototype = {
              color: "red",
              say: function() {
                  console.log("My color is " + this.color);
              }
          }
          var apple = new fruits;
          apple.say();    //My color is red


          但是如果我們有一個對象banana= {color : "yellow"} ,我們不想對它重新定義 say 方法,那么我們可以通過 call 或apply 用 apple 的 say 方法:

          banana = {
              color: "yellow"
          }
          apple.say.call(banana);     //My color is yellow
          apple.say.apply(banana);    //My color is yellow


          所以,可以看出 call 和 apply 是為了動態改變 this 而出現的,當一個 object沒有某個方法(本栗子中banana沒有say方法),但是其他的有(本栗子中apple有say方法),我們可以借助call或apply用其它對象的方法來操作。


          apply、call 的區別

          對于 apply、call 二者而言,作用完全一樣,只是接受參數的方式不太一樣。例如,有一個函數定義如下:

          var func = function(arg1, arg2) {  
          };


          就可以通過如下方式來調用:

          func.call(this, arg1, arg2);
          func.apply(this, [arg1, arg2])


          其中 this 是你想指定的上下文,他可以是任何一個 JavaScript 對象(JavaScript 中一切皆對象),call需要把參數按順序傳遞進去,而 apply 則是把參數放在數組里。

          JavaScript 中,某個函數的參數數量是不固定的,因此要說適用條件的話,當你的參數是明確知道數量時用call 。

          而不確定的時候用 apply,然后把參數 push 進數組傳遞進去。當參數數量不確定時,函數內部也可以通過 arguments這個數組來遍歷所有的參數。

          為了鞏固加深記憶,下面列舉一些常用用法:

          1、數組之間追加

          var array1 = [12 , "foo" , {name "Joe"} , -2458]; 
          var array2 = ["Doe" , 555 , 100]; 
          Array.prototype.push.apply(array1, array2); 
          /* array1 值為  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */


          2、獲取數組中的最大值和最小值

          var  numbers = [5, 458 , 120 , -215 ]; 
          var maxInNumbers = Math.max.apply(Math, numbers),   //458
          maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

          number 本身沒有 max 方法,但是 Math 有,我們就可以借助call或者 apply使用其方法。


          3、驗證是否是數組(前提是toString()方法沒有被重寫過)

          functionisArray(obj){ 
              returnObject.prototype.toString.call(obj) === '[object Array]' ;
          }


          4、類(偽)數組使用數組方法

          var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));


          Javascript中存在一種名為偽數組的對象結構。比較特別的是 arguments對象,還有像調用 getElementsByTagName , document.childNodes 之類的,它們返回NodeList對象都屬于偽數組。不能應用Array下的push , pop 等方法。

          但是我們能通過 Array.prototype.slice.call 轉換為真正的數組的帶有 length 屬性的對象,這樣 domNodes就可以應用 Array 下的所有方法了。


          深入理解運用apply、call

          下面就借用一道面試題,來更深入的去理解下 apply 和call 。

          定義一個 log 方法,讓它可以代理 console.log 方法,常見的解決方法是:

          function log(msg) {
            console.log(msg);
          }
          log(1);    //1
          log(1,2);    //1


          上面方法可以解決最基本的需求,但是當傳入參數的個數是不確定的時候,上面的方法就失效了,這個時候就可以考慮使用 apply 或者call,注意這里傳入多少個參數是不確定的,所以使用apply是最好的,方法如下:

          function log(){
            console.log.apply(console, arguments);
          };
          log(1);    //1
          log(1,2);    //1 2


          接下來的要求是給每一個 log 消息添加一個"(app)"的前輟,比如:

          log("hello world");    //(app)hello world


          該怎么做比較優雅呢?這個時候需要想到arguments參數是個偽數組,通過Array.prototype.slice.call轉化為標準數組,再使用數組方法unshift,像這樣:

          function log(){
            var args = Array.prototype.slice.call(arguments);
            args.unshift('(app)');
            console.log.apply(console, args);
          };


          bind

          說完了 apply 和 call ,再來說說bind。bind() 方法與 apply 和 call 很相似,也是可以改變函數體內 this的指向。

          MDN的解釋是:bind()方法會創建一個新函數,稱為綁定函數,當調用這個綁定函數時,綁定函數會以創建它時傳入 bind()方法的第一個參數作為 this,傳入bind() 方法的第二個以及以后的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。

          直接來看看具體如何使用,在常見的單體模式中,通常我們會使用 _this , that , self 等保存 this ,這樣我們可以在改變了上下文之后繼續引用到它。 像這樣:

          var foo = {
              bar : 1,
              eventBind: function(){
                  var _this = this;
                  $('.someClass').on('click',function(event) {
                      /* Act on the event */
                      console.log(_this.bar);     //1
                  });
              }
          }


          由于 Javascript 特有的機制,上下文環境在 eventBind:function(){ } 過渡到 $('.someClass').on('click',function(event) { }) 發生了改變,上述使用變量保存this 這些方式都是有用的,也沒有什么問題。當然使用 bind() 可以更加優雅的解決這個問題:

          var foo = {
              bar : 1,
              eventBind: function(){
                  $('.someClass').on('click',function(event) {
                      /* Act on the event */
                      console.log(this.bar);      //1
                  }.bind(this));
              }
          }


          在上述代碼里,bind() 創建了一個函數,當這個click事件綁定在被調用的時候,它的 this關鍵詞會被設置成被傳入的值(這里指調用bind()時傳入的參數)。因此,這里我們傳入想要的上下文this(其實就是 foo ),到bind()函數中。然后,當回調函數被執行的時候, this便指向foo對象。再來一個簡單的栗子:

          var bar = function(){
          console.log(this.x);
          }
          var foo = {
          x:3
          }
          bar(); // undefined
          var func = bar.bind(foo);
          func(); // 3


          這里我們創建了一個新的函數 func,當使用 bind() 創建一個綁定函數之后,它被執行的時候,它的 this 會被設置成foo,而不是像我們調用 bar() 時的全局作用域。

          有個有趣的問題,如果連續 bind() 兩次,亦或者是連續 bind() 三次那么輸出的值是什么呢?像這樣:

          var bar = function(){
              console.log(this.x);
          }
          var foo = {
              x:3
          }
          var sed = {
              x:4
          }
          var func = bar.bind(foo).bind(sed);
          func(); //?
          var fiv = {
              x:5
          }
          var func = bar.bind(foo).bind(sed).bind(fiv);
          func(); //?


          答案是,兩次都仍將輸出 3 ,而非期待中的 4 和 5 。原因是,在Javascript中,多次 bind() 是無效的。更深層次的原因,bind()的實現,相當于使用函數在內部包了一個 call / apply ,第二次 bind() 相當于再包住第一次 bind() ,故第二次以后的bind 是無法生效的。


          apply、call、bind比較

          那么 apply、call、bind 三者相比較,之間又有什么異同呢?何時使用 apply、call,何時使用 bind 呢。簡單的一個栗子:

          var obj = {
              x: 81,
          };
           
          var foo = {
              getX: function() {
                  return this.x;
              }
          }
           
          console.log(foo.getX.bind(obj)());  //81
          console.log(foo.getX.call(obj));    //81
          console.log(foo.getX.apply(obj));   //81


          三個輸出的都是81,但是注意看使用 bind() 方法的,他后面多了對括號。

          也就是說,區別是,當你希望改變上下文環境之后并非立即執行,而是回調執行的時候,使用 bind() 方法。而apply/call則會立即執行函數。

          再總結一下:

          apply 、 call 、bind 三者都是用來改變函數的this對象的指向的;
          apply 、 call 、bind 三者第一個參數都是this要指向的對象,也就是想指定的上下文;
          apply 、 call 、bind 三者都可以利用后續參數傳參;
          bind 是返回對應函數,便于稍后調用;apply 、call 則是立即調用 。


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/150

          JavaScript的聲明提升

          在JavaScript中,當出現var聲明的變量或者function聲明的函數時,會將該聲明提到當前作用域的前面執行,這便是聲明提升。值得注意的是,只是提升了聲明操作,賦值還是在原來的位置進行。聲明提升包括變量聲明提升和函數聲明提升。

          base91 for javascript

          原理和 base64 是一樣的,ASCII 共有94個可打印字符,base64 使用了其中 64 個,base91 使用了 91 個。

          javascript中什么是句柄?

          一個句柄是指使用的一個唯一的整數值,即一個4字節(64位程序中為8字節)長的數值,來標識應用程序中的不同對象和同類中的不同的實例。

          javascript不可變性是什么?

          不可變性即某個變量在進行了某個操作之后,其本身沒有發生變化,比如對于字符串而言,對字符串的任何操作都會改變字符串本身的值,而是在字符串的基礎上復制出來一個然后再改變,這樣我們就說是不可變的

          為什么javascript不起作用?

          JavaScript是一種屬于網絡的腳本語言,已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

          javascript怎么判斷按鈕被點擊?

          JavaScript可以通過Event對象的target事件或srcElement(IE瀏覽器支持)來判斷按鈕是否被點擊。Event對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

          javascript由幾部分組成?

          JavaScript有三部分組成。分別為核心(ECMAScript) 、文檔對象模型(DOM)、瀏覽器對象模型(BOM)。這三部分分別描述了該語言的語法和基本對象、處理網頁內容的方法和接口、與瀏覽器進行交互的方法和接口。

          Js輸出方式有哪些?

          在編寫JavaScript代碼的時候, 一定要記住每一句代碼后面都需要添加一個分號, 并且這個分號必須是英文的分號,我們會發現有時候不寫分號程序也能夠運行, 這里并不是因為不需要分號, 而是瀏覽器自動幫助我們添加了分號

          7個常見的 JavaScript 測驗及解答

          我相信學習新事物并評估我們所知的東西對自己的進步非常有用,可以避免了我們覺得自己的知識過時的情況。在本文中,我將介紹一些常見的 JavaScript 知識。請享用!

          JavaScript中“javascript:void(0) ”是什么意思

          expression 是一個要計算的 Javascript 標準的表達式。表達式外側的圓括號是可選的,鑒于規范化,以及養成好習慣,建議寫上去。當我們使用 void 操作符指定超級鏈接時,表達式會被計算但是不會在當前文檔處裝入任何內容。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网