阅读 40

箭头函数浅析

1. 前言

箭头函数是ES6标准新增的函数,将原函数的“function”关键字和函数名都删掉,并使用“=>”连接参数列表和函数体。

2. 箭头函数

2.1 箭头函数写法注意事项

2.1.1 箭头函数只能给一个变量进行赋值,不能单独存在

示例:

let func = (x, y) => (x, y) => x + y
复制代码

箭头函数只能给一个变量赋值,单独的“(x, y) => (x, y) => x + y”不符合规范。

2.1.2 如果参数只有一个,可以不加括号,如果参数多个或者0个,需要添加括号

示例:

let func1 = x => y => x + y
let func2 = (x, y) => x + y
复制代码

2.1.3 如果返回一个对象,需要用一个小括号将对象包围起来,这样是为了与函数体做区分

示例:

let func = ()=>{x:1}     //  错误
let func = ()=>({x:1})   //  正确
复制代码

2.2 箭头函数的this

箭头函数的this由它的外层(函数或全局)作用域来决定,并且this的指向无法通过call,bind,apply等函数改变。
示例:

let obj1 = {
    x: 1,
    func1: function() {
        console.log(this)
    }
}
let obj2 = {
    x: 2,
    func2: () => {
        console.log(this)
    }
}
obj1.func1()
obj2.func2()
复制代码

输出:

clipboard.png
func1的this指向obj1对象
func2的this指向由它的外层作用域obj2的this决定
如下示例,func2输出的this指向为obj

let obj = {
    x: 2,
    obj1: function() {
        let func2 = () => {
            console.log(this)
        }
        return func2
    }
}
obj.obj1()()
复制代码

输出为:

clipboard.png

func2的外层作用域为obj1,this指向为obj1的上一层this,也就是obj
使用call改变func1和func2的指向,func1的this变成obj,而func2的this仍然指向window

let obj = {
    x: 0
}
let obj1 = {
    x: 1,
    func1: function() {
        console.log(this)
    }
}
let obj2 = {
    x: 2,
    func2: () => {
        console.log(this)
    }
}
obj1.func1.call(obj)
obj2.func2.call(obj)
复制代码

输出:

clipboard.png

2.3 箭头函数中没有arguments(类数组)

类数组
对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为“类数组对象”。
类数组对象拥有一个特性:可以在类数组对象上应用数组的操作方法,但并不是数组的所有方法都能被类型化数组所支持(如 push 和 pop)
示例:

let value={
    5:'a',
    3:'b',
    1:'c',
    2:'d',
    length: 3
}
console.log(Array.prototype.join.call(value))
复制代码

输出为:,c,d
说明:value长度为3,从下标0开始计算,value等同于数组[,'c','d']
arguments
对应于传递给函数的参数的类数组对象
示例:

function func1(a, b, c) {
    console.log(arguments)
}
let func2 = (a, b, c)=>{
    console.log(arguments)
}
func1(1, 2, 3)
func2(1, 2, 3)
复制代码

输出:

clipboard.png

2.4 箭头函数不能被new

箭头函数没有prototype,所以不能用new创建对象。

function func1(a, b, c) {
}
let func2 = (a, b, c)=>{
}
console.dir(func1)
console.dir(func2)
复制代码

输出:

clipboard.png

文章分类
前端
文章标签