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>

相关文章
|
1月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
26 5
|
1月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
25 3
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
56 4
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
32 1
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
45 0
|
2月前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
23 1
|
3月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
47 9
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
35 0
|
3月前
|
前端开发 JavaScript
ES6新标准下JS异步编程Promise解读
ES6新标准下JS异步编程Promise解读
41 3

热门文章

最新文章

下一篇
DataWorks