JS 箭头函数与普通函数

JS 箭头函数与普通函数

一、 写法

// 1 普通函数
function (item) {
    return item + 1
}

// 2 箭头函数
(item) => {
    return item + 1
}

// 箭头函数只有一个参数时可简写
item => item + 1

二、特性

普通函数

①普通函数可以命名

②普通函数可以是函数表达式，也可以是函数声明

例如：我们可以用new来创建构造函数的实例

function obj() {
    this.name = "test"
}
const o = new Obj()

③普通函数自带 arguments 对象，函数体中可直接使用 arguments.length 获取参数数量

function test() {
    return arguments.length
}
console.log("传入了" + test(1, 2, 3) + "个参数")    //传入了3个参数

箭头函数

①箭头函数不能命名，但可以声明一个变量为箭头函数，以此达到复用效果

②箭头函数不是构造函数，无法通过new来创建实例

③箭头函数中无 arguments 对象，但可以利用普通函数的 arguments

function test() {
    return () => arguments.length
}
let getArgLength = test(1, 2, 3)
// 此时 getArgLength 为 test 中 return 的箭头函数，我们直接调用 getArgLength() 同样可以拿到参数数量
console.log("传入了" + getArgLength() + "个参数")  //传入了3个参数

三、this指向（重要）

函数中 this 具有4种绑定规则：

​ ①默认绑定

​ ②隐式绑定

​ ③显式绑定

​ ④new 绑定

下面通过一个简单的实例来体现规则①默认绑定两种函数的差异：

let a = 0
function test() {
    console.log(this)   // obj
    
    function fn() {
        console.log(this)   // window
    }
    fn1()
    
    let fn2 = () => {
        console.log(this)   // obj
    }
    fn2()
}
let obj = {
    a: 1,
    test: test
}
obj.test()

​ 我们通过简单的案例可以看出，普通函数中的 this 与其调用方式有很大联系，而箭头函数中的 this 总是指向父作用域中 的可用this。

四、总结

	写法	new	this指向	call、bind、apply
普通函数	function() {}	有原型，可以new	根据调用方式动态变化	可以修改this
箭头函数	() => {}	不可以new	沿着父作用域链寻找可用this	不可以修改this

相关文章：
this指向问题：https://blog.csdn.net/CxZzzE/article/details/125563367?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125563367%22%2C%22source%22%3A%22CxZzzE%22%7D&ctrtid=ZEQ4z
作用域闭包：https://blog.csdn.net/CxZzzE/article/details/125563456?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125563456%22%2C%22source%22%3A%22CxZzzE%22%7D&ctrtid=67z7E