欢迎光临~湖南智能应用科技有限公司-hniat.com
语言选择: 中文版 ∷  英文版

基础知识

JS 箭头函数与普通函数

JS 箭头函数与普通函数

一、 写法

// 1 普通函数 function (item) { return item + 1 } // 2 箭头函数 (item) => { return item + 1 } // 箭头函数只有一个参数时可简写 item => item + 1 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

二、特性

普通函数

①普通函数可以命名

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

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

function obj() { this.name = "test" } const o = new Obj() 
  • 1
  • 2
  • 3
  • 4

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

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

箭头函数

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

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

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

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

三、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() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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

四、总结

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

联系我们

联系人:徐经理

手机:13907330718

电话:0731-22222718

邮箱:hniatcom@163.com

地址: 湖南省株洲市石峰区联诚路79号轨道智谷2号倒班房6楼603室

关闭
用手机扫描二维码关闭
二维码