文档章节

函数拓展

aHai366
 aHai366
发布于 03/27 10:28
字数 1385
阅读 61
收藏 0

函数拓展

默认参数

ES6允许为函数的参数设置默认值,即直接在参数后面赋值(只对undefined生效) ES6中三种方式:

1、||
2、 ?
3、 exten({},default)
// 默认值
// function demo(color = 'pink') {
//     // ES5中
//     // color = color || 'red';
//     // color = color === undefined ? 'red' : color;
//     // $.extend(obj, {})
//     console.log(color)
// }
// // 传递数据
// demo()
// demo(null)
// demo(undefined)
// demo(NaN)
// demo(0)
// demo(false)
// demo('')
// demo('green')

注意:

  • 1 非尾部参数设置了默认值,使用的时候是无法省略的。
// 注意事项
// function demo(a = 1, b) {}
// demo(, 10)// 报错
// 默认参数在尾部
// function demo(a, b = 10) {
//     console.log(a, b)
// }
// demo()
// demo(5)
// demo(5, 6)
  • 2 赋值的默认值如果是参数变量,则参数变量必须在前面定义
// 使用变量
// function demo(a, b = a, c) {
//     console.log(a, b, c)
// }
// 必须使用前面的变量
// function demo(a, b = c, c) {
//     console.log(a, b, c)
// }
// demo()
// demo(5)
// demo(5, 6)
// demo(5, 6, 7)
  • 3 length属性不会获取默认参数以及后面的参数(length失真)
// length属性
// function demo(a, b, c) {}
// function demo(a, b = 1, c) {}
// console.log(demo.length)
  • 4 设置默认值后,函数出生后参数的时候,参数集合会临时形成一个单独的作用域,初始化结束后,该作用域消失
// 使用了默认参数技术,初始化参数的时候,会临时形成一个作用域
// let a = 1;
// function demo(b = a) {
//     console.log(b)
// }
// demo();//1
// demo(2);//2
// let a = 1;
// function demo(a, b = function() {a = 10}()) {
//     console.log(a)
//     var a = 20;
// }
// demo();//10
// demo(2);//10

使用默认参数以及获取剩余参数的时候,不能使用局部的严格模式。

// 局部严格模式
// function demo() {
//     // 局部严格模式
//     'use strict'
//     console.log(this)
// }
// 我们可以使用全局的严格模式
// 'use strict'
// function demo(a = 1) {
//     // 局部严格模式
//     // 'use strict'
//     console.log(this)
// }
// // 参数解构也不能使用严格模式
// function demo(...args) {
//     // 局部严格模式
//     // 'use strict'
//     console.log(this)
// }
// demo()

name属性可以获取函数名称 对于匿名函数来说,ES5会返回空字符串,ES6会返回实际调用者的名称。

// name属性mnnn
// function demo() {}
// let demo = function() {}
// let demo = new Function();
// console.log(demo.name)

尾逗号:ES7中,允许函数参数的末尾添加伪逗号(与数组,对象为逗号一致)。

// 尾逗号
// console.log([1, 2, 3,])
// console.log({ a: 1, b: 2, })
// function demo(
//     a,
//     b, 
// ) {}
// demo(
//     1, 
//     2, 
// )

函数绑定

ES7提供了双冒号(::)来实现函数作用域的绑定(替代bind方法)。

语法:context::fn
    等价于 fn.bind(context)
注意:
    1、如果使用双冒号左边为空,右边是对象的方法,则等于将该方法绑定在该对象上::o
    2、由于双冒号运算符返回的还是原对象,因此可以使用链接调用    
   let divs = document.getElementsByTagName("div");
        // 解构 forEach
        let {forEach} = Array.prototype;
        // forEach.call(divs,function(...args){
        //     console.log(args,121)
        // })
        // // :: 绑定作用域
        divs::forEach(function(...args) {
            console.log(args)
        })// 会进行报错

箭头函数

箭头函数数式ES6 新增的一种函数,只能通过函数表达式的形式定义。

语法:()=>{} , 由三部分组成:参数集合,箭头,函数体

四个特点: 1、箭头函数无法使用arguments,可以使用获取剩余剩余参数语法替代.

// 箭头函数
// let demo = (...args) => {
//     // 不能使用arguments
//     // console.log(arguments)
//     console.log(args)
// };
// demo(1, 2, 3)

2、箭头函数不能作为构造函数。

// 不能作为构造函数的
// let Player = function(name) {
//     this.name = name;
// }
// let Player = (name) => {
//     this.name = name;
// }
// new Player('ickt')

3、箭头函数的作用域永远是定义时的作用域。

       let obj ={
            fn1(){
                console.log(this)
            },
            fn2:()=>{
                console.log(this)
            }
        }
        obj.fn1();// obj
        obj.fn2()//window

4、箭头函数不能作为generator函数,内部不能使用yeild关键字。

// 不能作为generator函数
// let demo = *() => {
//     yield 1;
// }

两点省略: 1、如果参数集合中,只有一个参数,可以省略参数集合体(),如果使用解构语法、三点语法、默认参数不能省略。

// 两点省略
// let demo = msg => {
//     console.log(msg)
// }
// 三个点语法不能省略参数集合
// let demo = (...args) => {
//     console.log(args)
// }
// demo('hello')
// 解构语法不能省略
// let demo = ({ color }) => {
//     console.log(color)
// }
// demo({ color: 'red' })
// 默认参数语法不能省略
// let demo = (msg = 'ickt') => {
//     console.log(msg)
// }
// demo()

2、如果函数体中,只有一句话或者返回值,可以省略函数体{}以及return关键字。 注意:返回的如果是对象,外部要加().

// 省略函数体
// let add = (a, b) => {
//     return a + b;
// }
// let add = (a, b) => a + b;
// 返回是对象要加上()
// let add = (a, b) => ({ a, b })
// console.log(add(1, 2))
// 数组
// let arr = [1, 2, 3, 4];
// console.log(arr.map(item => item ** 2))

箭头函数的作用域永远是定义时的作用域,因此不受严格模式,call,bind,apply方法的影响。 想改变箭头函数作用域:将箭头函数定义在一个普通函数中。想改变这个普通函数作用域,我们可以改变箭头函数的作用域。

      //作用域
        let obj ={
            fn1:function(){
                console.log(this)
            },
            fn2(){
                console.log(this)
            },
            fn3:()=>{
                console.log(this)
            },
            fn4:function(){
                //定义箭头函数
                let fn5 =()=>{
                    console.log(this)

                }
                fn5()

            }
        }
        //执行方法
        obj.fn1();// obj
        obj.fn2();//obj
        obj.fn3();//window
        obj.fn4();//obj

严格模式下箭头函数的作用域

        'use strict'
        let fn6 = function(){
            console.log("fn6",this)
        }
        let fn7 =()=>{
            console.log("fn7",this)
        }
        fn6();//undefined
        fn7();//window
        //作用域
        let obj ={
            fn1:function(){
                console.log(this)
            },
            fn2(){
                console.log(this)
            },
            fn3:()=>{
                console.log(this)
            },
            fn4:function(){
                //定义箭头函数
                let fn5 =()=>{
                    console.log(this)

                }
                fn5()

            }
        }
        //执行方法
        obj.fn1();// obj
        obj.fn2();//obj
        obj.fn3();//window
        obj.fn4();//obj
        // 定义对象 使用call 改变this指向
        let ickt = {color:"red"}
        obj.fn1.call(ickt);// ickt
        obj.fn2.call(ickt);//ickt
        obj.fn3.call(ickt);//window
        obj.fn4.call(ickt);//ickt

© 著作权归作者所有

上一篇: 尾调
aHai366
粉丝 0
博文 40
码字总数 33691
作品 0
私信 提问
加载中

评论(0)

Vue源码解析之数组变异的实现

众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变。 这是什么原因? 原因在于: Vue 的响应式系统是...

嫣然丫丫丫
2018/12/04
0
0
PHP处理图片(orientation)旋转问题

阿里云产品通用代金券,最高可领1888分享一波阿里云红包. 阿里云的购买入口 再PHP日常开发中,经常需要处理前端上传来的图片,最简单的就是保存一下,有时候需要进行一些处理,比如压缩图片,生成缩...

紫葡萄0
2019/03/29
0
0
mysqlnd 以及 libmysqlclient

PHP拓展 1.1 PHP核心 PHP的核心是由两个独立的部分组成的。 在最底层是Zend Engine (ZE)。ZE 负责把人类可以理解的脚本解析成机器可以理解的符号(token),然后在一个进程空间内执行这些符号...

knightuniverse
2014/02/27
240
0
精读《用 Reduce 实现 Promise 串行执行》

1 引言 本周精读的文章是 why-using-reduce-to-sequentially-resolve-promises-works,讲了如何利用 reduce 实现 Promise 串行执行。 在 async/await 以前 Promise 串行执行还是比较麻烦的,...

黄子毅
2018/10/29
0
0
解析Kotlin 函数用法与函数式编程

导读 本篇文章主要介绍Kotlin函数的用法,以及自己对函数式编程的一些理解。并且会和Python,C++做一些比较。 自从Google爸爸宣布Kotlin为自己的干儿子之后,Kotlin被各大社区炒的火热。 如果...

问题终结者
2017/10/19
262
0

没有更多内容

加载失败,请刷新页面

加载更多

郑州哪哪里可以开工程款发票-郑州_新闻网

【电薇同步;1.3.8 - 2.7.4.1 - 5.2.9.7.】张生、诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridge,是Android手机通用...

yyqqvip
54分钟前
30
0
Nginx 反向代理访问

在Nginx 配置 server { listen 80; server_name www.xiaocx.org www.xiaocx.org www.xiaocx.org; root /Users/maison/work/xiaocx/dist; index i......

韩庚庚
58分钟前
33
0
python笔记:环境变量已设置CMD中一直报错"python"不是内部命令,也不是可运行的程序或批处理文件

这些天虽然也写了几个小工具,但是打包都是在anaconda prompt中完成的,因为CMD中一直报错"python"不是内部命令,也不是可运行的程序或批处理文件,各种查度,千篇一律的是环境变量配置的问题...

小玲_001
今天
13
0
AI+BI服务模式

术语与缩写解释 缩写、术语 解 释 BI 商业智能(Business Intelligence,简称:BI),又称商业智慧或商务智能,指用现代数据仓库技术、线上分析处理技术、数据挖掘和数据展现技术进行数据分析...

zoegu228
今天
28
0
leetcode1227(面试题 17.09. 第 k 个数)--C语言实现

求: 有些数的素因子只有 3,5,7,请设计一个算法找出第 k 个数。注意,不是必须有这些素因子,而是必须不包含其他的素因子。例如,前几个数按顺序应该是 1,3,5,7,9,15,21。 示例 1:...

拓拔北海
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部