JavaScript中箭頭函數的使用（Arrow F

JavaScript中箭頭函數的使用（Arrow Function）

頭函數（Arrow Function）是ES6新增的特性，在網上看了一篇個人博客的講解，寫的例子里面居然還有聲明的變量沒有被使用，卻還在招攬學生做IT培訓，真的誤人子弟。

一個簡單的例子

為了說明箭頭函數，我們先寫個簡單的代碼：

const domain_list=[
  'www.abot.cn',
  'www.tseo.cn',
  'www.weiduke.com',
  'yanyubao.tseo.cn'
];

console.log(domain_list.map(domain_item=> domain_item.length));
// expected output: Array [11, 11, 15, 16]

關于JavaScript中map函數的使用，這里不贅述，不懂的抓緊惡補。

重點看第8行。

domain_item=> domain_item.length

等價于以下寫法：

function(domain_item) {return domain_item.length}

所以以上代碼的ES5的寫法為：

const domain_list=[
  'www.abot.cn',
  'www.tseo.cn',
  'www.weiduke.com',
  'yanyubao.tseo.cn'
];

console.log(domain_list.map(function(domain_item) {
	return domain_item.length;
}));
// expected output: Array [11, 11, 15, 16]

箭頭函數基本語法

總結總結一下，ES6的基本語法

(param1, param2, …, paramN)=> { statements }
(param1, param2, …, paramN)=> expression
//相當于：(param1, param2, …, paramN)=>{ return expression; }
// 當只有一個參數時，圓括號是可選的：
(singleParam)=> { statements }
singleParam=> { statements }
// 沒有參數的函數應該寫成一對圓括號。
()=> { statements }

對照以上的例子，什么是箭頭函數應該一目了然了。

箭頭函數沒有單獨的this值

this一般是這樣被定義的：

如果是該函數是一個對象的方法，則它的this指針指向這個對象
在嚴格模式下的函數調用下，this指向undefined
如果是該函數是一個構造函數，this指針指向一個新的對象

this的弊端

function Person() {
  // Person() 構造函數定義 `this`作為它自己的實例.
  this.age=0;

  setInterval(function growUp() {
    // 在非嚴格模式, growUp()函數定義 `this`作為全局對象,
    // 與在 Person()構造函數中定義的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p=new Person();

在ECMAScript 3/5中，通過將this值分配給封閉的變量，可以解決this問題。

function Person() {
  var that=this;
  that.age=0;

  setInterval(function growUp() {
    // 回調引用的是`that`變量, 其值是預期的對象.
    that.age++;
  }, 1000);
}

或者，可以創建綁定函數，以便將預先分配的this值傳遞到綁定的目標函數（上述示例中的growUp()函數）。

箭頭函數的解決方案

箭頭函數不會創建自己的this,它只會從自己的作用域鏈的上一層繼承this。因此，在下面的代碼中，傳遞給setInterval的函數內的this與封閉函數中的this值相同：

function Person(){
  this.age=0;

  setInterval(()=> {
    this.age++; // |this| 正確地指向 p 實例
  }, 1000);
}

var p=new Person();

如果不理解以上代碼，那么再強調一遍：因為箭頭函數沒有this，所以setInterval函數中的箭頭函數的this，只能是他的上一級函數的this。如果說到這樣還不理解，建議惡補語文。

高級語法和進階

箭頭函數的進階知識，包括：

1、高級語言規則
2、嚴格模式下的使用
3、call和apply的調用

感興趣的小伙伴可以自個去研究。

們經常看到許多網站或者H5的動畫都做成了整屏切換的形式，為提高用戶體驗，會在首屏頁面下方放上一個動態的向下箭頭來提示用戶切換至下一屏。

動態箭頭的效果圖如下：

那么這種效果是如何實現的呢？

其實非常簡單，在CSS3中提供了animation屬性，專門用于動畫。要使用這個屬性，需要先了解@keyframes的創建規則，在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

在這個動畫中，我們能夠看出在整個動畫中改變的是箭頭的位置，所以我們在創建動畫時，只需要給定箭頭的起始位置，利用animation讓他動起來就可以了。

接下來，我們一步一步完成。

1、首先找到你所需要的箭頭圖片，將他利用定位的方式放在首屏的底部。

a)html代碼（將圖片以背景或者插入圖片的形式放入標簽內，demo以背景形式展示）

b)css代碼（利用定位將箭頭放在首屏的底部適當位置，網站中大部分情況會進行左右居中）

2、然后進行動畫創建，最簡單的方式就是只給定初始的以及結束的css樣式即可。

css 代碼

標注出來的為動畫的自定義名稱，可以根據你的動畫行為來定義。

0%為初始狀態，即剛開始動畫時。

100%為結束狀態，即動畫進行到100%時。

動畫改變了箭頭的底部位置，由距離底部80像素變到了距離底部0像素。

3、接下來利用animation屬性讓他具有動畫效果

css代碼：

第一個參數表示你所使用的動畫的名稱（即我們創建的動畫的動畫名稱），

第二個參數表示動畫完成的時間（即由0%到100%所用的時間），

第三個參數表示動畫執行的次數（可以為任意數字，infinite表示規定動畫無限次播放），因此造成了一個動態的箭頭的視覺效果。

通過以上三個步驟即可完成這個簡單的動畫效果，很多的動畫效果都可以通過創建動畫的方式來實現。

原文地址北京市盛世陽光文化傳播有限責任公司：http://www.gonet.com.cn/webduirshow-140.html

我們深入研究一下箭頭函數。

箭頭函數不僅僅是編寫簡潔代碼的“捷徑”。它還具有非常特殊且有用的特性。

JavaScript 充滿了我們需要編寫在其他地方執行的小函數的情況。

例如：

arr.forEach(func) —— forEach 對每個數組元素都執行 func。
setTimeout(func) —— func 由內建調度器執行。
……還有更多。

JavaScript 的精髓在于創建一個函數并將其傳遞到某個地方。

在這樣的函數中，我們通常不想離開當前上下文。這就是箭頭函數的主戰場啦。

一、箭頭函數沒有 “this”

正如我們在對象方法，"this" 一章中所學到的，箭頭函數沒有 this。如果訪問 this，則會從外部獲取。

例如，我們可以使用它在對象方法內部進行迭代：

let group={
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student=> alert(this.title + ': ' + student)
    );
  }
};

group.showList();

這里 forEach 中使用了箭頭函數，所以其中的 this.title 其實和外部方法 showList 的完全一樣。那就是：group.title。

如果我們使用正常的函數，則會出現錯誤：

let group={
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(function(student) {
      // Error: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

報錯是因為 forEach 運行它里面的這個函數，但是這個函數的 this 為默認值 this=undefined，因此就出現了嘗試訪問 undefined.title 的情況。

但箭頭函數就沒事，因為它們沒有 this。

不能對箭頭函數進行 new 操作

不具有 this 自然也就意味著另一個限制：箭頭函數不能用作構造器（constructor）。不能用 new 調用它們。

箭頭函數 VS bind

箭頭函數 => 和使用 .bind(this) 調用的常規函數之間有細微的差別：

.bind(this) 創建了一個該函數的“綁定版本”。
箭頭函數 => 沒有創建任何綁定。箭頭函數只是沒有 this。this 的查找與常規變量的搜索方式完全相同：在外部詞法環境中查找。

二、箭頭函數沒有 “arguments”

箭頭函數也沒有 arguments 變量。

當我們需要使用當前的 this 和 arguments 轉發一個調用時，這對裝飾器（decorators）來說非常有用。

例如，defer(f, ms) 獲得了一個函數，并返回一個包裝器，該包裝器將調用延遲 ms 毫秒：

function defer(f, ms) {
  return function() {
    setTimeout(()=> f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('Hello, ' + who);
}

let sayHiDeferred=defer(sayHi, 2000);
sayHiDeferred("John"); // 2 秒后顯示：Hello, John

不用箭頭函數的話，可以這么寫：

function defer(f, ms) {
  return function(...args) {
    let ctx=this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}

在這里，我們必須創建額外的變量 args 和 ctx，以便 setTimeout 內部的函數可以獲取它們。

三、總結

箭頭函數：

沒有 this
沒有 arguments
不能使用 new 進行調用
它們也沒有 super，但目前我們還沒有學到它。我們將在類繼承一章中學習它。

這是因為，箭頭函數是針對那些沒有自己的“上下文”，但在當前上下文中起作用的短代碼的。并且箭頭函數確實在這種使用場景中大放異彩。

在線咨詢

上一篇：基于Python+Django+MySQL+HTML
下一篇：CSS入門，看這篇就夠了！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商