带你入门 JavaScript ES6 (三)

刘福发布于2019-08-21 18:35 / 3248人阅读

摘要：上一章我们学习了遍历和扩展字符语法。本章我们主要学习中的箭头函数箭头函数更准确来说叫箭头函数表达式。箭头函数余普通函数功能相同，但语法差别比较大。

带你入门 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带你飞

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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