JavaScript函数进阶

Posted 流楚丶格念

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript函数进阶相关的知识,希望对你有一定的参考价值。

函数进阶

函数的定义方式

函数声明

function foo () {

}

函数表达式

var foo = function () {

}

函数声明与函数表达式的区别

函数声明:

  • 函数声明必须有名字
  • 函数声明会函数提升,在预解析阶段就已创建,声明前后都可以调用

函数表达式:

  • 函数表达式类似于变量赋值
  • 函数表达式可以没有名字,例如匿名函数
  • 函数表达式没有变量提升,在执行阶段创建,必须在表达式执行之后才可以调用

这是一个根据条件定义函数的例子:

if (true) {
  function f () {
    console.log(1)
  }
} else {
  function f () {
    console.log(2)
  }
}

以上代码执行结果在不同浏览器中结果不一致。

不过我们可以使用函数表达式解决上面的问题:

var f

if (true) {
  f = function () {
    console.log(1)
  }
} else {
  f = function () {
    console.log(2)
  }
}

函数的调用方式

函数内 this 指向的不同场景

函数的调用方式决定了 this 指向的不同:

调用方式非严格模式备注
普通函数调用window严格模式下是 undefined
构造函数调用实例对象原型方法中 this 也是实例对象
对象方法调用该方法所属对象紧挨着的对象调用的this
事件绑定方法绑定事件对象当前的实例对象
定时器函数windowwindow

探究案例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
</head>

<body>

</body>

</html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    /*
     *
     * 函数中的this的指向
     *
     *
     * 普通函数中的this是谁?-----window
     * 对象.方法中的this是谁?----当前的实例对象
     * 定时器方法中的this是谁?----window
     * 构造函数中的this是谁?-----实例对象
     * 原型对象方法中的this是谁?---实例对象
     *
     *
     * */

    //严格模式:
    "use strict";//严格模式
    function f1() {
      console.log(this);//window
    }
    f1();


    //普通函数
    function f1() {
      console.log(this);
    }
    f1();

    //定时器中的this
    var inter=setInterval(function () {
      console.log(this);
      clearInterval(inter);
    }, 1000);
    


    //构造函数
    function Person() {
      console.log(this);
      // 对象的方法
      this.sayHi = function () {
        console.log(this);
      };
    }
    //原型中的方法
    Person.prototype.eat = function () {
      console.log(this);
    };
    var per = new Person();
    console.log(per);
    per.sayHi();
    per.eat();

    //BOM:中顶级对象是window,浏览器中所有的东西都是window的
  </script>
</head>
<body>
</body>
</html>

函数也是对象

  • 所有函数都是 Function 的实例

  • 也就是说所有的函数实际上都是Function的构造函数创建出来的实例对象

案例:函数数组的使用

在这里插入图片描述
forEach忘了的可以看一下菜鸟的教程:
https://www.runoob.com/jsref/jsref-foreach.html
第一个参数就是遍历到的当前元素其本身

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    //数组可以存储任何类型的数据

    var arr=[
        function () {
          console.log("1");
        },
        function () {
          console.log("2");
        }
        ,
        function () {
          console.log("3");
        }
        ,
        function () {
          console.log("4");
        },
        function () {
          console.log("5");
        }
    ];
    //回调函数:函数作为参数使用
    arr.forEach(function (ele) {
      ele();
    });


  </script>
</head>
<body>


</body>
</html>

以上是关于JavaScript函数进阶的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript函数函数进阶作用域及预解析

Javascript进阶---闭包

JavaScript高级-----8.函数进阶

javascript-函数进阶

常用Javascript代码片段集锦

javascript进阶笔记