函数参数的默认值

作用域

var x = ;

function f(x, y = x) {
console.log(y);
} f() //
let x = ;

function f(y = x) {
let x = ;
console.log(y);
} f() //
var x = ;
function foo(x, y = function() { x = ; }) {
var x = ;
y();
console.log(x);
} foo() //
x //
var x = ;
function foo(x, y = function() { x = ; }) {
x = ;
y();
console.log(x);
} foo() //
x //

参数变量是默认声明的,所以不能用letconst再次声明。

使用参数默认值时,函数不能有同名参数

应用

function throwIfMissing() {
throw new Error('Missing parameter');
} function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided;
} foo()
// Error: Missing parameter

上面代码的foo函数,如果调用的时候没有参数,就会调用默认值throwIfMissing函数,从而抛出一个错误。

2.rest 参数

ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。

rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
} var a = [];

注意,rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。

3.箭头函数

x => x * x

上面的箭头函数相当于:

function (x) {
return x * x;
}

如果参数不是一个,就需要用括号()括起来:

// 两个参数:
(x, y) => x * x + y * y // 无参数:
() => 3.14 // 可变参数:
(x, y, ...rest) => {
var i, sum = x + y;
for (i=; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}

如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:

// SyntaxError:
x => { foo: x }

因为和函数体的{ ... }有语法冲突,所以要改为:

// ok:
x => ({ foo: x })

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

回顾前面的例子,由于JavaScript函数对this绑定的错误处理,下面的例子无法得到预期结果:

var obj = {
birth: ,
getAge: function () {
var b = this.birth; //
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}

现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj

var obj = {
birth: ,
getAge: function () {
var b = this.birth; //
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); //

使用注意点

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

function Timer() {
this.s1 = ;
this.s2 = ;
// 箭头函数
setInterval(() => this.s1++, );
// 普通函数
setInterval(function () {
this.s2++;
}, );
} var timer = new Timer(); setTimeout(() => console.log('s1: ', timer.s1), );
setTimeout(() => console.log('s2: ', timer.s2), );
// s1: 3
// s2: 0

上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域(即Timer函数)

,后者的this指向运行时所在的作用域(即全局对象)。所以,3100毫秒之后,timer.s1被更新了3次,而timer.s2一次都没更新。

另外,由于箭头函数没有自己的this,所以当然也就不能用call()apply()bind()这些方法去改变this的指向。

4.绑定 this

函数绑定运算符是并排的两个冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,

作为上下文环境(即this对象),绑定到右边的函数上面。

foo::bar;
// 等同于
bar.bind(foo); foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments); const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
return obj::hasOwnProperty(key);
}

5.尾调用优化

尾调用(Tail Call)是函数式编程的一个重要概念,本身非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。

function f(x) {
if (x > 0) {
return m(x)
}
return n(x);
}

尾递归

function factorial(n) {
if (n === ) return ;
return n * factorial(n - );
} factorial() //

上面代码是一个阶乘函数,计算n的阶乘,最多需要保存n个调用记录,复杂度 O(n) 。如果改写成尾递归,只保留一个调用记录,复杂度 O(1) 。

function factorial(n, total) {
if (n === ) return total;
return factorial(n - , n * total);
} factorial(, ) //

严格模式

ES6 的尾调用优化只在严格模式下开启,正常模式是无效的。

这是因为在正常模式下,函数内部有两个变量,可以跟踪函数的调用栈。

  • func.arguments:返回调用时函数的参数。
  • func.caller:返回调用当前函数的那个函数。

尾调用优化发生时,函数的调用栈会改写,因此上面两个变量就会失真。严格模式禁用这两个变量,所以尾调用模式仅在严格模式下生效

在非严格模式时候我们可以自己模拟

蹦床函数(trampoline)可以将递归执行转为循环执行。

function trampoline(f) {
while (f && f instanceof Function) {
f = f();
}
return f;
}

上面就是蹦床函数的一个实现,它接受一个函数f作为参数。只要f执行后返回一个函数,就继续执行。

注意,这里是返回一个函数,然后执行该函数,而不是函数里面调用函数,这样就避免了递归执行,从而就消除了调用栈过大的问题。

然后,要做的就是将原来的递归函数,改写为每一步返回另一个函数。

function sum(x, y) {
if (y > ) {
return sum.bind(null, x + , y - );
} else {
return x;
}
}

上面代码中,sum函数的每次执行,都会返回自身的另一个版本。

现在,使用蹦床函数执行sum,就不会发生调用栈溢出。

trampoline(sum(, ))
//

蹦床函数并不是真正的尾递归优化,下面的实现才是。

function tco(f) {
var value;
var active = false;
var accumulated = []; return function accumulator() {
accumulated.push(arguments);
if (!active) {
active = true;
while (accumulated.length) {
value = f.apply(this, accumulated.shift());
}
active = false;
return value;
}
};
} var sum = tco(function(x, y) {
if (y > ) {
return sum(x + , y - )
}
else {
return x
}
}); sum(, )
//

ES6之主要知识点(五)函数的更多相关文章

  1. es6的一些知识点

    es6的一些知识点 前言:es6(ECMAscript2015)标准 let.const.var的一些区别 let.const 块级作用域.全局作用域.函数作用域 var 全局作用域.函数作用域 变量 ...

  2. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  3. TS学习随笔(五)->函数

    这篇文章我们来看一下TS里面的函数 函数声明 在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expre ...

  4. PostgreSQL学习手册(五) 函数和操作符

    PostgreSQL学习手册(五) 函数和操作符 一.逻辑操作符:    常用的逻辑操作符有:AND.OR和NOT.其语义与其它编程语言中的逻辑操作符完全相同. 二.比较操作符:    下面是Post ...

  5. 石川es6课程---4、箭头函数

    石川es6课程---4.箭头函数 一.总结 一句话总结: 相当于函数的简写,类似python lambda 函数,先了解即可 let show1 = function () { console.log ...

  6. ES6学习总结(五)

    与其说是对象合并,还不如说是JavaScript中对象属性的复制和转移,将多个对象中的属性合并到一个对象中 12345678 var person = { name : 'John', age : 2 ...

  7. 《理解 ES6》阅读整理:函数(Functions)(五)Name Property

    名字属性(The name Property) 在JavaScript中识别函数是有挑战性的,因为你可以使用各种方式来定义一个函数.匿名函数表达式的流行使用导致函数调试困难,在栈信息中难以找出函数名. ...

  8. ES6学习笔记(五)函数的扩展

    1.函数参数的默认值 1.1基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console. ...

  9. ES6标准入门 第五章:函数的扩展

    1.函数参数的默认值 (1)基本用法 ES5 中, 不能直接为函数的参数指定默认值.只能采用变通的方法. function log(x, y) { y = y || 'World'; console. ...

随机推荐

  1. python 的打开、读、写、追加操作

    读f = open('D:\最新全栈python第2期视频教程 全套完整版\day08-python 全栈开发-基础篇\新建文本文档.txt','r') # data = f.read(10000)# ...

  2. lvs负载均衡连接

    http://blog.csdn.net/zwz1984/article/details/45194377 http://blog.csdn.net/zwz1984/article/details/4 ...

  3. java 和 IntelliJ IDEA 的一些配置

    jdk 的下载与配置https://jingyan.baidu.com/article/ca41422fe3b7261eae99edc6.html intellij IDEA软件java项目No SD ...

  4. Android开发 View的UI刷新Invalidate和postInvalidate

    Invalidate 正常刷新 /** * 使整个视图无效.如果视图可见, * {@link #onDraw(android.graphics.Canvas)} 调用此方法后将在后续的UI刷新里调用o ...

  5. Android开发 navigation入门详解

    前言 Google 在2018年推出了 Android Jetpack,在Jetpack里有一种管理fragment的新架构模式,那就是navigation. 字面意思是导航,但是除了做APP引导页面 ...

  6. HTML清楚塌陷问题

    /* 清除浮动塌陷问题 */.clearfix:after { clear: both;} .clearfix:after,.clearfix:before { content: " &qu ...

  7. 0914CSP-S模拟测试赛后总结

    9-16 16:03-upd:T3数据出锅,老师重测了,于是更了榜单. 名次并没有变化,但是和大佬们的差距变大了. 还是自己实力不行啊.最起码T3不是特别难想吧. 继续努力吧. 粘个榜:%%%二营长. ...

  8. badboy录制添加检查点

    前提条件 安装badboy 下载地址:http://www.badboy.com.au/download/index 录制脚本 1.例:录制www.baidu.com 2.打开badboy工具输入录制 ...

  9. SpringCloud学习笔记(六):Feign+Ribbon负载均衡

    简介 官网解释: http://projects.spring.io/spring-cloud/spring-cloud.html#spring-cloud-feign Feign是一个声明式WebS ...

  10. winform的datagridview控件滚动更新数据

    范例源码下载地址:http://files.cnblogs.com/files/luoxiaozhao/PrintDemo.rar