JavaScript百炼成仙 1.18 函数七重关之一 (函数定义)

简介: JavaScript百炼成仙 1.18 函数七重关之一 (函数定义)

“这小娃娃到真是好大的口气,一口气说了函数有七重关,这老夫倒要好好品鉴一番。”尹曾琪目录精光,口气中带着一丝丝嘲讽,却也有一丝好奇。


林元青也被叶小凡的话吓了一跳,全场更是炸开了锅。


“这个叶小凡,说话还真是狂妄,什么函数七重关,我倒要看看他能够说出个什么来!”


罗丹面色凝重,眼睛更是一眨不眨地盯着叶小凡。叶小凡也愣了一下,讲真,这实在是怨不得叶小凡,这函数七重关,可是叶老亲自教导自己的。在平时和叶老的交流中,叶小凡也早已习惯把函数七重关挂在嘴边。谁知道,自己把函数七重关一讲,会引起这么大的轰动!


“好,叶小凡,你就说说,你所谓的函数七重关究竟是什么吧!”林元青也微笑着摇了摇头,对叶小凡说道。


“是,弟子遵命。函数七重关,这第一重关,自然指的是函数的定义。”叶小凡小声说道。


“函数的定义需要用到function关键字,定义函数的语法方才这位师兄也已经讲过了,我这边不再赘述。只是,我这边需要提一下的是,除了刚才那位师兄提到的定义函数的方法,其实还有另一种方法。”说着,叶小凡随手打出一段代码流。


//定义函数
function myFunction(){
    //函数体
    document.write("This is My First Function!<br>");
}


“这是第一种定义函数的方法,也是最为常用的方法。哦,对了里面的document.write方法表示用JavaScript向页面输出一段话。接下来,我再来讲讲第二种方法。”说着,叶小凡又随手打出一段代码流。


var a = function(){
    document.write("This is My Second Function!");
}


“这便是第二种定义函数的方法了,和第一种方法有所不同,体现在第二种定义函数的方法需要先定义一个变量,比如var a,然后还是用function关键字去定义一个函数,再把这个函数赋值给变量a。因为最后要赋值给变量a的,因此这里定义函数的时候就不需要加上函数的名字了,这就是其中一个区别。用这种方法定义出来的函数,函数的名字就是变量的名字,也就是说,我要去调用这个函数,就这样做。”


a();


“哗众取宠,这两种方法本质上有什么区别,不都是一样调用么?”对面弟子对叶小凡的讲解嗤之以鼻。


“这自然是有区别的,刚才我讲了第一个区别,现在说第二个区别,这第二个区别,就体现在函数的调用上。”说着,叶小凡又随手打出一段代码流。


a();
var a = function(){
    document.write("This is My Second Function!");
}


“这位师兄,你说我这段代码可以成功调用函数a么?”


“你这不废话么,当然可以了!”


“好,那师兄请看。”叶小凡开始执行代码。


众人看得亲切,之间代码直接报错了!对面弟子瞬间不说话了,场面一度有点尴尬。


“如果是用第一种方法定义的函数,把调用语句放在前面,是可以成功调用的。”


myFunction();
//定义函数
function myFunction(){
    //函数体
    document.write("This is My First Function!<br>");
}

代码运行,成功在页面上打印出:This is My First Function!


众人一下子又炸开了锅,有的大弟子一脸得难以置信。就连尹曾琪也对叶小凡稍微侧目,场外的罗丹面色则更加凝重。


“导致这种情况的原因是,如果用第一种方法去定义的函数,会被提前加载,因此调用语句可以写在函数的定义之前,因为那个时候函数已经被加载完毕了。而用第二种方式定义的函数,是不会被提前加载的。换句话说,必须要执行到函数定义的语句时,才会加载这个函数,正因为这个道理,刚才的代码才会直接报错。因为在调用a函数的时候,a函数还没有加载啊,那么强行调用一个不存在的函数,自然是不被允许的咯!”


“接下来,我再举一个例子来说明这个情况吧。”说着,叶小凡又随手打出一段代码流。


console.log(a);
var a = function(){
    alert("函数被调用了!");
}
console.log(a);


代码运行后的结果,一如叶小凡所言,第一个a打印出来是undefined,表示未定义。第二个a打印出来就是具体的函数了,说明这个时候函数a已经被加载完毕!


“我有问题,为什么第一个a打印出来是undefined,而不是直接报错呢?”对面弟子疑惑得问到,接着他又侃侃而谈:“我之前遇到过这种情况,就是去引用一个从来没有被定义过的变量,得到的结果是直接报错的!比如...”


console.log(apple);


“看吧,这样写的话就直接报错了,因为我从来没有在任何地方定义一个apple这个变量。你刚才调用一个还未被加载的函数,为什么是打印出来undefined还不是报错呢?”


“是啊,这是为什么呢,看看叶小凡怎么说?”场外又窃窃私语起来。


“你混淆了概念,函数有没有被加载,跟变量有没有被定义是不同的事情,不要放在一起谈论。就比如说我刚才打的代码。”


console.log(a);
var a = function(){
    alert("函数被调用了!");
}
console.log(a);


“注意看,函数有没有被加载,可以看成function有没有赋值给变量a。从代码上来看,自然是没有的。因为console.log语句是写在var a = function... 的前面啊。也就是说,调用a变量的时候,a变量并没有被赋值。但是不管a变量有没有被赋予一个funciton函数,我就问你一个问题,a有没有定义?”


“额,这个,定义是定义了,可是...它并没有被运行到啊!”对面弟子一脸的不服气。


“这个就要说到JavaScript代码的运行机制了。”叶小凡淡淡地说到,丝毫没有慌乱,而且,在叶老给自己灌输函数七重关的时候,自己也有过一样的疑问。


相关文章
|
9月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
350 19
|
11月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
273 32
|
12月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
164 4
JavaScript基础知识-函数的参数
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
140 3
|
JavaScript
js中函数的传递参数
js中函数的传递参数
232 0
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
181 1
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
220 3

热门文章

最新文章