上一篇文章主要整理了ES6函数的形参相关的内容，结合上篇文章的基础内容，本章再扩展一下函数的其他内容
在原书中，本章还讲了展开运算符，但是我觉得展开运算符放在解构赋值里讲更合适，所以这里就不做笔记了。
增强的Function构造函数
构造函数接受字符串形式的参数，分别为函数的参数及函数体，请看示例：
var add = new Function('first','second','return first+ second');
console.log(add(1,1)); // 2
/* 以上形式就是构造函数，其等价于我们常写的：*/
// function add(first,second){
// return first + second;
// }
构造函数也支持我们上一篇文章讲的默认参数和不定参数，语法是一样的：
var add = new Function('first','second=first','return first+second');
console.log(add(1)); // 2
console.log(add(1,1)); //2
name属性
ES6中所有的函数都有一个name属性，接下来我们来演示一下各种情况下的name属性值：
function nonAnonymous(){ /* do something */ }
console.log(nonAnonymous.name); // nonAnonymous
/* 声明函数的时候，函数名一般就是函数的name值 */
var anonymous = function(){ /* do something */ }
console.log(anonymous.name); // anonymous
/* 匿名函数表达式的name值是该函数被赋值的变量名 */
var otherAnonymous = function otherNonAnonymous(){ /* do something */ }
console.log(otherAnonymous.name); // otherNonAnonymous
/* 函数表达式自身的名字比函数被赋值的变量的权重高 */
var person = {
get getPersonName(){
return '欧阳不乖';
}
sayName : function(){
console.log(this.name)
}
}
console.log(person.getPersonName.name); // get getPersonName
/* person.getPersonName的name值取自对象字面量，但是它实际上是一个getter函数，所以它的名字前有一个get，同理setter函数前也有一个set */
console.log(person.sayName.name); // sayName
/* person.sayName的name值取自对象字面量 */
var bindFunction = function(){ /* do something */ }
console.log(bindFunction.bind().name); // bound bindFunction
/* 通过bind()函数创建的函数，其名称将带有bound前缀 */
console.log((new Function()).name); // anonymous
/* 构造函数创建的函数的name值是“anonymous”，表示匿名的 */
从以上各种示例可以看出，函数的name属性不一定引用同名变量，它只是协助调试用的额外信息，所以不能使用name属性的值来获取对于函数的引用
明确函数的多重用途
function Person(name){
this.name = name
}
var person = new Person('欧阳不乖');
var notAPerson = Person('欧阳不乖');
console.log(person); // [Object object] Person {name: "欧阳不乖"}
console.log(notAPerson); // 'undefined'
以上两个例子的区别在于是否通过new关键字调用Person函数。
JS函数有两个不同的内部方法：[[Call]]和[[Construct]]。
当通过new关键字调用函数时，执行的是[[Construct]]函数，它负责创建一个通常被称作实例的新对象，然后再执行函数体，将this绑定到实例上；
如果不通过new关键字调用函数，则执行[[Call]]函数，从而直接执行代码中的函数体。
具有[[Construct]]方法的函数被统称为构造函数。
不是所有函数都有[[Construct]]方法，因此不是所有函数都可以通过new关键字来调用
判断函数被调用的方法
在ES5中想确定一个函数是否通过new关键字被调用，或者说判断该函数是否作为构造函数被调用，最流行的方法是使用instanceof：
function Person(name){
if(this instanceof Person){
this.name = name
}else{
throw new Error('必须通过new关键字来调用Person')
}
}
var person = new Person('欧阳不乖'); //正常执行
var notAPerson = Person('欧阳不乖'); //抛出错误：必须通过new关键字来调用Person
以上代码通过判断this是否为构造函数的实例来决定是否执行，但是有一个特例可以不依赖new关键字将this绑定到Person实例上:
function Person(name){
if(this instanceof Person){
this.name = name
}else{
throw new Error('必须通过new关键字来调用Person')
}
}
var person = new Person('欧阳不乖'); //正常执行
var notAPerson = Person.call(person,'欧阳不乖'); // undefined 并不会抛出错误
调用Person.call()时将实例person传入作为第一个参数，相当于在Person函数里将thius设为了person实例。对于函数本身，无法区分是通过Person.call()还是new关键字调用得到的Person实例。
为了解决判断函数是否通过new关键字调用的问题，ES6中提供了new.target这个元属性。
元属性是指非对象的属性，其可以提供非对象目标的补充信息，例如new。当调用函数的[[Construct]]方法时，new.target被赋值为new操作符的目标，通常是新创建的对象实例，也就是函数体内this的构造函数；如果调用[[Call]]方法，则new.target的值为undefined。
有了这个元属性，可以通过检测new.target是否被定义过来安全地检测一个函数是否通过new关键字调用的：
function Person(name){
if(typeof new.target !=='undefined'){
this.name = name
}else{
throw new Error('必须通过new关键字来调用Person')
}
}
var person = new Person('欧阳不乖'); //正常执行
var notAPerson = Person.call(person,'欧阳不乖'); //抛出错误：必须通过new关键字来调用Person
元属性new.target必须在函数内使用
块级函数
在ES5中，在代码块中声明一个块级函数是语法错误，但是浏览器基本都支持这个特性，可是每个浏览器的支持又有一些不一样，也就是我们常说的兼容性问题，ES6中完善了这个问题，可以在代码块中声明函数，同样也只能在代码块中访问该函数，一旦代码块结束，该函数即被销毁：
/*ES6严格模式下*/
if( true ){
console.log(typeof blockFunction); // function
function blockFunction(){
// do something
}
}
console.log(typeof blockFunction); // undefined
块级函数与let函数表达式类似，一旦执行过程流出了代码块，函数定义立即被移除。二者的区别是块级函数会被提升至代码块的顶部，而let不会，如果将函数赋值给let定义的变量，提前调用就会出现临时死区的问题。
在ES6的非严格模式下，代码块中的函数会被提升至外围函数或是全局作用域的顶部。
箭头函数概要
在ES6中，最有趣的就是箭头函数了。
基础语法：()=>{}
与传统JS函数的区别：
- 没有this、super、arguments和new.target绑定：箭头函数中的这些值由外围最近一层非箭头函数决定；
- 不能通过new关键字调用：箭头函数没有[[Construct]]，如果用new关键字调用程序会抛出错误；
- 没有原型：因为不能用new关键字调用，因而没有构造原型的需求，所以箭头函数不存在prototype这个属性；
- 不可改变this的绑定：函数内部的this值不可被改变，在函数的声生命周期内始终保持一致；
- 不支持arguments对象：箭头函数没有arguments绑定，所以必须通过命名参数和不定参数这两种形式访问函数的参数；
-
不支持重复的命名参数：不论在严格模式还是非严格模式下，箭头函数都不支持重复的命名参数，而传统函数只有在严格模式下才不能有重复的命名参数。
注意：箭头函数的name属性和其他函数的规则相同
箭头函数详解
- 简单模式：单一参数，返回简单结果
let reflect = value => value ;
//相当于传统函数
let reflect = funcion(value){
return value;
}
/*
* 当箭头函数只有一个参数时，可以直接写参数名，箭头紧随其后，箭头右侧的表达式被求值后立即返回
* 即使没有明确的return这个返回语句，箭头函数也可以返回传入的第一个参数
*/
- 多参数模式：两个或两个以上的参数，要在参数的两侧添加一对小括号：
let sum = (num1,num2) => num1 + num2 ;
//相当于传统函数
let sum = funcion(num1,num2){
return num1 + num2 ;
}
- 无参数模式:如果箭头函数没有参数，也要写一组小括号
let getName = ()=>'欧阳不乖' ;
// 相当于传统函数
let getName = function(){
return '欧阳不乖' ;
}
- 复杂表达式模式：
let sayHello = (name)=>{
const word = `Hello ${name},Welcome to ES6 world!`
return {
name : name,
word : word
};
}
//相当于传统函数
let sayHello = function(name){
const word = `Hello ${name},Welcome to ES6 world!`
return {
name : name,
word : word
};
}
- 箭头函数返回对象字面量
let getObject = id =>({ id : id, name : '欧阳不乖'});
// 相当于传统函数
let getObject = function(){
retrun {
id : id ,
name : '欧阳不乖'
}
}
/* 将对象字面量包裹在小括号里是为了将其与函数体区分开来 */
- 立即执行的箭头函数:只要将箭头函数包裹在小括号里
((name)=>console.log(name))('欧阳不乖')
/*
* 注意： 小括号只包裹箭头函数的定义，没有包含('欧阳不乖')，这一点与传统函数不同
* 传统函数定义的立即执行函数表达式既可以用小括号包括函数体，也可以额外包括函数调用的部分
*/
- 箭头函数没有this
箭头函数中没有this绑定，必须通过查找作用域链来决定其值。如果箭头函数被非箭头函数包含，则this绑定的是最近一层非箭头函数的this；否则，this的值会被设置为全局对象：
(()=>{console.log(this)})() //window
/* 箭头函数自执行，其作用域是全局的window，则this指向全局的window */
(function(){
(()=>{console.log(this)})()
}).call(Math)
// Math
/*
* 箭头函数外包裹一层匿名自执行函数，函数使用call进行调用，将this绑定在了Math函数上
* 此时，内层自执行的箭头函数的this指向了外层call指向的Math
*/
- 箭头函数没有arguments绑定
箭头函数没有自己的arguments对象，且未来无论函数在哪个上下文中执行，箭头函数始终可以访问外围函数的arguments对象。
function argFunc(){
return ()=>arguments[0];
}
let result = argFunc(5);
console.log(result()); // 5
- 箭头函数的辨别方法
箭头函数和传统函数一样，可以用typeof和instanceof操作符进行识别
const arrFunc = ( a, b ) => a+b
console.log( typeof arrFunc ); // function
console.log( arrFunc instanceof Function); // true
并且箭头函数在调用时也可以使用call、apply和bind方法，但是箭头函数的this
值并不受这些方法的影响。
let sum = ( num1, num2 ) => num1+num2;
console.log(sum.call(null,1,2)); // 3
console.log(sum.apply(null,[1,2])); // 3
网友评论