上一篇文章主要整理了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