帶你入門 JavaScript ES6 (三)

劉福發布于2019-08-21 18:35 / 3251人閱讀

摘要：上一章我們學習了遍歷和擴展字符語法。本章我們主要學習中的箭頭函數箭頭函數更準確來說叫箭頭函數表達式。箭頭函數余普通函數功能相同，但語法差別比較大。

帶你入門 JavaScript ES6 (三)

本文同步帶你入門 JavaScript ES6 (三)，轉載請注明出處。

上一章我們學習了 for of 遍歷和擴展字符語法。本章我們主要學習 ES6 中的箭頭函數

箭頭函數

更準確來說叫 箭頭函數表達式。箭頭函數余普通函數功能相同，但語法差別比較大。

看下例子:

// 普通函數
let info = ["name", "age", "address"].map(function (word){
    // 將首字母轉換成大寫
    return word.slice(0, 1).toUpperCase() + word.slice(1)
})

console.log(info)// ["Name", "Age", "Address"]

// 箭頭函數
let info2 = ["name", "age", "address"].map(word => word.slice(0, 1).toUpperCase() + word.slice(1))

console.log(info2)// ["Name", "Age", "Address"]

1. 箭頭函數語法

多帶帶將上例中的函數部分摘取出來，箭頭函數相比于普通函數少了 function(){} 這部分語法：

// 普通函數
function (word){
    // 將首字母轉換成大寫
    return word.slice(0, 1).toUpperCase() + word.slice(1)
}

// 箭頭函數
word => word.slice(0, 1).toUpperCase() + word.slice(1)

總結下簡單的箭頭函數的語法定義：

step1: 刪除普通函數的關鍵詞 function

(word){
    return word.slice(0, 1).toUpperCase() + word.slice(1)
}

step2: 刪除 圓括號()

word{
    return word.slice(0, 1).toUpperCase() + word.slice(1)
}

step3: 刪除 花括號{}，及關鍵詞 return

word word.slice(0, 1).toUpperCase() + word.slice(1)

step4: 在參數列表與方法體之間加入箭頭(=>)

word => word.slice(0, 1).toUpperCase() + word.slice(1)

2. 合法的箭頭函數定義

// 1 無參數的箭頭函數
let f = () => console.log("箭頭函數")
console.log(f())

//*************************************
// 2. 一個參數的箭頭函數，參數的圓括號部分可選

// 2.1 帶圓括號
let f = (name) => console.log(name)
console.log(f("huliuqing"))

// 2.2 不帶圓括號
let f = name => console.log(name)
console.log(f("huliuqing"))

//*************************************
// 3 多個參數的箭頭函數,參數一定用圓括號包裹

let f = (name, age) => console.log(`${name} : ${age}`)
console.log(f("huliuqing", 18))

//*************************************
// 4 單行函數體與多行函數體的箭頭函數

//  4.1 單行函數體將上面的示例

//  4.2 多行函數體將上面的示例
let f = (name, age) => {
    name = `hello ${name}`
    age  = age + 1

    return [name, age]
}

console.log(f("huliuqing", 18))

3. this 值 3.1 普通函數中的 this 值

① this 指向新的對象實例
當使用 new 關鍵詞實例化對象時， this 執行對象實例

function Person() {
  console.log(this)
}

var p = new Person()

② this 指向被調用對象
當使用 call/apply 調用對象時，this 指向被調用對象

function getName() {
    // console.log(this)
    console.log(this.name)
}

let person = {
    name: "huliuqing",
}

getName.call(person);// huliuqing

③ this 指向上下文的調用對象
如果函數由對象實例調用，此時 this 指向對象實例

let Person = {
    name: "huliuqing",
    getName: function(){
        console.log(this.name)
    }
}

Person.getName()//Person 即為上下文環境，因而輸出 huliuqing

④ this 指向全局對象或undefined
當調用函數時無上下文環境，在嚴格模式下 this 指向 undefined

function getName(){
    //console.log(this)
    console.log(this.name)
}

var name = "huliuqing"

getName()// this 指向全局對象 Window，因而次數輸出 huliuqing

嚴格模式下 this 為 undefined

function getName(){
    "use strict"

    console.log(this)
}

var name = "huliuqing"

getName()// undefined

3.2 箭頭函數中的 this 值

對于普通函數而言， this 的值是有函數如何被調用決定的，所以普通函數 this 的值比較隨性，難以捕捉。為了解決這個問題，在箭頭函數中 this 的值在任何情況下都是基于函數周圍上下文，即函數的的 this 和函數外的 this 值一樣

// 普通函數在 timeout 中的 name
var Person = {
    name: "huliuqing",
    getName: function(){
        setTimeout(function(){
            console.log(this.name)
        }, 1000)
    }
}
Person.getName();// undefined

// 將 setTimeout 匿名函數轉換成箭頭函數后，匿名函數內的 this 值同 getName 函數的上下文一致(即 Person)
var Person = {
    name: "huliuqing",
    getName: function(){
        setTimeout(() => console.log(this.name)
        , 1000)
    }
}
Person.getName();// huliuqing

// 將 getName 函數轉換成箭頭函數，getName 的 this 值依據上下文為 Window
var Person = {
    name: "huliuqing",
    getName: () =>{
        console.log(this)
        setTimeout(() => console.log(this.name)
        , 1000)
    }
}
Person.getName();// 空，什么都沒有

參考資料:
MDN 箭頭函數

this 原理

ES6 In Depth: Arrow functions

云服務器 GPU云服務器 ES6入門三分鐘入門 javascript入門帶你學c帶你飛

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90615.html

帶你入門 JavaScript ES6 (五) 集合

摘要：一概述集合是引入的新的內置對象類型，其特點同數學意義的集合，即集合內所有元素不重復元素唯一。數組集合對比數組和集合，數組可以加入重復數據，而集合的所有元素是唯一的不允許重復。因此，適合臨時存放一組對象，以及存放跟對象綁定的信息。本文同步帶你入門帶你入門 JavaScript ES6 (五) 集合，轉載請注明出處。前面我們學習了： for of 變量和擴展語法塊作用域變量和解構...

BetaRabbit 2019-08-26 17:04 評論0 收藏0
帶你入門 JavaScript ES6 (四)

摘要：方法如示例中定義的方法靜態方法使用關鍵字修飾的方法，允許通過類名直接調用靜態方法而無需實例化。本文同步帶你入門 JavaScript ES6 (四)，轉載請注明出處。前面我們學習了： for of 變量和擴展語法塊作用域變量和解構箭頭函數本章我們將學習 ES6 中的類，了解類基本定義和繼承相關知識一、概述 ES6 中的類是基于原型的繼承語法糖，本質上它是一個 fu...

he_xd 2019-08-21 18:40 評論0 收藏0
帶你入門 JavaScript ES6 (一)

摘要：是國際組織于年月日發布的第六版，正式名為通常被成為或。二模版字面量提供一種簡單實現表達式嵌套的字符串字面量操作，簡而言之就是能夠以簡單的方法實現字符串拼接操作。本文同步帶你入門 JavaScript ES6 (一)，轉載請注明出處。 ES6: 是 ECMA國際組織于 2015 年 6 月 17 日發布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 評論0 收藏0
帶你入門 JavaScript ES6 (二)

摘要：上一篇學習下一代語法一，我們學習了關于塊作用域變量或常量聲明和語法新的字符串拼接語法模版字面量數組元素或對象元素的解構賦值和對象字面量簡寫的相關知識。這便是擴展運算符的用途之一。本文同步帶你入門 JavaScript ES6 (二)，轉載請注明出處。上一篇學習下一代 JavaScript 語法: ES6 (一)，我們學習了關于塊作用域變量或常量聲明 let 和 const 語法、...

chanthuang 2019-08-21 18:26 評論0 收藏0
帶你玩轉 JavaScript ES6 (六) - Map 映射

摘要：初始化申明一個設置和獲取值使用設置新值或更新值申明設置值張三豐張三豐重復設置值如果鍵值存在則新值替換舊值張三豐使用獲取值，如果獲取的不存在返回分別獲取判斷是否存在使用判斷給定是否存在映射內。本文同步帶你入門帶你玩轉 JavaScript ES6 (六) - Map 映射，轉載請注明出處。本章我們講學習 ES6 中的 Map(映射)。上一章節我們學習了 [Set(集合)]()的相關...

acrazing 2019-08-22 14:02 評論0 收藏0