JS(第二十六)ES6语法中function

简介: JS(第二十六)ES6语法中function

1 Function函数的定义

方式1 函数声明方式 function 关键字 (命名函数)

function fn(){}

方式2 函数表达式(匿名函数)

var fn = function(){}

方式3 new Function()

var f = new Function('a', 'b', 'console.log(a + b)');
f(1, 2);
var fn = new Function('参数1','参数2'..., '函数体')

Function 里面参数都必须是字符串格式第三种方式执行效率低,也不方便书写,因此较少使用所有函数都是 Function 的实例(对象)  函数也属于对象

<!-- 函数定义的方式 -->
<script>
  // 方式1 函数声明方式 function 关键字 (命名函数)
  function fn(){
    console.log("fn")
    // 方式2 函数表达式(匿名函数)
    let fn2=function(){
      console.log("fn2")
      // 方式3 new Function() 
      // Function 里面参数都必须是字符串格式
      // 第三种方式执行效率低,也不方便书写,因此较少使用
      // 所有函数都是 Function 的实例(对象)  
      // 函数也属于对象
      // 
      var fn3=new Function('a','b','console.log(a + b)')
      fn3(3,4)
    }
    fn2()
  }
  fn()
</script>

 

2 Function函数的调用

<script>
  /* 1. 普通函数 */
  function fn() {
    console.log('出道即是顶峰');
    console.log(this)
  }
   fn(); 
  /* 2. 对象的方法 */
  var o = {
    sayHi: function() {
      console.log('路漫漫其修远兮,吾将上下而求索');
    console.log(this)
    }
  }
  o.sayHi();
  /* 3. 构造函数*/
  function Star() {
    console.log("构造函数")
    console.log(this)
  };
  new Star();
  /* 4. 绑定事件函数*/
  var btn =document.querySelectorAll("btton")
   btn.onclick = function() {};   // 点击了按钮就可以调用这个函数
  /* 5. 定时器函数*/
  setInterval(function() {
    console.log(this)
  }, 1000); 
   // 这个函数是定时器自动1秒钟调用一次
  /* 6. 立即执行函数(自调用函数)*/
  (function() {
    console.log('人生的巅峰');
    console.log(this)
  })();
</script>

 

3 Function改变this指向

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Function改变this指向</title>
</head>
<body>
  <!-- call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向
应用场景:  经常做继承.  -->
<script>
  const o={
    name:"我叫张三"
  }
  function fn(a,b){
    console.log((this))
    console.log(a+b)
  }
  fn(1,2)// 此时的this指向的是window 运行结果为3
  fn.call(o,2,3) 此时的this指向的是对象o,参数使用逗号隔开,运行结果为3
</script>
<!--  apply() 方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的 this 指向。
  应用场景:  经常跟数组有关系 -->
</body>
</html>

 

4 functionApply

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const o = {
      name: 'andy'
    }
     function fn(a, b) {
          console.log(this);
          console.log(a+b)
    };
    fn(1,2)// 此时的this指向的是window 运行结果为3
    fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3
  </script>
</body>
</html>

 

5 FunctionBind

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
     var o = {
     name: 'andy'
     };
    function fn(a, b) {
      console.log(this);
      console.log(a + b);
    };
    var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
    f();//调用新函数  this指向的是对象o 参数使用逗号隔开
  </script>
</body>
</html>

 

6 闭包

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 变量根据作用域的不同分为两种:全局变量和局部变量。
  1. 函数内部可以使用全局变量。
  2. 函数外部不可以使用局部变量。
  3. 当函数执行完毕,本作用域内的局部变量会销毁 -->
  <!-- 闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用域可以访问另外一个函数内部的局部变量。  -->
  <script>
    function all(){
      var num=1;
      function all2(){
        console.log(num);
        var age=22;
        function all3(){
          console.log(age)
        }
        all3()
      }
      all2()
    }
    all()
  </script>
</body>
</html>

相关文章
|
22天前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
1月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
12天前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
33 9
|
23天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
17天前
|
前端开发 JavaScript
ES6新标准下JS异步编程Promise解读
ES6新标准下JS异步编程Promise解读
23 3
|
17天前
|
JavaScript 安全
ES6中JS类实现的解读
ES6中JS类实现的解读
17 2
|
2月前
|
JSON 前端开发 JavaScript
|
1月前
|
JavaScript 前端开发
一个js里可以有多少个async function,如何用最少的async function实现多个异步操作
在 JavaScript 中,可以通过多种方法实现多个异步操作并减少 `async` 函数的数量。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
23 2
|
2月前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
50 3