国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

帶你入門 JavaScript ES6 (三)

劉福 / 3246人閱讀

摘要:上一章我們學(xué)習(xí)了遍歷和擴(kuò)展字符語法。本章我們主要學(xué)習(xí)中的箭頭函數(shù)箭頭函數(shù)更準(zhǔn)確來說叫箭頭函數(shù)表達(dá)式。箭頭函數(shù)余普通函數(shù)功能相同,但語法差別比較大。

帶你入門 JavaScript ES6 (三)
本文同步帶你入門 JavaScript ES6 (三),轉(zhuǎn)載請(qǐng)注明出處。

上一章我們學(xué)習(xí)了 for of 遍歷和擴(kuò)展字符語法。本章我們主要學(xué)習(xí) ES6 中的箭頭函數(shù)

箭頭函數(shù)

更準(zhǔn)確來說叫 箭頭函數(shù)表達(dá)式。箭頭函數(shù)余普通函數(shù)功能相同,但語法差別比較大。

看下例子:

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

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

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

console.log(info2)// ["Name", "Age", "Address"]
1. 箭頭函數(shù)語法

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

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

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

總結(jié)下簡單的箭頭函數(shù)的語法定義:

step1: 刪除普通函數(shù)的關(guān)鍵詞 function

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

step2: 刪除 圓括號(hào)()

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

step3: 刪除 花括號(hào){},及關(guān)鍵詞 return

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

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

word => word.slice(0, 1).toUpperCase() + word.slice(1)
2. 合法的箭頭函數(shù)定義
// 1 無參數(shù)的箭頭函數(shù)
let f = () => console.log("箭頭函數(shù)")
console.log(f())

//*************************************
// 2. 一個(gè)參數(shù)的箭頭函數(shù),參數(shù)的圓括號(hào)部分可選

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

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

//*************************************
// 3 多個(gè)參數(shù)的箭頭函數(shù),參數(shù)一定用圓括號(hào)包裹

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

//*************************************
// 4 單行函數(shù)體與多行函數(shù)體的箭頭函數(shù)

//  4.1 單行函數(shù)體將上面的示例

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

    return [name, age]
}

console.log(f("huliuqing", 18))
3. this 值 3.1 普通函數(shù)中的 this 值

① this 指向新的對(duì)象實(shí)例
當(dāng)使用 new 關(guān)鍵詞實(shí)例化對(duì)象時(shí), this 執(zhí)行對(duì)象實(shí)例

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

var p = new Person()

② this 指向被調(diào)用對(duì)象
當(dāng)使用 call/apply 調(diào)用對(duì)象時(shí),this 指向被調(diào)用對(duì)象

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

let person = {
    name: "huliuqing",
}

getName.call(person);// huliuqing

③ this 指向上下文的調(diào)用對(duì)象
如果函數(shù)由對(duì)象實(shí)例調(diào)用,此時(shí) this 指向?qū)ο髮?shí)例

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

Person.getName()//Person 即為上下文環(huán)境,因而輸出 huliuqing

④ this 指向全局對(duì)象或undefined
當(dāng)調(diào)用函數(shù)時(shí)無上下文環(huán)境,在嚴(yán)格模式下 this 指向 undefined

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

var name = "huliuqing"

getName()// this 指向全局對(duì)象 Window,因而次數(shù)輸出 huliuqing

嚴(yán)格模式下 this 為 undefined

function getName(){
    "use strict"

    console.log(this)
}

var name = "huliuqing"

getName()// undefined
3.2 箭頭函數(shù)中的 this 值

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

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

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

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

參考資料:
MDN 箭頭函數(shù)

this 原理

ES6 In Depth: Arrow functions

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/90615.html

相關(guān)文章

  • 帶你入門 JavaScript ES6 (五) 集合

    摘要:一概述集合是引入的新的內(nèi)置對(duì)象類型,其特點(diǎn)同數(shù)學(xué)意義的集合,即集合內(nèi)所有元素不重復(fù)元素唯一。數(shù)組集合對(duì)比數(shù)組和集合,數(shù)組可以加入重復(fù)數(shù)據(jù),而集合的所有元素是唯一的不允許重復(fù)。因此,適合臨時(shí)存放一組對(duì)象,以及存放跟對(duì)象綁定的信息。 本文同步帶你入門 帶你入門 JavaScript ES6 (五) 集合,轉(zhuǎn)載請(qǐng)注明出處。 前面我們學(xué)習(xí)了: for of 變量和擴(kuò)展語法 塊作用域變量和解構(gòu)...

    BetaRabbit 評(píng)論0 收藏0
  • 帶你入門 JavaScript ES6 (四)

    摘要:方法如示例中定義的方法靜態(tài)方法使用關(guān)鍵字修飾的方法,允許通過類名直接調(diào)用靜態(tài)方法而無需實(shí)例化。 本文同步帶你入門 JavaScript ES6 (四),轉(zhuǎn)載請(qǐng)注明出處。 前面我們學(xué)習(xí)了: for of 變量和擴(kuò)展語法 塊作用域變量和解構(gòu) 箭頭函數(shù) 本章我們將學(xué)習(xí) ES6 中的 類,了解類基本定義和繼承相關(guān)知識(shí) 一、概述 ES6 中的 類 是基于原型的繼承語法糖,本質(zhì)上它是一個(gè) fu...

    he_xd 評(píng)論0 收藏0
  • 帶你入門 JavaScript ES6 (一)

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

    lindroid 評(píng)論0 收藏0
  • 帶你入門 JavaScript ES6 (二)

    摘要:上一篇學(xué)習(xí)下一代語法一,我們學(xué)習(xí)了關(guān)于塊作用域變量或常量聲明和語法新的字符串拼接語法模版字面量數(shù)組元素或?qū)ο笤氐慕鈽?gòu)賦值和對(duì)象字面量簡寫的相關(guān)知識(shí)。這便是擴(kuò)展運(yùn)算符的用途之一。 本文同步 帶你入門 JavaScript ES6 (二),轉(zhuǎn)載請(qǐng)注明出處。 上一篇學(xué)習(xí)下一代 JavaScript 語法: ES6 (一),我們學(xué)習(xí)了關(guān)于塊作用域變量或常量聲明 let 和 const 語法、...

    chanthuang 評(píng)論0 收藏0
  • 帶你玩轉(zhuǎn) JavaScript ES6 (六) - Map 映射

    摘要:初始化申明一個(gè)設(shè)置和獲取值使用設(shè)置新值或更新值申明設(shè)置值張三豐張三豐重復(fù)設(shè)置值如果鍵值存在則新值替換舊值張三豐使用獲取值,如果獲取的不存在返回分別獲取判斷是否存在使用判斷給定是否存在映射內(nèi)。 本文同步帶你入門 帶你玩轉(zhuǎn) JavaScript ES6 (六) - Map 映射,轉(zhuǎn)載請(qǐng)注明出處。 本章我們講學(xué)習(xí) ES6 中的 Map(映射)。上一章節(jié)我們學(xué)習(xí)了 [Set(集合)]()的相關(guān)...

    acrazing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<