ES6 函数及拓展
一、函数
- 函数是一个为执行特定任务而设计，可以重复使用的代码块。
1. 创建函数的三种方式
函数声明方式：
function 函数名称() { 函数体; }函数表达式方式：
var 变量名称 = function() { 函数体; };
- 函数表达式方式创建的函数是没有名称的函数
- 变量中存储的是对函数的引用
- 函数声明方式和函数表达式方式的区别，函数声明方式定义的函数可以在定义之前调用该函数，但是函数表达式方式定义的函数，不可以在定义之前调用。因为函数声明方式定义的函数有函数声明提升操作，而函数表达式方式定义的操作没有函数声明提升操作，只有变量声明提升操作
利用Function构造方法创建函数：
var 变量名称 = new Function(‘参数1’， ‘参数2’， ‘参数3’…);构造方法Function中的参数可以有多个，那么前面的参数表示函数的形参，最后一个参数表示函数体。
调用方式为：变量名称(实参1，实参2，实参3…);
注意：这种方式定义的函数也不可以在定义之前调用，因为它也只有变量声明提升操作
2. 函数调用
三种调用函数的方法： 直接调用函数、以call()方法调用函数以及以apply（）方法调用函数。
//函数声明
function fn(){
console.log(1);
}
//1.函数的直接调用
fn();
//函数在事件中的调用，当事件发生时（当用户点击按钮时）
document.onclick = fn;
//2.call()方法调用函数
fn.call(window,12,32);
//3.apply（）方法调用函数
fn.apply(window,[12,32]);
apply()和call()的对应关系如下：
函数引用.call(调用者，参数一，参数二......)=函数引用.apply(调用者，[参数一，参数二......])
call()要把所有参数都列出；
apply()需要把参数放入数组 一次性传入。
二、JS中的三种特殊函数
1. 匿名函数：没有函数名称的函数，匿名函数可以和事件相结合
HTML元素.on事件名称 = function() {函数体 };
<!-- 在页面中创建一个button按钮，当点击该按钮时，在控制台生成验证码，由字母、数字构成的5位的字符串 -->
<button>按钮</button> //定义html函数
<script>
//获取页面中的button
var btn=document.querySelector('button');
btn.onclick=function(){
var str= "0123456789" +
"abcdefghijklmnopqrstuvwxyz" +
"ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var str1="";
for(var i=0;i<5;i++){
var s=str[parseInt(Math.random()*(str.length-1)+1)];
str1=str1+s;
}
console.log(str1);
};
</script>
2. 回调函数：一个函数被当做另一个函数的参数，如数组的排序函数
var arr = [1, 0, 7, 12, 3, 2, 15];
//数组的排序
arr.sort(function(a, b) {
return a - b;
});
console.log(arr);
3. 匿名自执行函数：没有名称且不需要手动调用的函数
- 无参无返回值的匿名自执行函数
(function() {
函数体;
})();- 有参无返回值的匿名自执行函数
(function(形参1,形参2,形参3...) {
函数体;
})(实参1,实参2,实参3...);- 有参有返回值的匿名自执行函数
var 变量名称 = (function(形参1，形参2，形参3...) {
函数体;
return 返回值;
})(实参1，实参2，实参3...);
注意：匿名自执行函数通常用来创建块级作用域
<!--// 定义一个匿名自执行函数，功能是在控制台打印一个hello-->
<script>
(function(){
console.log("hello");
})();
</script>
<!--// 定义一个匿名自执行函数，求两个数的和-->
<script>
(function(a,b){
console.log(a+b);
})(1,2);
</script>
<!--// 定义一个匿名自执行函数，功能是求两个数的和，将和作为返回值返回-->
<script>
(function(a,b){
var sum=a+b;
console.log(sum);
return sum;
})(1,3);
</script>
三、函数的参数
1. 函数传参
获取元素，最好从父级元素获取，全部从document中获取，可能会出现混乱。
- 形参：形式上的参数——给函数声明一个参数；
- 实参：实际的参数——在函数调用时给形参赋的值
function func(形参1,形参2){
//函数执行代码
}
func(实参1,实参2);//调用时传参
2. 函数的不定参（arguments 关键词）
-
不定参（可变参）使用关键字：
arguments，代表所有实参的集合（类似数组，有下标，没有数组的操作方法）。 - 通过下标获取参数的每一位；通过length获取实参的个数；
使用场景：购物车商品累计。事先不知道用户买多少商品
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>可变参（不定参）：arguments</title>
</head>
<body>
<script>
//arguments 代表所有实参的集合（类数组），可以通过下标获取各个实参，通过length获取集合长度
function args(){
console.log(arguments);
console.log("arguments的各个参数为：");
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
args(23,45,999,10.90,"can","不定参");
</script>
</body>
</html>
四、作用域
1. 作用域：数据起作用的范围（某条数据可以在什么范围内使用）
2. 作用域的分类：
全局作用域：
通过
var或function声明在全局（声明在任意函数之外和代码块之外）中的数据，在全局的任意地方都可以调用或修改（即全局变量）和在window下的属性。
- 在 Web 浏览器中，全局执行环境被认为是
window对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的。- 在 NODE 环境中，全局执行环境是
global对象。局部作用域：
函数作用域：声明在函数内部的某个数据（var，function，参数）,就只能在函数内部使用（函数的局部作用域）
块级作用域（ES6新增）
- 块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。
3. 作用域链：JS中数据的查找规则。
当代码在一个环境中执行时，会创建变量对象的一个作用域链（作用域形成的链条）
- 作用域链的前端，始终都是当前执行的代码所在环境的变量对象
- 作用域链中的下一个对象来自于外部环境，而在下一个变量对象则来自下一个外部环境，一直到全局执行环境
- 全局执行环境的变量对象始终都是作用域链上的最后一个对象
例子：
内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数。
var n = 10; function outer(){ function inner(){ function center(){ console.log(n); } center(); } inner(); var n = 15; } outer(); //=> undefined如上面函数的执行，形成一个私有作用域，形参和当前私有作用域中声明的变量都是私有变量，保存在内部的一个变量对象中，其下一个外部环境可能是函数，也就包含了函数的内部变量对象，直到全局作用域。
作用域链总结：
当在内部函数中，需要访问一个变量的时候，首先会访问函数本身的变量对象，是否有这个变量，如果没有，那么会继续沿作用域链往上查找，直到全局作用域。如果在某个变量对象中找到则使用该变量对象中的变量值。（向上查找）
由于变量的查找是沿着作用域链来实现的，所以也称作用域链为变量查找的机制。
这个机制也说明了访问局部变量要比访问全局变量更快，因为中间的查找过程更短。但是 JavaScript 引擎在优化标识符查询方面做得很好，因此这个差别可以忽略不计。
六、ES6新增的函数拓展
1. 函数参数的默认值
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
//例子1
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
//例子2
function Point(x = 0, y = 0) {
this.x = x;
this.y = y;
}
const p = new Point();
p // { x: 0, y: 0 }
2. rest参数
- ES6引入rest参数（形式为
...变量名)，用于获取函数的多余参数，这样就不需要使用arguments对象了。 - rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中(实际上是扩展运算符的逆运算)
function add(...val){
let sum = 0
for(var v of val){
sum += v
}
return sum
}
add(2,5,3) //10
12345678
arguments对象不是数组，而是一个类数组对象，所以为了使用数组方法，必须使用Array.prototype.slice.call先将其转为数组。rest参数就不存在这个问题了，他就是一个真正的数组。
3. 严格模式
- 从ES5开始，函数内部可以设定为严格模式
function todo(a,b){
'use strict'
//...
}
1234
- ES6做了一点修改，规定只要函数参数使用了默认值，解构赋值，或者扩展运算符，那么函数内部就不能显示设定为严格模式，否则会报错
//报错
function todo (a, b, c = 1){
use 'strict'
//...
}
4. name属性
- 函数的
name属性，返回该函数的函数名function foo() {} foo.name // 'foo' 12注意：
ES6对这个属性的行为做出了一些修改，如果将一个匿名函数赋值给一个变量，ES5的
name属性，会返回空字符串，而ES6的name属性会返回实际的函数名var fn = function () {} //es5 fn.name // '' //es6 fn.name // 'fn' 1234567如果将一个具名函数赋值给一个变量，ES5和ES6的
name属性都会返回这个具名函数原本的名字const bar = function baz() {} //es5 bar.name // 'baz' //es6 bar.name // 'baz' 12345 Function`构造函数返回的函数实例，name属性的值为`anonymous (new Function).name //'anonymous' 1
bind返回的函数，name属性值会加上bound前缀function foo () {} foo.bind({}).name // 'bound foo' (function(){}).bind({}).name // 'bound'
5. 箭头函数
基本用法：
ES6允许使用“箭头”（
=>）定义函数var fn = val => val //等同于 var fn = function(val){ return val } 123456
- 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分
var fn = () => 5 //等同于 var fn = function() { return 5 } var sum = (num1, num2) => num1 + num2 //等同于 var sum = function(num1,num2){ return num1 + num2 } 1234567891011
- 如果箭头函数的代码块部分多于一条语句，就需要使用大括号将他们括起来
var fn = (a,b) { if(a>b){ return a }else{ return b } } 1234567由于大括号被解释成代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上小括号没否则会报错
//报错 let getTem = id => { id: id, name：'Temp' } //不报错 let getTem = id => ({ id: id, name: 'Temp' })
使用注意点：
箭头函数由几个使用注意点：
（1）函数体内的this对象，就是箭头函数定义时所在的对象，而不是使用时所在的对象
（2）不可以当做构造函数，也就是说，不能使用new命令，否则会报错
（3）不可以使用arguments对象，箭头函数内部的arguments对象不保存实参，可以使用rest参数来代替
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数
6. 尾调用优化
什么是尾调用？
尾调用（Tail Call）是函数式编程的一个重要概念，就是指某个函数的最后一步是调用另一个函数
function fn(x){
return gn(x)
}
123
上面代码中，函数fn的最后一步是调用函数gn,这就叫尾调用
尾调用优化
注意只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则会就无法进行尾调用优化
function addone(a){
var one = 1
function inner(b){
return b + one
}
return inner(a)
}
