• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:-綠色安全純凈官方版!

      JavaScript運算符優先級的詳細區分(附示例)

      時間:2021-3-25作者:未知來源:瀏覽器部落人氣:

      網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
      本篇文章給大家帶來的內容是關于JavaScript運算符優先級的詳細分析(附示例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

      寫了兩年的JavaScript的我,原以為是不會在語法上陰溝里翻船的,可是事實上被打臉,最近在產品開發中組里的一個帥小伙找我討論一個問題,為了方便大家閱讀,我將這個問題的模型抽象出來:

      var provider = {
          test: {
              $get: function(){
                  return function anonymous(config){
                  };
              }
          }
      };
      var type = "test";
      var config = {};
      new provider[type].$get()(config);

      上面的語句運行時候為什么函數anonymous中的this指向的是window而不是new創建的新對象。我當時聽到這個問題的第一時刻想的是: 納尼 !怎么可能new操作符對應的構造函數中的this指向的不是新創建的對象實例呢?當時由于并沒有仔細地將問題從業務中抽象出來,其實我也有點迷糊,但仔細一想,這個語句到底要表達什么呢?

      思考

      在說這個表達式所要表達的含義之前,先說一個關于new操作符的幾個小知識:

      構造函數的返回

      JavaScript構造函數中可以返回值,也可以不返回值,比如:

      function Person(){
      
      }
      var person = new Person()

      我們知道這個時候構造函數返回的是創建的實例對象,也就是構造函數中this所指向的對象。但是當你構造函數有返回值時,就要分情況區分。如果返回的是一個非引用類型的值時,實際上返回的是仍然是新創建的實例對象。但是當返回的是一個引用類型的值時,返回的是引用對象本身。比如:

      function Person(){
          return function(){}
      }
      var person = new Person()
      typeof person // "function"

      在JavaScript中函數作為一等公民,實質上就是引用類型,因此person就是返回的匿名函數。

      new操作符的兩種形態

      其實在MDN的new操作符描述中,語法是

      new constructor[([arguments])]

      你會發現([arguments])被中括號所包圍也就意味著可缺省,因此,如果對于不含參數的構造函數而言:new Person()與new Person二者并無區別,那我們接著思考一個問題,對于前面返回函數的Person而言,當new Person()的時候為什么執行的是new Person()而不是(new Person)()呢。之前如果閱讀過我之前的一篇文章的同學知道,帶有參數的new操作符的優先級大于無參數列表的new操作符。因此總是會執行第一種而不是第二種。

      1862029288-586fbdb722b3c_articlex.png

      了解上面的步驟之后,我們已經接近了問題的本質,對于表達式

      new provider[type].$get()(config);

      JavaScript引擎到底是解析成:

      (new provider[type].$get())(config);

      還是

      new (provider[type].$get())(config);

      對于第一種形式而言,(new provider[type].$get())返回的是anonymous函數,因此在anonymous(config)中內部this指向是window。而第二種模式中provider[type].$get()返回的是anonymous函數,因此運行new anonymous(config)時內部的this指針指向的是新創建的實例this。

      當然我們從問題: this為什么指向的是window而不是new創建的新對象中可以看出來,其實作者當時想要表達的是第二種含義,但實際上卻以第一種方式在運行。為什么?原因非常簡單,第一種執行方式JavaScript引擎首先解析的是帶參數列表的的new操作符,而第二種方式則是先執行了函數調用,再執行的是new操作符,我們對照上面的優先級圖可以看到,帶參數列表的new優先級高于函數調用,因此肯定是以第一種方式去運行。

      其實這篇文章并沒有多少干貨,但是從中還是有兩點感悟吧,第一,從上一篇同類文章中我就強調避免使用這種模糊不清的表達式,多用幾個括號一切問題都迎刃而解,比如有的同學會寫出類似于:

      var str = "Hello" + true ? "World" : "JavaScript";

      那請問str內容是什么呢,有的人可能認為是Hello World,有的人會認為是World,實質上運算的結果是World,
      因為+運算符優先級是高于條件運算符的,這時候添加括號會讓你的代碼變得更加易于閱讀。第二,保持對技術的敬畏吧,最怕的就是你覺得你都會了,其實你一無所知。

      以上就是JavaScript運算符優先級的詳細分析(附示例)的詳細內容,更多請關注php中文網其它相關文章!


      網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




      關鍵詞:JavaScript運算符優先級的詳細區分(附示例)




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产