JavaScript函数进阶

r囧r小猫 2022-10-21 03:50 140阅读 0赞

### 文章目录 ###

*  函数进阶
 *   *  函数的定义方式
     *   *  函数声明
         *  函数表达式
         *  函数声明与函数表达式的区别
     *  函数的调用方式
     *  函数内 \`this\` 指向的不同场景
     *   *  探究案例：
     *  函数也是对象
     *   *  案例：函数数组的使用

# 函数进阶 #

## 函数的定义方式 ##

### 函数声明 ###

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` 指向的不同：

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

### 探究案例： ###

<!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的构造函数创建出来的实例对象

### 案例：函数数组的使用 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]  
forEach忘了的可以看一下菜鸟的教程：  
[https://www.runoob.com/jsref/jsref-foreach.html][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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221021/87f8230903cf4529b48b1fb40b01d140.png
[https_www.runoob.com_jsref_jsref-foreach.html]: https://www.runoob.com/jsref/jsref-foreach.html