资讯专栏INFORMATION COLUMN

初入ES6-Function

zgbgx / 3227人阅读

摘要:之前的函数声明及表达式函数的声明函数表达式也可以此时的只是这个匿名函数的名字,和变量没有关系构造函数这种方法会运行两次代码先实例后执行函数体数的默认值如果没有传入参数就使用默认值,利用的短路特性传入的参数为值会忽略判断是否传参,如果没

ES5之前的函数声明及表达式
1,函数的声明

</>复制代码

  1. function fn(){
  2. dosomething;
  3. };

2,函数表达式

var fn = function(){}

//也可以var fn = function newFn(){},此时的newFn只是这个匿名函数的名字,和变量没有关系;

3,构造函数

</>复制代码

  1. var fn = new Function("num1","num2","return num1 ,num2") //这种方法会运行两次代码
  2. //先实例后执行函数体

ES5数的默认值

</>复制代码

  1. function fn(arg1,arg2){
  2. arg2 = arg2 || "the value"; //如果没有传入参数就使用默认值,利用||的短路特性
  3. return arg1+arg2;
  4. };
  5. fn("hello") ->hello the value;
  6. fn("hello","world") ->hello world;
  7. fn("obama","")->obama the value //传入的参数为falsey值会忽略
  8. typeof arg2 === "undefined" //判断是否传参,如果没有实参的话,就是undefined;
  9. arg2=(typeof arg2 !=="undefined")?arg2:"the value";//判断是否有传入值
  10. arguments.length ===1 //判断传递的参数个数

ES6的参数默认赋值

</>复制代码

  1. function fn(arg1,arg2 = "value"){
  2. let arg2 = 34; //此处的arg2 默认是已经声明,所以内部使用let const会语法报错!
  3. console.log(arg1,arg2)
  4. }
  5. //内部的arguments对象也默认和严格模式一样的行为,不在动态的反应变化;默认值不计入arguments对象
  6. //函数的参数,也可以是其他值,默认参数只有在调用的时候才会求值,因此可以用第一个参数作为默认的值
  7. function fn(a , b =a){};
  8. //参数的作用域和ES6之前的一样,和其他的参数都是同一作用域,如果参数的值是一个变量,那么这个参数的作用域先是局部(确认是否也是形参)后是全局;
  9. let a = 34;
  10. function fn(b = a){ //尤其注意,参数b赋值的是变量a,那么就默认变量a已经声明,此时的a,如果不是参数,就是全局的变量,如果是参数,就会报错,重复赋值,使用let和const要注意语法错误
  11. let a= 11;
  12. console.log(b);
  13. }
  14. fn() ->34 //当参数b赋值变量a的时候,a是全局注册的,因此,fn()是34,如果没有let a = 34;就会报错,
  15. fn(22) ->22 //此时参数的作用域是局部
  16. let a = 23;
  17. function (a,b=a){ //参数b的值是a,相当于再次给a赋值,由于参数是函数内部变量,所以和 let a = 12冲突;会报错
  18. let a = 12;
  19. console.log(b);
  20. }
  21. function fn(arg1,arg2){
  22. console.log(arg1 === arguments[0]); //true
  23. console.log(arg2 === arguments[1]); //true
  24. arg1 = newarg1;
  25. arg2 = newarg2;
  26. console.log(newarg1 === arguments[0]); //true
  27. console.log(new arg2 === arguments[1]); //true
  28. }

rest参数(...rest)不定参数;只能放在形参的最后面,否则会报错,这是一个数组对象

</>复制代码

  1. function fn(...value){
  2. console.dir(value);
  3. value.slice() //可以使用数组的方法,区分arguments
  4. }
  5. fn(1,2,3,4,4)->[1,2,3,4,4]返回的是数组,可以使用数组的方法;
  6. //无论形参是否有不定参数,arguments对象正常使用,反应传入的参数的数量

...扩展运算符 把运算符后面的数组,转为用逗号分开的参数序列;可以用在所有使用数组的的方法中

</>复制代码

  1. console.log(1,2,3,4) //1 2 3 4;
  2. console.log(...[1,2,3,4])//同上
  3. //利用call的属性,转化数组

判断函数的调用,是直接调用还是new

</>复制代码

  1. function A(a){this.a = a;}
  2. var b = new A(3); //生成了对象
  3. var c = A(4); //此时给全局属性添加了a=4
  4. function A(a){
  5. if(this instanceof A){this.a =a} //判断是否是new调用
  6. else{return new A(a)}
  7. }
  8. var d = A.call(b,333) //通过call强制的指定this
  9. //正确的写法
  10. function B(b){
  11. if(typeof new.target ! == "undefined"){this.b =b} //新的元属性
  12. else{return new B(b)};
  13. }
  14. //es6可以在块级代码中,声明和使用函数,但是会作为全局函数

箭头函数 =>

</>复制代码

  1. //当函数没有参数时;
  2. var f1 = function(){ };//默认函数返回一个undefined;
  3. var f1 = ( )=>{}; //空函数
  4. var f2= ()=>"the value you want";
  5. var f3 = ()=>{ //如果需要在函数体内执行多条代码,就必须用大括号包裹
  6. doSomethings;
  7. doantherthings;
  8. return value; //必须用return 返回值;否则默认返回undefined;
  9. }
  10. //箭头函数有一个函数的时候
  11. var f1 = function(arg1){
  12. };
  13. var f1 = arg1 =>undefined;
  14. //箭头函数有多个参数的时候;
  15. var f1 = function (arg1,arg2,arg3){
  16. };
  17. var f1 = (arg1,arg2,arg3)=> undefined;
  18. var f2 = (arg1,arg2,arg3)=>arg1-arg2-arg3;
  19. //注意如果箭头函数只是多带带的返回一个对象要在大括号的外面加个小括号;
  20. var f1 = ()=>{
  21. doSomething;
  22. return { //此时不是多带带返回所以不需要
  23. name : "name",
  24. value : "value"
  25. }
  26. };
  27. var f2 = ()=>({ //此时为了区分{}是否是函数体,所以要加上小括号;
  28. name : "name",
  29. value : "value"
  30. })
  31. //箭头函数的函数体内正常和一般函数一样,但是没有arguments数组对象,
  32. //IIFE关于立即执行的函数
  33. var f1 = (function(arg){
  34. return {
  35. getArg :function(){return arg}
  36. }
  37. })(arg) //返回对象的方法
  38. var f1 = (arg=>{
  39. return {
  40. getArg :function(){return arg}
  41. }
  42. })("arg") //同上;

箭头函数的this指向问题 (this仅仅是外一层非箭头函数的函数this,否则就是undefined)
一般函数的this是根据调用的对象来指定的或者用new ,bind ,call 等操作符或者方法来绑定;
1,默认的this 指向

</>复制代码

  1. function fn(){console.dir(this)} //此时默认的指向是window

2,隐式的this 指向

</>复制代码

  1. var obj = {
  2. name : "obama",
  3. getName : function(){
  4. return this.name //此时的指向是对象
  5. }
  6. }

3,new操作符

</>复制代码

  1. function Name(name){
  2. this.name = name;
  3. }
  4. var man = new Name("obama"); //此时指向的是new调用的对象

4,硬指定的this

</>复制代码

  1. var getName= function(){
  2. console.log(this.name)
  3. }
  4. var name = "bush";
  5. var predents = {
  6. name : "obama",
  7. }
  8. getName(); //bush
  9. getName.call(preddents) //obama;

ES6的箭头函数this是和变量的作用域一样的词法指定(写在哪里就是那里的引用),不能更改,也不可以用new操作符,本着用完即丢的思想

</>复制代码

  1. var a = ()=>this; //此时返回的是this对象是undefined;
  2. var obj = {age : 45};
  3. obj.b = a; //把函数a当作obj的方法;
  4. obj.b() //正常不使用箭头函数的话, this的指向应该是调用的obj对象,但是这里显示的 是原来定义的window对象
  5. a.call(obj) //显试的绑定,也不能改变this 的作用域;
  6. var newa = new a() //报错,a不是一个构造函数;
  7. 如果要使用箭头函数的绑定的话在ES7里双冒号::左边是对象,右边的是方法,这样就可以绑定,
  8. var foo = {age : 34};
  9. var bar = ()=>this.age;
  10. foo::bar
  11. //以上仅作了解

尾调用优化特指函数的最后一步(一般函数最后一步默认是return undefined)这一步不能有其他任何的操作,比如赋值,算术运算 属于引擎的优化
一般JS引擎 在执行中,会进入执行上下文,全局,函数和eval上下文,三者中的一个,
保存这个上下文的地方就是在调用栈,栈的顶端就是一个变量对象,保存当前函数的使用的变量;
函数调用会在内存形成一个调用记录称之为调用帧,保存位置和内部变量,所有的调用帧就形成了一个调用栈;
尾调用因为是函数的一步,所以返回这个函数后,原函数就不必记住自己的变量,尾调用的函数会保存这个信息,所以内层的函数取代外部的函数,这样就行成优化

</>复制代码

  1. function fn(){
  2. let a = 1;
  3. let b = 2;
  4. return f2(a + b);
  5. }
  6. fn();
  7. f2(3) //在函数fn里f2是尾调用,fn执行后,就不必记住自身可调用的变量,因为f2会记住执行;最终取代原函数;
  8. function fn(num){ ///一般递归函数
  9. if(num ===1){return 1};
  10. return num+fn(num-1)
  11. }

注意只有使用use strict 尾调用优化才会生效,而且argument 和caller 不能使用

</>复制代码

  1. function fn(n,total=1){ //尾调用优化
  2. if(n ===1) return total;
  3. return fn(n-1,n+total)
  4. }
  5. //柯里化,将多参数的函数层层的使用单参数的函数调用
  6. function add(n){
  7. return curry(n,1)
  8. };
  9. function curry(n,total){
  10. if(n ===1) return total;
  11. return curry(n-1,n+total)
  12. }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89125.html

相关文章

  • HTML & CSS之小白初入江湖

    摘要:之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。是块级元素,是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...

    fai1017 评论0 收藏0
  • HTML & CSS之小白初入江湖

    摘要:之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。是块级元素,是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...

    crossoverJie 评论0 收藏0
  • 初入vue配合el-table做批量下载

    摘要:刚开始做项目,正好碰上了一个批量下载的功能就是下面图片中的一个导出的功能后台返回的数据格式是这样的,如下做批量下载后台需要前端给一个必需字段,在我这里也就是上代码这样我们的就是一个由组成的数组,搞定 刚开始做vue项目,正好碰上了一个批量下载的功能 就是下面图片中的一个导出的功能showImg(https://segmentfault.com/img/bVbsuIr); 后台返回的数据...

    tunny 评论0 收藏0
  • 初入Vue,node,express,mongodb

    摘要:本人前端萌新大概花了一周多一点,完成了一个前后端分离解耦的简易个人博客项目。项目前后端分离,路由完全交给处理,后端只负责操作数据库,暴露。目前项目提供做学习用途,希望能给大家一些帮助,对全栈项目有一个初步的了解,谢谢。 本人前端萌新大概花了一周多一点,完成了一个前后端分离解耦的简易个人博客项目。项目前后端分离,路由完全交给vue-router处理,后端只负责操作数据库,暴露api。 技...

    dingding199389 评论0 收藏0

发表评论

0条评论

zgbgx

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<