<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>

          es6 箭頭函數的使用總結,帶你深入理解js中的箭頭函數

          時間:?2017-11-07閱讀:?1358標簽:?es6

          箭頭函數是ES6中非常重要的性特性。它最顯著的作用就是:更簡短的函數,并且不綁定this,arguments等屬性。它最適合用于非方法函數,并且它們不能用作構造函數。

          1.箭頭函數的短語法,當單條語句返回時,可省略{}和return
          var f = v => v;
          // 等同于
          var f = function(v) {
              return v;
          }
          
          var f = () => 5;
          // 等同于
          var f = function() {
              return 5;
          }
          
          var sum = (num1, num2) => num1 + num2;
          // 等同于
          var sum = function(num1, num2) {
              return num1 + num2;
          }

          ?注意的是:上面的寫法都是匿名函數來使用的,因此:箭頭函數作為匿名函數,是不能作為構造函數的,不能使用new


          2.不綁定this

          在箭頭函數出現之前,每個新定義的函數都有它自己的 this值(在構造函數的情況下是一個新對象,在嚴格模式的函數調用中為 undefined,如果該函數被稱為“對象方法”則為基礎對象等)。This被證明是令人厭煩的面向對象風格的編程。箭頭函數會捕獲其所在上下文的 this 值,作為自己的 this 值。例如:

          function fn(){
            this.num = 0;
            let s=setInterval(() => {
              if(this.num<10){
              	this.num++;
              }else{
              	console.log(this.num);
              	clearInterval(s);
              }
            }, 1000);
          }
          var f=new fn();//10秒后輸出10

          上面的例子可以看出,箭頭功能不會創建自己的this;它使用封閉執行上下文的this值。setInterval的函數內的this與封閉函數中的this值相同。如果在一個對象中使用的時候,箭頭函數中的this就為對象默認環境中的window對象了。例如:

          var obj = {
            a: 10,
            b: () => {
              console.log(this.a); //undefined
              console.log(this); //window
            },
            c:function() {
              console.log(this.a); //10
              console.log(this); //obj{...}
            }
          }
          obj.b(); 
          obj.c();


          3.使用call()和apply()調用

          由于 this 已經在詞法層面完成了綁定,通過 call() 或 apply() 方法調用一個函數時,只是傳入了參數而已,對 this 并沒有什么影響。

          var adder = {
            base : 1,
            add : function(a) {
              var f = v => v + this.base;
              return f(a);
            },
            addThruCall: function(a) {
              var f = v => v + this.base;
              var b = {
                base : 2
              };       
              return f.call(b, a);
            }
          };
          console.log(adder.add(1));         // 輸出 2
          console.log(adder.addThruCall(1)); // 仍然輸出 2(而不是3 )



          4.不綁定arguments

          箭頭函數不綁定arguments,取而代之用rest參數…解決,例如:

          var fn = (a)=>{
            console.log(arguments); 
          }
          fn(1)
          //ReferenceError: arguments is not defined

          我們應該用rest參數的形式

          var fn = (...a)=>{ //...a即為rest參數
            console.log(a);
          }
          fn(2)//[2]


          5.使用prototype屬性

          箭頭函數沒有原型屬性

          var fn = () => {};
          console.log(fn.prototype); // undefined


          說明:

          1.箭頭函數的this永遠指向其上下文的 this。

          2.箭頭函數不能使用new來為作為構造器。

          3.箭頭函數沒有prototype屬性。

          4.箭頭函數不綁定自己的this,arguments,super或 new.target。

          5.箭頭函數不能當做Generator(生成器)函數。

          6.不能使用yield關鍵字(除非是嵌套在允許使用的函數內)。  

          7.箭頭函數不能換行。


          站長推薦

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

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

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

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

          24個常用的es6方法

          本文主要介紹 24 中 es6 方法,這些方法都挺實用的,本本請記好,時不時翻出來看看。如何檢查元素是否具有指定的類?頁面DOM里的每個節點上都有一個classList對象,程序員可以使用里面的方法新增、刪除、修改節點上的CSS類。

          javascript es6是什么?

          ES6就是ECMAScript6是新版本JavaScript語言的標準。已經在2015年6月正式發布了。Mozilla公司將在這個標準的基礎上,推出JavaScript 2.0。ECMAScript6在保證向下兼容的前提下

          ES6 Promise用法詳解

          Promise是一個構造函數,接受一個參數(Function),并且該參數接受兩個參數resolve和reject(分別表示異步操作執行成功后的回調函數、執行失敗后的回調函數)

          commonjs 與 es6相關Module語法的區別

          export 在接口名字與模塊內部的變量之間建立了一一對應的關系,export輸出的接口; export的寫法,除了像上面這樣,還有另外一種。export命令除了輸出變量,還可以輸出函數或類(class)。

          ES6箭頭函數(Arrow Functions)

          箭頭函數中的 this 指向的是定義時的對象,而不是使用時的對象;由于 箭頭函數沒有自己的this指針,通過 call() 或 apply() 方法調用一個函數時,只能傳遞參數,他們的第一個參數會被忽略

          es6 class

          構造函數的prototype屬性,在 ES6 的“類”上面繼續存在。事實上,類的所有方法都定義在類的prototype屬性上面。

          es6之迭代器

          迭代器是被設計專用于迭代的對象,帶有特定接口。所有的迭代器對象都擁有 next() 方法,會返回一個結果對象。該結果對象有兩個屬性:對應下一個值的 value ,以及一個布爾類型的 done

          ES6 - let、const、var的區別

          為了使JavaScript語言可以用來編寫復雜的大型應用程序,成為企業級開發語言,ECMAScript 6.0(簡稱ES6)在標準中添加了很多新的特性。我們將用幾篇文章總結一下ES6標準中一些常用的新特性。本片文章主要講解ES6中的let、const命令,并區分其與var命令的區別。

          ES6新的變量聲明方式

          在ES6之前,JavaScript是沒有塊級作用域的,如果在塊內使用var聲明一個變量,它在代碼塊外面仍舊是可見的。ES6規范給開發者帶來了塊級作用域,let和const都添加了塊級作用域,使得JS更嚴謹和規范。

          es6數據變更同步到視圖層

          數據變更同步到視圖層有一個很重要的東西就是Proxy,Proxy的作用就是可以隱藏真正的對象,而用戶去修改它的代理對象.Proxy可以監聽數據的變化,例如

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

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

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

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