2. 函数

ES6

2.1 默认参数

1、ECMAScript模拟默认参数的写法：

function try1(num1,num2,num3){
    num1 = (typeof num1 !== "undefined")? num1:value1;//如果num1不是undefined，也就是传入了参数，那么num1的值为传入的值，如果是undefined，那么num1的值是value1（默认值）
}

2、ECMAScript6中的默认参数的写法：

function try1(num1=value1,num2=value2,num3=value3){
    dosomething;
}

也就是先初始化参数，掉用函数的时候，在没有传入参数的情况下，直接使用默认的值，而在为参数传入值的情况下就会使用传入的值。
而且传入的参数是按照顺序来匹配的，并且没有数据类型的限制，也就是说，在创建函数的时候默认参数设置成字符串，但是实际上调用函数的时候传入的参数的数据类型可以是别的，比如数字

function try1(num1="string",num2=200,num3=function(){}){
    console.log(num1);
    console.log(num2);
    console.log(num3);
}
try1(123,"abc",[]);
//123; abc;[]

3、默认参数对arguments的影响
设置默认参数后arguments.length的值是实际上传入的参数的数量

function try1(num1="string",num2=200,num3=function(){}){
    console.log(arguments.length);//1
    console.log(arguments);//[123, callee: (...), Symbol(Symbol.iterator): ƒ]
    console.log(num1);//123
    console.log(num2);//abc
    console.log(num3);//ƒ (){}
}
try1(123);

4、默认参数表达式
默认参数可以是函数，通过函数调用可以实现更丰富的变化，而且可以引用函数可以引用默认参数，但是在引用默认参数的时候，只允许引用前面的参数，不能引用后面的参数

function getValue(num){
    return num;
}
function try1(num1="string",num2= getValue(num1)){
    console.log(num1);
    console.log(num1 + num2);
}
try1(123);//246

5、不定参数
语法：

fcuntion functionName(num1,...keys){}

在命名参数前面加上“...”，可以将命名参数变成一个数组，但是命名不定参数有两个限制：

• 每个函数最多只能命名一个不定参数而且不定参数只能放所有参数的末尾
• 不定参数不能用于对象字面量setter中

var object = {
    name:"mike",
    age:1
}
function pick(num1,...keys){
    var result = new Object();
    for (var i = 0; i < keys.length; i++) {
        result[keys[i]] = num1[keys[i]];
    }
    console.log(result);
}
pick(object,"name","age");//{name: "mike", age: 1}

2.2 Function构造函数

2.3 展开运算符

展开运算符可以实现将一个数组拆散成各自独立的参数并且传入函数
使用方法：将数组传入函数中并且在数组前面加上“...”

function getMax(num){
    console.log(Math.max(...num));
}
getMax([1,2,3,4,5]);//5
ES5实现：
function getMax(num){
    console.log(Math.max.apply(Math,num));
}
getMax([1,2,3,4,5]);

作用域

在设置了函数的默认参数后，函数进行声明初始化之后参数就会形成一个单独的作用域。初始化结束之后这个作用域就会消失。

var x = 1;
function fun(x,y=x){
    console.log(y);
}
fun(2);//2
调用函数的时候参数x和y形成一个作用域，而对x进行初始化之后x的值是2，之后再对y进行赋值
var x = 1;
function fun(x,y=x){
    console.log(y);
}
fun();//undefined
调用fun的时候经历下面的过程：
let x = undefined;
y=x=undefined;
console.log(y);
这是因为let声明的函数会被先放在临时死区里面，而var初始化的函数是被提升到全局，而参数只能调用临时死区的参数
function f(y = x) {
  let x = 2;
  console.log(y);
}
f() // ReferenceError: x is not defined
函数内部的参数无法影响到默认参数形成的作用域，所以报错

2.4 name属性

在ES6中每个函数都有自己的名字，而函数名的确定规则：

• 如果函数本身声明的时候有命名名字，函数名就是声明时的名字
• 在没有声明名字的情况下，如果函数有指向变量，那么函数的名字是变量的名字
• getter和setter函数在函数名前面加上get和set
• 通过bind()函数创建的函数，带有“bound”前缀，通过Function构造函数创建的函数，带有“anonymous”前缀

function fun1(){
    console.log(fun1.name);
}
fun1();//fun1
var fun2 = function(){
    console.log(fun2.name);
}
fun2();//fun2
var fun3 = function fun(){
    console.log(fun3.name);
}
fun3();//fun

函数的多种用途

JavaScript中函数可以通过直接调用来执行函数，也可以通过new来创建一个对象。
函数内部的两个方法：

• [[Call]]：没有通过new调用函数时执行，直接执行函数的主体
• [[Construct]]：通过new调用函数的时候执行，创建一个实例对象，然后再执行函数，将this绑定到实例上。

function fun1(name){
  this.name = name;
  return this.name;
}
 var a = new fun1("mike");
 var b = fun1("bob");
console.log(a);//fun1 {name: "mike"}
console.log(b);//bob

元属性new.target

用于判断函数是否是使用new关键字来调用。当调用[[Construct]]方法的时候，new.target被复制为操作符的目标，通常是新创建的对象实例，而如果调用[[Call]]方法则new.target的值为undefined。

块级函数

ES5中在严格模式下在代码块中声明函数是一种错误，但是在ES6中可以再代码块中声明函数，在严格模式下，声明的函数只能在代码块中被访问，而在非严格模式下，代码块中声明的函数会被提升到全局作用域，此外，使用let创建的函数不会被提升，其他情况下会被提升到代码块的顶部或者是作用域的顶部

function fun1(number){
    "use strict";
    console.log(typeof try1);//undefined
  if (number>10) {
    console.log(typeof try1);//function
    function try1(){
        console.log(number);
    }
    try1();
  }
}
fun1(11);
///////
function fun1(number){
  if (number>10) {
    console.log(typeof try1);
    function try1(){
        console.log(number);
    }
    try1();
  }
  console.log(typeof try1);//function
}
fun1(11);

箭头函数

箭头函数的特点：

• 没有this、super、arguments和new.target绑定，这些值由外围最近一层非箭头函数决定
• 不能通过new关键字调用，箭头函数没有[[Constructor]]方法
• 没有原型，不存在prototype属性
• 不可以改变this的绑定，函数内部的this值不能够改变，在函数生命周期内始终保持一致
• 不支持arguments对象，只能通过命名参数和不定参数访问函数的参数
• 不支持重复的命名参数，

1、箭头函数的写法

• 只有一个参数。只有一个参数时可以直接将参数放在赋值号的右边，后面加上箭头和函数内容

let sum1 = value=>value;
console.log(sum1(1));
////////
等同于：
var sum1= function(value){
   return value;
};
console.log(sum1(1));

• 0个或者是多个参数。如果是0个或者是多个参数，那么将参数用括号括起来

let sum2 = (num1,num2)=> num1+num2;
let sun3 = ()=> "mike";

• 代码块的语句多于一句，将函数内容有花括号括起来

let sum4 = (num1,num2)=>{return num1+num2; return num1*num2};

• 箭头函数中返回对象字面量

直接返回对象字面量
let sum5 = (age,name)=>({age:age,name:name});
非直接返回对象字面量：
let sum5 = (age,name) =>{
        console.log( "teacher");
     return {age:age, name:name};
 };

• 创建立即执行函数，将箭头函数包裹在小括号里面

let sum5 = ((age,name) =>{
        console.log( "teacher");
     return {age:age, name:name};
 })(10,"mike");

没有this绑定

箭头函数必须通过查找作用域链来决定this值，如果箭头函数被非箭头函数包含，则this绑定的是最后一层非箭头函数的this，否则，this的值会被设置成undefined。

let pageHandler = {
                id: "1234",
                init: function() {
                    document.addEventListener("click", event => this.doSomething(event.type))//此处this是pageHandler这个对象
            },
            doSomething: function(type) {
                console.log("Handle" + type + this.id);
            }
    };
    pageHandler.init();

箭头函数不是构造函数，因此不能使用new操作符来创建新的函数

箭头函数和数组

箭头函数的语法简介性适合于数组方法合用

let result = array.sort((a,b)=>return a-b)

箭头函数没有用arguments绑定

箭头函数本身不具备arguments属性，但是其可以方位外层的函数的arguments对象