美文网首页
深入理解ES6之函数

深入理解ES6之函数

作者: _双眸 | 来源:发表于2018-12-09 19:51 被阅读0次

一:关于函数的参数:

可以接受任意数量的参数而无视函数声明的参数数量是js函数的独特之处。

1:参数默认值

ES6之前做法:
function makeRequest(url,timeout,callback){
 timeout=timeout||2000;
 callback = callback||function(){}
}

但是这样timeout如果设置为0,还是会使用默认值。因此更安全的方法是使用typeof来检测类型。

function makeRequest(url,timeout,callback){
 timeout=(typeof timeout !=='undefined')?timeout:2000;
}
ES6做法:
functiong makeRequest(url,timeout=2000,callback=functing(){}){}
//只有在传入undefined或者不传时才会使用默认值 如果参数是null不适用默认值

makeRequest("xxxx",undefined,null)//第一个"xxxx",第二个使用默认值2000,第三次使用null

2:arguments对象

function mixArgs(first,second = 'b'){
arguments.length = 1
first === arguments[0]   true;
second ===arguments[1]  false;//second='b', arguments[1]='undefined'
}
mixArgs(1);

arguments对象的值传入后就不在改变永远等于初始值。

3:默认参数表达式

function getValue(value){
return value+5;
}
//表达式中可以说使用之前的参数,但不能使用后面的参数
function add (first,second=getValue(first)){
}

4:不具名参数

arguments对象包含的是传入的全部参数,有时候操作起来还是比较麻烦。
ES6通过引入剩余参数,可以包括显示声明的其他参数。

function pick(obj,..keys){
}

1:剩余参数只能发到最后
2:剩余参数不能再对象的setter属性中使用,因为setter被限定为只是用单个参数,而剩余参数是不限定数量的。

二:块级函数:

"use strict"
if(true){
console.log(type doSomething);// "function"
function doSomething(){}
doSomething();
}
console.log(type doSomething);//  "undefined" 如果是非严格模式这里也会是"function"

在严格模式下定义的块级函数会被提升到块级作用域的顶部。而在非严格模式下会被提升至全局作用域,因此在代码块外部依然可以使用。

"use strict"
if(true){
console.log(type doSomething);// "undefined"//函数表达式不能提升 因此这里暂时性死区
let doSomething =  function(){}
doSomething();
}
console.log(type doSomething);//  "undefined"

三:箭头函数:

1:没有this,super,arguments,也没有new.target绑定,这些值由离箭头函数最近的非箭头函数来决定.

2:不嫩被使用new调用,箭头函数没有构造方法,使用new调用会报错。

3:不能更改this

function createArrow(){ return ()=>argument[0]}
var arrowFunction = createArrow(5)
console.log(arrowFunction()) // 5

箭头函数:

function add(x,y){return x+y};
///这是es5中定义函数的写法,es6中我们可以这么搞:
var add=(x,y)=>x+y;
add(1,2);//3,正常运行

var fun1=x=>x+1;
fun1(3);//4,当参数为1个的时候 可以再简单一点,当然复杂函数还是需要括号与大括号的

['a','b','c'].map(x=>x);//["a", "b", "c"]

var fun2=(...args)=>{
    for(let arg of args){
        console.log(arg)
    }
};
fun2(1,2,3);//1,2,3配合rest参数

箭头函数中的this:

let obj1={fun:function(){
    setTimeout(function(){console.log(this)})
}};
obj1.fun();//Window,上例是传统的定义函数,this的指向改为了window,通常情况下,我们都是在setTimeout外面定义that=this来确定指向,解决问题。

obj2={fun:function(){
    setTimeout(()=>console.log(this))
}};
obj2.fun();//Object(),箭头函数下的this指向并没有改变,而是指向obj2,

箭头函数体内的this指向的是定义时所在的对象,而不是执行时所在的对象。箭头函数绑定this的指向,很大程度解决了过去this动态指向的困扰,可以大大减少显示绑定this对象的写法(call,apply,bind)。

es6中函数参数:

function fun1(x='a'){console.log(x)};
fun1();//a,没有参数的时候,依然能够打印出默认值a
let fun2=(x=1,y=2)=>x+y;
fun2();//3,没有参数情况下,参数取默认
fun2(10);//12只有一个参数时,y为默认值
fun2(2,5);//7参数个数等于形参时候,参数取实参
fun2(4,5,6);//9参数数量超标时,行为如ES5
let fun3=function(x=1,y=2){this.x=x;this.y=y}
let newFun=new fun3;
//newFun={x:1,y:2}构造函数也可以设置默认值,注意箭头函数不可以当做构造函数,即使用new命令时会报错

let fun4=({x,y=2})=>console.log(x,y)
fun4();//报错,因为fun4的参数为一个对象
fun4({});//undefined,2
fun4({x:2,y:4});//2,4
fun4({x:2});//2,2
let fun5=(x,y)=>{let x=5;return x};//报错,let命令不允许重复定义

相关文章

  • ES5和ES6中的this问题及注意事项(附带少许作用域链查找知

    本文参考以下文章: 1、深入理解ES6箭头函数的this以及各类this面试题总结 2、深入理解ES6箭头函数中的...

  • 一些常用的代理陷阱函数(四)

    《深入理解ES6》阅读随笔 函数代理中的 apply 和 construct 陷阱 JavaScript 中函数有...

  • 深入理解ES6之函数

    一:关于函数的参数: 可以接受任意数量的参数而无视函数声明的参数数量是js函数的独特之处。 1:参数默认值 ES6...

  • 深入理解ES6之函数

    一:关于函数的参数: 可以接受任意数量的参数而无视函数声明的参数数量是js函数的独特之处。 1:参数默认值 ES6...

  • 用模块封装代码

    《深入理解ES6》阅读随笔 在 ES6 之前,JavaScript 中的变量和函数都是全局共享,并没有其他语言中类...

  • 深入理解ES6中的箭头函数

    JavaScript深入理解ES6中的箭头函数 箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,a...

  • 书和资料

    书:《ES6 入门 阮一峰》《深入理解typescript》《PWA 应用实战》《函数式编程指北》 资料:前端开发规范

  • 深入理解ES6 ---- 函数

    函数参数默认值 (1) es5中模拟参数默认值: 这样可以为没有传入的参数,设置为默认值。这种方式的问题:如果co...

  • javascript函数,以及闭包的理解

    javascript函数,以及闭包的理解 深入理解javascript函数定义与函数作用域深入理解javascri...

  • ES6 函数传参

    《深入理解ES6》阅读随笔 在 ES5 中,函数的形参使用是很灵活的,没有数量限制的,可以任意传入多于或者少于函数...

网友评论

      本文标题:深入理解ES6之函数

      本文链接:https://www.haomeiwen.com/subject/bfvkhqtx.html