【ES6 笔记】函数扩展

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

你可能感兴趣的:(【ES6 笔记】函数扩展)