ES6-函数扩展(默认参数篇)

1、默认参数用法

函数默认参数示例:

//es6写法
function test(a=1,b=2) {
  console.log(a,b)
}

test(3) //3,2
test(3,4) //3,4
test() //1,2

//es5写法
function test(a,b) {
  var a = a || 1;
  var b = b || 2;
  console.log(a,b)
}

函数参数的默认值可以与解构赋值结合使用,此处的学习容易混乱,主要还是学以致用,尽量在代码中多用自己学习到的新东西(谨代表我个人观点),下面是es6官网给出的两个例子,思考两种方式有什么不同:

// 写法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]

// x 和 y 都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x 有值,y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x 和 y 都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

个人理解:第一种方式是解构赋值默认值与函数参数默认值的结合,如果函数没有传入任何参数,函数的参数默认值就是一个空对象,接下来才是解构赋值默认值,如果传入参数,则会按照传入的参数的属性名称查找传入参数是否具有同名属性,如果具有,覆盖默认值,否则,继续使用默认值,如果属性的值为undefined,则采用默认值;第二种方式,只使用了函数参数默认值,没有解构赋值的默认值,没有传入参数的时候,相当于参数是{x:0,y:0},然后在对这个参数进行解构,如果传入了参数,就使用传入的参数,就会忽略函数默认值。

此外,还要注意默认参数的位置必须是最后一个,如果不是,则不能省略默认参数的传值。

2、默认参数作用域

先看个案例:

var x = 1;
function test (x, y = x) {
  console.log(y)
}
test(2) // 2

只要为函数设置了默认参数,函数进行声明初始化时,参数就会形成一个单独的作用域,初始化结束,作用域就会消失。所以最终的输出结果是2。

书中还有两个例子,我觉得挺好的,就直接搬过来了,如下:

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}
foo() // 3
x // 1


var x = 1;
function foo(x, y = function() { x = 2; }) {
  x = 3;
  y();
  console.log(x);
}

foo() // 2
x // 1

个人理解:第一段代码中,由于为参数y设置了函数的默认参数,所以,在函数进行声明初始化时,参数x,y是在一个单独的作用域里面,参数y里面的x是指向参数x,而在foo函数作用域内,又重新声明了一个局部变量x,这个局部变量x与参数x,y的作用域并不是同一个作用域,也就是说,参数x只有在y的默认参数里才能访问到,当console的时候,永远找的是foo函数作用域内的变量x,也就是3;第二段代码中,只去掉了一个var声明,此时x=3的过程是,先在当前作用域中找有没有声明过这个x,参数里有声明变量x,所以,没有var的x实际上就是指向参数x,紧接着在后面执行了y(),相当于x=3;x=2;后一个覆盖前一个,如果调换下位置,y();x=3 ,此时输出应该是3。

下面有一段自己的代码:

var x = 1;

function foo(x, y = function () { x = 2; }) {

  x = 3;

  y();

  console.log(x);

}

foo(undefined, function () { x = 2; }) //3
x //2

此时,函数传入的实参实际上是在全局作用域中,并且赋值给了变量y(变量y持有对全局作用域中实参的一个引用),也就是说,此时的function() {x=2}实际上是在全局作用域中找到声明的变量x,并且将2赋值给x,而foo函数作用域内的x=3,仍然指向参数x,内部作用域有声明的x,自然不会去到外部作用域找了,自然打印出3。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 228,936评论 6 535
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,744评论 3 421
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 176,879评论 0 381
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,181评论 1 315
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,935评论 6 410
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,325评论 1 324
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,384评论 3 443
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,534评论 0 289
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 49,084评论 1 335
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,892评论 3 356
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 43,067评论 1 371
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,623评论 5 362
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,322评论 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,735评论 0 27
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,990评论 1 289
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,800评论 3 395
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 48,084评论 2 375

推荐阅读更多精彩内容