ES6---箭头函数

本文深入探讨了JavaScript中的箭头函数与普通函数的区别,包括this指向、构造函数、arguments对象及yield命令的差异。同时,介绍了函数的新特性,如默认参数值、rest参数的使用,以及如何在实际编程中应用这些新特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 箭头函数和普通函数的区别

  • this的指向问题
    箭头函数本身是没有this的,它的this是从它作用域链的上一层继承来的,并且无法通过call和apply改变this的指向
var user = {
	name: 'xxxxx',
	fn: function() {
		var obj = {
			name: 'yyy'
		}
		var f = () => this.name
		return f.call(obj)	
	}
}
user.fn() // xxxxx
var name = 'window'
var obj = {
	name: 'obj',
	methods: () => {
		console.log(this.name)
	},
	fn: function(cb) {
		cb()
	}
}
obj.fn1 = function() {
	obj.fn(() => {console.log(this.name)})
}
var fn1 = obj.fn1
obj.methods()
obj.fn(() => {console.log(this.name)})
fn1()
obj.fn1()
⇒ window window window obj
  • 不能作为构造函数,没有prototype属性
  • 没有arguments对象
// 借助扩展运算符
var foo = (...arguments) => {
	console.log(arguments)
}
foo(1,2,3)
  • 不能使用yield命令,因此箭头函数不能作Generator函数

2. 函数新扩展的方法

  • 给函数的参数指定默认值
function f(y=1) {
	// 以前的写法
	y = y || 1
}
function m1({x=0,y=0} = {}) {
	return [x,y]
}
function m2({x,y} = {x:0, y:0}) {
	return [x, y]
}
console.log(m1()) // [0,0]
console.log(m2()) // [0,0]
console.log(m1({x: 3})) //[3,0]
console.log(m2({x: 3})) //[3,undefined]
  • 通过rest参数获取函数的多余参数
function fn(x, ...y) {
	console.log(x)  //1
	console.lg(...y) //2 3 4
}
fn(1,2,3,4)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值