js函数

作者: 索伯列夫 | 来源:发表于2018-10-10 15:49 被阅读0次

    函数的5种声明方式
    如何调用函数
    什么是call stack
    this和arguments
    作用域
    闭包

    一、函数的5种声明方式

    1.具名函数:

    //这里的function是关键字
    function x(input1,input2){
      return undefined
    }
    x.toString()  
    //"function x(input1,input2){
    //  return undefined
    // }"
    

    console.log返回什么和打印什么没有关系

    console.log = function(a){
      alert(a)
      return undefined 
    }
    console.log(1)
    // 结果先alert1,再打印undefined
    
    

    2.匿名函数
    function(input1, input2){ return }
    会提示出错,但是语法没错,我们需要把匿名函数赋给一个变量
    使用 var a = function(input1, input2){ return }就没有问题

    3.一点区别:(什么时候可以访问y,js的不一致性)

    var x = function y(input1,input2){}
    console.log(y) // y is not defined
    function y(){}
    console.log(y) //OK,undefined
    

    4.window.Function函数对象

    new Function('x', 'y', 'return x+y')
    new Function('x','y','return x+'+n+'+y') //return x+n+y
    

    5.箭头函数:f = (x,y) => {return x+y }

    sum = (x, y) => {return x+y } 
    sum(1,2) //3
    

    只有一句话,花括号和return可以同时去掉

    sum = (x, y) =>  x+y 
    sum(2,3)  //5
    

    新例子:n2 = (n) =>n*n,这里如果参数只有anonymous 一个,可以去掉括号
    n2 = n =>n*n

    6.附
    函数有一个name属性

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

    二、函数调用

    eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。比如eval('alert(1)')显示1

    利用对象,模拟函数的运行:(区别f与f.call())

    var f = {}
    f.fbody = 'console.log(1)'
    f.call = function(){
        eval(f.fbody)
    }
    
    f.call()  //1
    

    函数就是一个对象,是可以执行一段代码的对象。

    示意图
    关于调用方法f(1,2) 与 f.call(undefined,1,2)实际上是等价的。在这里右边可以称之为真正的调用,以后就这么用:
    function f(x,y){return x+y}
    f.call(undefined,1,3)
    

    三、什么是this和arguments

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

    在上例中,this就是undefined,arguments就是1,3。也就是说,
    1.call的第一个参数可以用this得到;
    2.call的后边的参数可以用arguments得到;
    看例子:

    f = function(){
        console.log(this)
        console.log(arguments)
    }
    f.call(undefined,1,2,3)  //window    Arguments(3) [1, 2, 3,...]
    
    //证明this就是第一个参数
    f = function(){
        console.log(this)
    }
    f.call(1)  //1
    

    这里this,应该是undefined,可是打印出来的window。
    浏览器在普通模式下,会将undefined的this变为window。
    在严格模式下,是什么就是什么。看例子,

    f = function(){
      console.log(this)
      console.log(this === window)
    }
    f.call(undefined)  //window  true
    
    f = function(){
      'use strict'
      console.log(this)
      console.log(this === window)
    }
    f.call(undefined)  //undefined  false
    

    四、call stack调用栈

    在这里试试把:http://latentflip.com/loupe

    五、作用域

    解释一句话:比如,直接写a=3,会认为这是声明全局变量,描述不准确

    //声明全局变量
    function f(){
      a = 3
    }
    f.call()
    a //3
    window.a //3
    
    //在树中找,并赋值
    var b = 1
    function f(){
      b = 2
    }
    f.call()
    b //2
    

    看变量提升的示例:

    var c = 1
    function f2(){
        console.log(c)
        var c = 2
    }
    f2.call()  //undefined
    //上边代码相当于
    function f2(){
        var c
        console.log(c)
        c = 2
    }
    

    看到代码,记住变量声明提升~!!!
    记住作用域~再看一个例子

    var q = 1
    function f(){
        console.log(q)
        var q = 2
        f2.call()
    }
    function f2(){
        console.log(q)
    }
    f2.call()  //1
    

    看一个例子:

    <ul>
      <li>选项1</li>
      <li>选项2</li>
      <li>选项3</li>
      <li>选项4</li>
      <li>选项5</li>
      <li>选项6</li>
    </ul>
    
    var liTags = document.querySelectorAll('li')
    for(var i=0;i<liTags.length;i++){
      liTags[i].onclick = function(){
        console.log(i)
      }
    }
    //实际上只要用户点击,就会打印6,6是for循环结束之后,就变成这个值了。
    

    六、闭包

    如果一个函数,使用了它范围外的变量,那么(这个函数+这个变量)就叫做闭包

    var a = 1;
    function f(){
      console.log(a)
    }
    

    相关文章

      网友评论

          本文标题:js函数

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