阮一峰的ES6---函数的扩展

函数的扩展

一,函数参数的默认值

在ES5中,设置参数的默认值:

function (x,y){ x = x || "hello"; y = y || " world"; console.log(x+y); } //但是如果y赋值为false时,那么y还是为默认值 因此要先判断x和y的数据类型 function(x,y){ if(typeof x === 'undefined'){ x="hello"; } if(typeof y === 'undefined'){ y=" world"; } console.log(x+y); }

ES6允许在参数的默认值直接写在参数后面

function Person (name="MGT360124", age=18){    this.name = name;    this.age = age;}let p = new Person();p//{name:"MGT360124",age:18}

参数变量是默认声明的,不能用let 或者const再次声明。使用默认参数时,函数不能有同名参数;

function fn(x = 5){ let x=1;//errorconst x= 2;//error}function fn(x,x,y){//允许}function fn(x,y,y=10){//出错}

二,与解构赋值默认值结合使用

参数默认值可以与解构赋值的默认值,结合起来使用

function fn(x,y=5){ console.log(x,y);}fn({})//undefined 5fn({x:1})//1 5fn({x:1,y:2})//1 2fn();//TypeError :cannot read property "x" of undefined

三,参数默认值的位置

function person(name,age=18,sex){return [x,y,z];}person()//[undefined ,18, undefined]person("MGT")//["MGT",18,undefined ]person("MGT", , 'M')//errorperson("MGT",undefined,"M")//["MGT",18,"M"]

四,函数的length属性

length属性的返回值,等于函数的参数个数减去指定了默认值的参数个数

(function (a) {}).length // 1(function (a = 5) {}).length // 0(function (a, b, c = 5) {}).length // 2

如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0(function (a, b = 1, c) {}).length // 1

五,作用域

一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context),等到初始化结束时,这个作用域就会消失,这种语法行为,在不设置参数默认值时,是不会出现的;

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

参数y的默认值就等于变量x,调用函数时,参数形成一个单独的作用域,在这个作用域里面,默认值变量y指向第一个参数x,而不是全局变量x,所以输出的是2;

let x =1;function fn(y =x){ let x =2;console.log(y);}fn();//1

上面的代码中,函数调用时,参数y = x形成一个单独的作用域,这个作用域里面,变量x本身没有定义,所以指向外层的全局变量x,函数调用时,函数体内部的局部变量影响不到默认值的变量x;如果全局变量x不存在,那么就会报错

function fn(y=x){let x =3;console.log(y);}fn();//ReferenceError :x is not defined

六,rest参数(...变量名)

ES6引入rest参数(形式为 ...变量名),用于获取函数的多与参数,这样就不需要使用arguments对象了,rest参数搭配的搭配的变量是一个数组,该变量将多余的参数放入数组中;

function add(...values) {  let sum = 0;  for(var val of values){    }return sum;}add(2,5,3);//10

add是一个求和函数,利用rest参数可以求任意数目的参数

严格模式

ES2016 做了一点修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。

七,name属性

函数name属性,返回该函数的函数名

function person(){}person.name //'person'

箭头函数(=>)

var f = v => v;//等同于var f = function(v) {return v;}

如果箭头函数不需要参数或者需要多个参数,就使用一个圆括号代表参数部分。

var f = () => 5;f()//5//等同于var f = function (){ return 5};var sum = (num1,num2)  =>num1+num2;//等同于var sum = function(num1,num2){        return num1+num1;}sum(1,2)//3

由于花括号{}被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上一个括号,否则会报错

let getTempItem = id =>( {id:id,name:'MGT'} )getTempItem(360124)//{id:360124,name:"MGT"}//等同于let getTempItem = function(id){    return { id:id, name:"MGT" };}getTempItem(360124)

如果箭头函数只有一行语句,且不需要返回值:

let fun = () => void doesNotReturn();

箭头函数可以结合变量解构使用

let full = ({first,escond}) => first +" "+ second ;//等同于function full(person){      return person.first +" "+person.last;}

箭头函数简化回调函数

[1,2,3].map(function(x){return x*x})//[1,4,9]//简化[1,2,3].map(x=>x*x);

箭头函数的注意点

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

(2)不可以当作构造函数,不能使用new命令

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

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

this对象的指向是可变的,但是在箭头函数中,他是固定的

funnction foo(){        setTimeout( () => {            console.log("id :", this.id);                },1000);}var id =21;foo.call( { id:42} );// id :42

setTimeoout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它真正执行要等到1000毫秒以后,如果他是普通函数,执行时this应该指向全局对象window,这时输出的是21,但是箭头函数导致this总是指向函数定义生效时所在的对象{id :42},所以输出42;

function Timer () {  this.s1 = 0;  this.s2 = 0;  setInterval( () => this.s1++,1000 );  setInterval( function () {          this.s2++;      },1000);}var timer = new Timer();setTimeout( ()=> console.log("s1 : ", timer.s1),3100);setTimeout( ()=> console.log("s2 : ", timer.s2),3100);//s1 : 3//s2 : 0

Timer函数内部设置了两个定时器,分别为箭头函数和普通函数,前者的this绑定定义时所在的作用域(为TImer函数),后者的this指向运行时所在的作用域(window),所以3100毫秒之后,timer.s1更新了3次,而timer.s2一次都没更新;

箭头函数可以让this指向固定化,这种特性很有利于封装回调函数;

var handler ={ id :"123456", init :function () {        document.addEventListener("click",            event => this.doSomething(event.type), false);            },      doSomething:function (type) {        console.log('handling '+type + " for " +this.id);      }};

this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this,正是因为他没有this,所以也就不能用作构造函数。

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

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

推荐阅读更多精彩内容

  • 1.函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 functio...
    Masami_9e88阅读 486评论 0 0
  • 函数参数的默认值 基本用法 ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数lo...
    oWSQo阅读 243评论 0 0
  • 今天,小可和妈妈一起去看了《神秘巨星》。 原先我们被这个片名所吸引,(这个巨星为什么还神秘呢?你都巨星,你还神...
    小可解说阅读 303评论 0 1
  • 近几年中国众多明星纷纷走向好莱坞 开始大片模式 但是名头虽好 其实多半在片中都是打酱油的 在2月10号又有了一部美...
    简娯阅读 730评论 0 0
  • 早上起来开始发祝福短信,一条一条发想了解一下多少人把我删了,微信发信息对我这种不喜欢看朋友圈不喜欢微信聊天的人,有...
    FineYoga苗苗_阅读 139评论 0 2