正文

关于函数，你知多少？

author  author  2022-09-23  541

关键词：

我们都知道，JS 中没有的类的概念。

而函数则是 JS 中很重要，很重要，很重要的一点。

理解函数也是非常有必要的。

先来看看函数的定义。

如下：

 1 // 函数声明
 2 // 函数声明不会立即调用，可以在你需要的时候调用它
 3 function demo(){
 4 
 5 }
 6 
 7 // 函数表达式, 该函数也可称为匿名函数(无函数名)
 8 // 该函数保存在一个变量中,可通过变量名调用该函数
 9 var demo = funciton(){
10 
11 };
12 
13 // 构造函数（不推荐）
14 // 该方法会造成两次解析代码，且js中 很多都避免使用 new 关键字
15 var demo = new function(){
16 
17 }

上面讲到了“函数的定义”,但是要怎么理解“函数声明”与“函数表达式”的不同呢？

让我们看看什么是“函数提升”？。

“函数提升”,会把当前作用域（作用域的问题，后面会讲到）提升到前面的行为。这又代表着什么好处呢。

举个例子：

 1 // 调用函数 
 2    test();
 3 
 4 // 函数声明
 5 function test(){
 6     alert(‘调用成功‘);
 7 }
 8 
 9 // 调用函数
10    test();  // 报错
11 
12 // 函数表达式
13 var  test = function(){
14    alert(‘调用成功‘)；
15 }

我们知道代码是从上而下的执行，一个变量若没有声明，则会抛出该变量未声明的报错信息。然后如上，为何可以如此呢？

这就是“函数提升”乾坤大罗移的时间了，由于“函数提升”的关系,因此调用函数，可以在函数声明之前。

但是，但是，但是，使用函数表达式不能被提升。

说了这么多，区别找到了吗 ? 除了“函数提升”,在写法上也有不同,这个细心的问题，就交给拥有慧眼的你了。

到这，我们已经了解了，函数的定义。也知晓了常用调用函数的方法。接下来，我们聊聊 函数的参数

说到函数的参数，先看段代码吧！

1  demo(2,3); // 2,3 实参 
2 
3  function demo(sum1,sum2){ // sum1,sum2 虚参
4    return sum1 + sum2;    
5  }

函数参数分为：

显示参数：在函数定义时列出（也称虚参）
隐藏参数（arguments）：在函数调用时传递给函数真正的值（也称实参）

js 函数有个内置对象 arguments 对象，该对象包含了函数调用的参数数组。

参数规则：

函数定义时没有对参数指定数据类型，也就是说，参数可以为任何类型
函数对隐藏参数(arguments)的个数没有检测，也就是说可以传入比定义时参数的多
默认参数的值为 “undefined”

再，再接下来聊聊 函数的调用

也顺带着了解下 this 。

this 是什么？ this 是指向当前调用的对象。

 1 // 作为一个函数调用
 2    test();
 3 
 4 //当函数没有被自身的对象调用时，this的值则会变成全局对象
 5 function test(){
 6     alert(this);   //  若在浏览器中打开,全局对象则是 window对象
 7 }
 8 
 9 // 作为一个对象的方法调用
10 var obj = {
11      sum1 : 10,
12      sum2 : 10,
13      sum   : function(){
14          console.log( sum1+sum2 );
15          console.log( this );
16      }  
17 }
18 // obj对象调用该函数 ，this的值指向当前对象 obj
19      obj.sum(); // 20, obj
20 
21 // 使用构造函数调用函数,
22 function test(name,age){
23     this.name = name;
24     this.age    = age;
25 }
26 // this 无任何值，this的值在调用实例化对象时(new object)创建
27 var obj = new test(‘Beck‘,21);
28       obj.name   // Beck
29 
30 // 自调用函数  
31 (function(){
32    console.log(‘自调用函数‘);
33 })

还有一种方式，函数的方法调用。我们知道，函数在js中也是对象，也有属性和方法。

举个例子

1 function test(sum1,sum2){}
2 // 统计的是参数的个数
3 test.length  // 2

接下来，要了解的是，函数预定义的两个方法 “calc()”,“apply()”;

这两个方法，在于昨天总算明白一点，特此记录下。

这两个方法第一个参数，必须是对象本身，也就是设置 this的值

而 calc() 与 apply() 的区别在于第二个参数的不同、

apply() 的第二个参数,则是合成一个数组，而 calc() 的参数，则是全部显现的定义（从第二个参数开始）

举个例子

 1 // 定义个对象
 2 var obj = {};
 3 // 声明一个函数
 4 function test(sum1,sum2){
 5    console.log(sum1+sum2);  
 6 }
 7 //使用apply方法  没有自身对象调用 this的值提升为全局对象
 8 test.apply(this,[10,10]); // this的值为window ,输出 20
 9 
10 // 设置 this的值为 obj
11 test.apply(obj,[10,10]); // this的值为 obj. 输出20
12 
13 // 值的注意是是，即使只有一个参数，也必须使用 数组的方式传递
14 eg: test.apply(this,[10]);  //不然会报错
15 
16 // 使用 calc 方法 同上，只是参数定义的方式不同
17 test.calc(this,10,10);   // this的值为 window. 输出20
18 test.calc(obj,10,10);   // this的值为 obj ，输出 20

其实，看到两个方法差不多，可能到这，又要很多人纠结了，既然差不多，那么该使用哪个方法好一点呢。

也没必要纠结，使用哪一个方法，具体看你传入的参数哪个方便，哪个方便就使用哪个。

记录就这么多，后续有更好的理解，会持续维护。如果有错的地方，也希望你们指出来。

祝大家学习进步，共勉！

这些芯片知识，你知多少

...牛了，所以分享给大家。点这里可以跳转到教程。”关于芯片，我想大家应该不陌生，因为这两年有关芯片的话题经常登上各大媒体的热搜榜。我们听到最多的就是芯片短缺ÿ 查看详情

这些芯片知识，你知多少

软能力那点事，你知多少(代码片段)

...尤其是在称赞某个人工作表现不错的时候更是如此。然而关于软能力是什么，一百个人有一百种解释，就好像一千个人有一千个哈姆雷特。一、软能力是什么什么是软能力？回答这个问题之前，我们先要了解什么是查看详情

ython的高级特征你知多少？来对比看看(代码片段)

...么。下面是Python的5种高级特征，以及它们的用法。Lambda函数Lambda函数是一种比较小的匿名函数——匿名是指它实际上没有函数名。Python函数通常使用defa_function_name()样式来定义，但对于lambda函数，我们根本没为它命名。这是因为... 查看详情

博弈论，你知多少

“无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。”在《从“... 查看详情

博弈论，你知多少

国内最火的htmlcssjavascript开源项目top榜，你知多少？

对于开发者而言，想要着手前端开发，HTML、CSS和JavaScript是三项必备的基础技能。而如何事半功倍地掌握好这些知识？通过了解当下火热的开源项目不乏为最佳学习姿势。本文盘点国内评分最高且收藏量超过100的前端技术开源项... 查看详情

5g应用发展情况，你知多少

“无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。”最近我在... 查看详情

装修弱电，强电施工知识你知多少？

家里的配电箱强电箱一般开发商都是预先安装在门后的，不适宜自己随便改动位置。但要注意是否安装了保护装置(空气开关，也称断路器)。这样发生短路或超负荷时，能自动跳闸，防止漏电意外。配电箱内的空气开关... 查看详情

ppt的6种逻辑图表关系，你知多少？

说到PPT一个很重要的东西，那就是逻辑图表。PPT中的逻辑图表不仅可以表达逻辑关系还能丰富页面。所以要很好的使用逻辑图表，但是做的逻辑图表不能像下面这样吧。这不是适得其反吗？图片来源于网络上面的图表使用的误区... 查看详情

ppt的6种逻辑图表关系，你知多少？

企业iso14001认证的好处和基本条件，你知多少？

企业ISO14001认证有什么好处呢？通过认证使企业具有了走向市场的通行证,诸多企业招投标的重要条件。树立企业形象，提高企业的知名度、社会公信力。使企业获得进入国际市场的"绿色通行证"。提高企业管理水平及员工环境保... 查看详情

flash终于走向死亡！flash的兴衰之路你知多少

作为最大名鼎鼎的网络多媒体技术之一，Flash的名号可谓是无人不知无人不晓。然而，触手曾伸及形形色色网站的Flash，现在终于要退出历史的舞台。Adobe已经宣布，Flash将会在2020年停止开发和更新，这意味着Flash已经彻底走向淘... 查看详情

网吧行业的过去你知多少？新的未来又在何方？

细数网吧行业风雨20载，可以说是一波未平一波又起。1995年，中国第一家网吧“3C+T”在上海成立，网吧这一新名词开始流传在了大街小巷中。在当时，我国通信终端技术刚刚进入起步阶段，电脑等设备造价昂贵，拥有一台电脑... 查看详情

bim技术在各阶段应用的软件你知多少？

目前，在政府大力推广BIM的前提下建筑行业正处在加速的转型的高峰期，BIM技术的应用已经慢慢逐步被应用到各大项目中，就比如应用BIM技术的很有代表性的建筑中国尊。因此BIM在工程建设的全生命周期各阶段的应用，都需要相... 查看详情

carson带你学android：常见的动画类型你知多少？(代码片段)

前言动画的使用是Android开发中常用的知识可是动画的种类繁多、使用复杂，每当需要采用自定义动画实现复杂的动画效果时，很多开发者就显得束手无策本文将献上一份Android动画简介，包括动画的种类、使用、原理... 查看详情

android底层原理你知多少？你来说说handler吧！(代码片段)

0.前言做Android开发肯定离不开跟Handler打交道，它通常被我们用来做主线程与子线程之间的通信工具，而Handler作为Android中消息机制的重要一员也确实给我们的开发带来了极大的便利。可以说只要有异步线程与主线程通信... 查看详情