函数知多少（一）

2json 发布于2019-08-21 10:48 / 1070人阅读

摘要：从定义函数说起如何定义函数一般来说，定义函数的方式有两种，分别是函数声明和函数表达式。我们声明了一个变量，接着又定义了一个函数，我们通过监视窗口发现一直被定义成了一个函数，显然，函数声明的优先级高于变量声明。

从定义函数说起 如何定义函数？

一般来说，定义函数的方式有两种，分别是函数声明和函数表达式。

//函数声明
function foo1() {
    console.log("hello");
}

//函数表达式
var foo2 = function () {
    console.log("javascript");
}

第一次使用的时候并没有觉得这两者有什么特别的差别，那我们来试试在最前面加入执行函数的代码，是最前面哦。

foo1();
foo2();

执行一下，WTF！怎么报错了，我们看看错误是什么？Uncaught TypeError: foo1 is not a function，OK，我们来设置断点来分析一下，这里，我们把foo1和foo2加入监视窗口；我们可以看到foo1函数执行之前就已经获得了定义，而foo2函数却显示未定义，到这里我们就明白了。但是为什么foo1就生效了呢？我们来说说声明提升。

声明提升

刚才我们在一开始调用foo1的时候发现该函数已经被定义了，证实了采用声明形式定义的函数有声明提升的特征，何为声明提升？即可以在定义该函数之前调用。而采用表达式形式定义的函数只能顺序执行，你不能在定义该函数之前调用(大家可以自己试试把调用函数的代码放在不同位置，以及调换两个函数的位置)。
接下来我们通过另一段代码，来看看函数声明和变量声明。

var foo;
function foo() {
    console.log("hello javascript");
}
foo();

我们声明了一个变量foo，接着又定义了一个函数foo，我们通过监视窗口发现foo一直被定义成了一个函数，显然，函数声明的优先级高于变量声明。真的是这样吗？把上面的代码稍微改造一下。

var foo = "1";
function foo() {
    console.log("hello javascript");
}
foo();

执行一下，咦？又报错了，Uncaught TypeError: foo is not a function，在执行var foo = "1"之后，监视器写着foo: "1"，我们声明的函数被变量覆盖了，到这里我们可以得到结论了，经过初始化的变量声明优先级高于函数声明。

关于参数

在函数中引入参数，想必大家肯定很熟悉了。

var str = "hello world";

(function foo(obj) {
    console.log("first inside:" + obj);//first inside:hello world
    obj = "hello javascript";
    console.log("second inside:" + obj);//second inside:hello javascript
}(str));

console.log("outside:" + str);//outside:hello world

我们都知道在函数内部的改变全局变量的值对外部是不可见的，就像上面的代码，我们在函数内部改变str的值，对外部毫无影响。现在我们把参数换成对象试试会怎样。

var people = {
    age: 18,
    sex: "man",
    location: "hangzhou"
};

(function foo(obj) {
    console.log("first inside:" + obj.age);//first inside:18
    obj.age = 23;
    console.log("second inside:" + obj.age);//second inside:23
}(people));

console.log("outside:" + people.age);//outside:23

涨知识了，如果参数是对象，在函数内部对该对象做出的改变对外部是可见的。

课后题？

function foo() {

}
foo();
var foo = function () {

}

foo()执行的是哪个函数呢？把三段代码的位置调换一下又会有是什么情况呢？大家可以自己研究一下。

写在最后

昨天开始打算写这篇文章之前，本以为很好理解的，然而自己就被第一个定义函数的方式卡了很久，之前听室友讲维护一个blog就够累的了，还录制教学视频、维护个人网站？当时还不觉得，结果轮到自己上手写文章的时候才发现真的很不容易，真的很佩服一直坚持写blog，分享文章的那些人，正是你们乐于分享，才让更多的开发者能够了解到更广泛的知识。另外，作者作为前端新兵，本文肯定有不当之处，欢迎批斗～～～

云服务器 GPU云服务器让js函数只执行一次用c语言设一函数专线宽带多少一年第一商务多少钱

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86234.html

函数知多少（二）

摘要：前言上次聊了关于定义函数的知识，还有参数方面的，这次先补充一点参数小知识，还有简单的讲一下闭包。在这里，函数包含了一个内部函数，所以可以使用引入的参数。我们把函数作为返回值赋给，当然，同时返回的还有。前言上次聊了关于定义函数的知识，还有参数方面的，这次先补充一点参数小知识，还有简单的讲一下闭包。 arguments对象引入的参数会保存在arguments数组对象中，第一个引入的参...

Eidesen 2019-08-19 17:10 评论0 收藏0
[js高手之路]this知多少

摘要：关键字在中的变化非常的灵活，如果用的不好就非常恶心，用的好程序就非常的优雅，灵活，飘逸所以掌握的用法，是每一个前端工程师必知必会的而且这个也是一些大公司笔试中常见的考察项第一种单独的，指向的是这个对象注当前的执行环境是所以指向了第二种全局函 this关键字在javascript中的变化非常的灵活，如果用的不好就非常恶心，用的好,程序就非常的优雅，灵活，飘逸.所以掌握this的用法，是每...

APICloud 2019-08-20 19:07 评论0 收藏0
JavaScript数组知多少

摘要：数组中的元素自动前移，比慢的多。该方法接受一个返回值为布尔类型的函数，对数组中得每个元素使用该函数，如果对于所有的元素，该函数都返回则该方法返回。数组的维基百科定义是：在编程语言中，数组数据结构（英语：array data structure），简称数组（英语：Array），是一种数据结构，是数据元素（elements）的集合。元素可以通过索引来任意存取，索引通常是数字，用来计算元...

Coding01 2019-08-21 11:18 评论0 收藏0
【JS基础】类型转换知多少

摘要：正确的解释是允许在相等比较中进行强制类型转换，而不允许。参考资料小议下字符串比较大小中的强制类型转换核心概念类型转换对象和方法隐式类型转换小结开胃菜先说一个题外话，我在工作中遇到一个问题，需要比较 08:00 和 09:00 的大小，最后我找到三种方法：在两个字符串前后各拼接相同的年月日和秒，拼成完整的时间格式进行比较： var head = 2016-01-01 var fo...

AdolphLWQ 2019-08-23 17:59 评论0 收藏0