JS里的函数

作者: 宣泽彬 | 来源:发表于2018-07-07 22:35 被阅读18次

        JavaScript里面共有七种数据类型,分别为numberstringbooleansymbolundefinednullobject。而函数function其实是一种特殊的object对象,因此他也同时具备着一些对象共有的属性和方法。

        首先这里讲一下在JS里声明函数的五种方式:

    1.声明具名函数

    function x(输入1,输入2) {
        return undefined
    }
    

        在这里值得一提的是,这里的function是关键字,和声明变量时候的var类似。
        这里x为函数名,console.log(x)可以打印出函数的字符串形式。
        另外,函数最后不写return的话,函数会自动return undefined

    2.声明匿名函数

    var x
    x=function (input1,input2) {
        return undefined
    }
    

    3.声明具名函数赋值于变量中

    var x
    x=function y(input1,input2) {
        return undefined
    }
    

        这种声明出来的函数与直接声明具名函数的区别:

    function y(){}
    console.log(y) //打印出函数
    
    //--------------刷新页面--------------
    
    var x=function y(){}
    console.log(y) //报错,没有定义y
    

        这是一种不一致的情况,是一个JS里面的BUG

    4.使用window.Function来构造函数

    var f=new Function('x','y','return x+'+n+'+y')
    var n=1
    f(1,2) //4
    

    5.使用箭头函数来构造函数

    var f=(x,y)=>{return x+y}
    f(10,2) //12
    

        在这里值得注意的是,这种办法构造出来的函数是匿名函数,因此需要赋值给变量f
        另外,如果函数主体只有一句话且不是返回对象的时候,可以去掉花括号和return

    var f=(x,y)=> x+y
    f(1,2) //3
    

        若输入参数只有一个,可以去掉圆括号。

    var n2 = n => n*n
    n2(4) //16
    

    函数的name属性

        函数拥有name属性,不同的函数声明方式可能会导致name属性得出的结果不一样。

        具体如下面代码所示:

    function f(){}
    f.name // "f"
    var f2=function (){}
    f2.name // "f2"
    var f3=function f4(){}
    f3.name // "f4"
    var f5=new Function('x','y','return x+y')
    f5.name //anonymous(匿名的)
    var f6=(x,y)=>{return x+y}
    f6.name // "f6"
    

    函数的call、this和argument

        在JavaScript中,变量是可以直接用的,而函数则需要调用(call),所以说函数就是一段可以反复调用的代码块。

        我们可以尝试通过创建一个对象来代替函数:

    var f={}
    f.name='f'
    f.params=['x','y']
    f.functionBody='console.log("fff")'
    f.call=function(){
        return window.eval(f.functionBody) //eval('字符串'),该方法可以把字符串当代码执行
    }
    

        从上面代码可以看出,可以执行代码的对象就是函数。
        可能看到这里会有人疑惑为什么调用函数的时候要用call方法来调用,其实call来调用函数才是真正的调用方法,而之所以可以不用call调用函数,是JavaScript编写这门语言的时候所留下的给使用者的“糖”,是用来吸引更多的人来使用这门语言。但是其实用call来调用函数才是真正正确的调用方法,是硬核(hardcored)。

    function f(x,y){return x+y}
    f.call(undefined,1,2)
    

        上述代码中:
        call后面的第一个参数可以通过this得到,即传入的第一个参数被存入了到了关键字this中。
        call后面的除第一个参数以为的其他参数被传入到了一个关键字为argument的伪数组中。

    f=function(){
        console.log(this)
    }
    f.call(undefined) // window{...}
    
    //启用严格模式以后:
    f=function(){
      'use strict'
      console.log(this)
    }
    f.call(undefined) // undefined
    

        潜规则:普通模式下,如果thisundefined,浏览器会自动把this变成一个window对象,只有启用了严格模式之后,this才为undefined,启用严格模式的方法:在函数第一行中输入'use strict'

    最后我们来说几道面试题以及面试题的答案:

    第一道:

    var a=1
    function f1(){
        alert(a) //结果是多少
        var a=2
    }
    f1.call
    

    答案: undefined

    第二道:

    var a=1
    function f1(){
        var a=2
        f2.call()
    }
    function f2(){
        console.log(a) //结果是多少
    }
    f1.call()
    

    答案:1

    第三道:

    var LiTags=document.querySelectorAll('li') //说明一下:html页面中存在着6个li
    for (let i=0;i<liTags.length;i++) {
        LiTags[i].onclick=function(){
            console.log(i) //点击第三个li,打印的结果为多少?
        }
    }
    

    答案:6


    本教程版权归饥人谷_宣泽彬和饥人谷所有,转载须说明来源

    相关文章

      网友评论

        本文标题:JS里的函数

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