es6函数的拓展与箭头函数

1、函数的默认值：

    function fn (a=1,b=2) {
    	console.log(a) //10
    	console.log(b)	//2
    }

    fn(10)

可以看到，当没有传第二个参数的时候，b的值为默认值2。

var age = 2

function fn (func = () => {console.log(age)}) {
	var age = 1
	func() //2
}

fn()

值得一提的是，设置默认值的时候，在函数进行声明初始化时，会形成一个单独的作用域。
可以看到，fn的默认参数是一个函数，函数里打印age变量，调用fn时，参数形成一个单独的作用域，在这个作用域里面，
并没有找到age变量，所以打印出了全局的age变量。

function fn (...arr) {
	console.log(arr)
}

fn(1,2,3,4) //[1, 2, 3, 4]

使用…运算符，会将传入的所有值都包装进…运算符后面的变量中，变量的值为一个数组。

    function fn (a,...arr) {
    	console.log(arr) //[2, 3, 4]
    	console.log(a) //1
    }
    
    fn(1,2,3,4)
    
    function fn (...arr,a) {
    	console.log(arr) 
    	console.log(a) 
    }

fn(1,2,3,4) 报错 注意：...arr后面不能再有参数

2、箭头函数

2.1、箭头函数的写法

var f = name => name;

console.log(f("a")) //a

上面的代码可以看成是这样

function f (name) {
	return name;
}

2.2、关于箭头函数的圆括号和花括号

var f = () => name; //不需要参数的时候，必须要加圆括号
var f = (a,b) => name; //参数有多个的时候，必须加圆括号

var f = () => ({name:1}) //返回一个对象的时候，如果不写花括号，需要使用括号，否则会报错。

var f = () => {
	var name = 1;
	return name;
} //执行的语句多余一条的话，需要使用花括号。

2.3 箭头函数的this

普通函数中拥有this指针，但箭头函数中没有this，因此，当在箭头函数中使用this的时候，其引用的是箭头函数定义时所在的作用域,
或者说，是引用外部作用域中的this

function fn () {

	setTimeout(() => console.log(this) ,0)
}

var obj = {name:"我是小明"};

fn.call(obj) //{name: "我是小明"}

上面的代码，其实可以看成是这样：

扫描二维码关注公众号，回复： 4085129 查看本文章

function fn () {
	var that = this;
	setTimeout(() => console.log(that) ,0)
}

var obj = {name:"我是小明"};

fn.call(obj) //{name: "我是小明"}

这里，箭头函数中的this引用的其实是fn函数中的this，而fn函数中的this在运行时指向了obj。
如果是使用普通函数的话，this会指向window，因为普通函数拥有自己的this

由于箭头函数没有自己的this，所以当然也不能用call，apply，bind方法去改变this的值，因为this根本不存在。
同样的，由于没有this，箭头函数不能作为构造函数，使用new操作符对箭头函数进行调用将会报错。

例子1：

var obj = {
	age : 1,
	fn : () => {
		console.log(this)
	}
}

var fn = () => {
	console.log(this.age)
}

function func () {
    console.log(this.age)		
}

fn.call(obj) //undefined
obj.fn() //window

func.call(obj) //1

例子2：

function fn () {
	console.log(this.age) //1
	return () => {
		console.log(this.age) //1
		return () => {
			console.log(this.age) //1
		}
	}
}

var obj = {
	age : 1
}

var f = fn.call(obj)

由于内层都是箭头函数，没有自己的this，因此其实this用的是最外层的fn函数中的this

2.5、箭头函数没有arguments对象。

var f = () => console.log(arguments)
f() //报错

function fn (a) {
	
	var f = () => console.log(arguments[0]) //1 根据作用域链，检索到的arguments为fn的arguments对象。
	f() //报错
}

fn(1)

es6函数的拓展与箭头函数

猜你喜欢