Js函数拓展

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

函数拓展

使用默认参数技术,初始化参数的时候,会形成一个作用域

let a = 1;
function demo(a,b=a){
       console.log(a,b)
}    
demo()// undefined
demo(2)// 2 2 
let a = 1;
function demo(a,b=function(){a =10}()){
      console.log(a,b)
}
demo();// 10 undefined
demo(2)// 10 undefined
let a = 1;
function demo(a,b=function(){a =10}()){
    var a = 20;
    console.log(a,b)
}
demo();// 20 undefined
demo(2)// 20 undefined
let a = 1;
function demo(a,b=function(){a =10}()){
    console.log(a,b)
    var a = 20;
}
demo();// 10 undefined
demo(2)// 10 undefined

参数默认值与解构语法,均不支持局部严格模式

// 参数默认值局部严格模式
function demo(a=1){
     "use strict"
     console.log(this)
}
demo()// 会报错
// 参数解构 也不能使用局部严格模式
function demo(...args){
    "use strict"
    console.log(args)
}
demo()
// 可以使用全局的严格模式
"use strict"
function demo(...args){
     // "use strict"
     console.log(args)
}
demo()


函数绑定

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))

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

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_8422