ES6函数细节干货（包括arguments，new.target，箭头函数）

前言

在正式接触ES6函数之前，相比大家对ES3.1中的函数都有所了解，那么从下面博客ES6的知识干货中跟ES3.1做对比，这样才能更好的理解。

函数

ES6函数新增特性
1.ES6参数可以加默认值(new)
eg:通过传默认值就可以达到想要的效果

function fun(a,b=10,c=20){
	return a+b+c;
		console.log( fun(undefined,undefined,30) );//60
		console.log( fun(1,2,3) )//6
		console.log( fun(30) )//60,将默认值写在后面，可以直接传一个数
		console.log( fun(10,undefined,30) )//50
		console.log( fun(10,null,30) )   //40,null在数学中，默认的为0，不要传递null
}

2.ES6可以传递表达式(new)但× 不能传递语句 ×
eg
ES3.1创建一个元素 插入到某个元素中

		//ES3.1创建一个元素  插入到某个元素中 
		// name 创建的标签   大多数为div
		// container  需要往哪个元素中插入   大多数为container
		// content   内容

		function createElement(name,container,content){
			const ele = document.createElement(name);
			if(content){
				ele.innerHTML = content
			}
			container.appendChild(ele)
		}
	createElement("div",document.getElementById("container"),"sdfsdfsd")
	//成功,在页面中插入div内容为sdfsdfs	

ES6创建一个元素 插入到某个元素中

//ES6创建一个元素  插入到某个元素中
							   				//ES6可以在参数中传递表达式
		function createElement(name = "div",container = document.getElementById("container"),content){
			const ele = document.createElement(name);
			if(content){
				ele.innerHTML = content
			}
			container.appendChild(ele)
		} 
	createElement(undefined,undefined,"sdfsdfsd")//成功,在页面中插入div内容为sdfsdfsd

//通过例子的对比我门发现在ES6中只需传递表达式就可完成代码代码效果，减少ES3.1中操作，提升效率

函数>arguments

arguments在严格模式中arguments和函数的形参不存在关系，没有对应的映射关系
！ 只要给函数加上了参数默认值，该函数会自动变成严格模式 ！
！形参和let，const一样，有自己的作用域，根据声明的顺序会产生生临时性死区 ！

//已自动开启严格模式
function test(a,b=10){
			console.log("arguments",arguments[0],arguments[1])//arguments 1 2
			console.log('a',a,"b",b)//a 1 b 2
			a = 5;
			console.log("arguments",arguments[0],arguments[1])//arguments 1 2
			console.log('a',a,"b",b)//a 5 b 2
		}
		test(1,2)					   

函数>new.target(new)

	//ES6以前
	function Person(firstName,lastName){
	if(!(this instanceof Person)){
		throw new Error("该函数必须使用new调用")//这样就可以在直接调用下提示错误
												//但这样是无法完全避免的
	}
		this.firstName = firstName;
		this.lastName = lastName;
		this.fullName = `${firstName} ${lastName}`
	}
//面试点：new调用和直接调用结果
//new调用
const p1 = new Person("张","三")
console.log(p1)//成功调用
//直接调用
const p2 =  Person("张","三")
console.log(p2)//失败undefined
//通过call改变指向依然会undefined
const p3 = Person.call(p1,"张","三")
console.log(p3)

//ES6
//使用new.target就可以真正避免此问题
if(new.target === undefined){//如果没有使用new 关键字调用函数，则返回undefined
	throw new Error("该函数必须使用new调用")//如果使用了new调用，则返回的是函数的本身
}

函数>箭头函数

箭头函数是一个函数表达式，理论上任何使用函数表达式的地方都可以改成箭头函数
(参数1，参数2…)=>{函数体}

this指向问题
1.对象调用函数，this指向对象
2.直接调用函数，this指向window
3.如果使用了new关键字，this指向新创建的对象
4.如果使用apply，call，bind this指向绑定的数据
5.如果是DOM事件函数，this指向事件源

箭头函数语法

// 箭头函数的写法
		// 简写
		// 1.如果参数只有一个，可以省略小括号
		// 参数 => {}
		const print = num => {
			console.log(num)
		}
		print(1000)
		// 2.如果箭头函数只有一条返回语句，可以省略花括号，可以省略return
		// 参数 => 返回值
		const isOdd = function(num){
			return num % 2 !== 0;
		}
		const isOdd = num => {
			return num % 2 !== 0;
		}
		const isOdd = num => num % 2 !== 0;
		console.log(isOdd(3))
		console.log(isOdd(4))
		// 2.1 如果返回值是一个对象的时候
		const obj = (a,b) => 
			({//只有花括号就会认为成函数体就会报错//把返回值变成表达式的形式就ok
				a : a,
				b : b
			})
		console.log( obj(1,2) )
		//面试点
		// 1.箭头函数中没有this,argument,new.target,如果要强行使用，则指向函数外层对应的this,argument,new.target
		// 2.箭头函数没有原型，所有说占用空间非常小，不能当成构造函数来使用
		console.log(func,func.prototype)   
		console.dir(func)
		// 应用场景
		// 1.临时使用的函数，并不会刻意的去调用
			// 1.异步的处理函数
			// 2.事件的处理
		// 2.继续去沿用外层的this
		// 3.对象的属性不要去用箭头函数，除非是特别的需求
		// 4.数组方法的时候，保证代码的简洁
		const arr = [1,2,89,45,123,54];
		const result = arr.map(num => num*2);
		console.log(result)