【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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,686评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,668评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,160评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,736评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,847评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,043评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,129评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,872评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,318评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2赞 351