在JavaScript中,很多组织代码的技巧都要求精通并熟练地使用函数。学习JavaScript的分水岭就是能否熟知函数要点
- 函数声明创建的函数是在执行其他代码前定义的;
函数表达式是在运行阶段与其他代码一起执行的,因此在函数表达式所在的语句执行前,它创建的函数是未定义的。
- 定义函数的方式有两种:使用函数声明和使用函数表达式。
(函数引用是一个指向函数的值。) - 函数声明在执行代码前处理
函数表达式在运行阶段随其他代码一起执行。 - 处理函数声明时,浏览器创建一个函数以及一个与函数同名的变量,并将指向函数的引用存储到变量中。
处理函数表达式时,浏览器创建一个函数,但你必须显式地处理指向这个函数的引用。
function quack(num){//这是函数声明语句
...}quack(3);
//调用函数
- 标准的函数声明(由
function
关键字、函数名、形参、代码块组成) - 创建了一个函数,名称为quack
- 指向该函数的函数引用存储在名为quack的同名变量中,该变量由浏览器创建
然而,关键字
function
还有另一种用法,看起来不那么标准var fly=function(num){...};
//这是赋值语句,把函数表达式赋给变量flyfly(3);
//调用函数
- 直接使用关键字
function
创建一个函数表达式,这个函数没有名称 - 函数表达式的结果是一个值:是函数引用,即指向函数的引用(理解为指针)
- 函数引用在这里被赋给一个变量fly,即:fly的值是一个函数引用
- 函数引用可以用来调用函数;也可以将它们存储在对象中、传递给函数;还可以从函数返回它们(如同对象引用一样)
- 它们的差别主要在于声明函数的阶段;
- 调用函数时,浏览器处理它们的方式完全相同
首先区分声明与表达式:
声明是一条完整的语句;
表达式只是语句的一部分,任何结果为一个值的东西都称为表达式
- 使用函数声明时,为函数指定名称,并且将创建一个与函数同名的变量,并让它指向函数;
- 而使用函数表达式时,通常不给函数指定名称,因此你要么在代码中将函数赋给一个变量,要么以其他方式使用函数表达式。(后面将讨论这些使用函数表达式的方式)
ps. 可认为函数声明包含了隐藏的赋值语句,自动将函数引用赋给与函数名同名的变量;区别二 函数在何时被定义
而函数表达式不是完整语句,只会返回一个函数引用,显式地将其赋给变量,语句才完整
- 函数声明在执行代码前处理
在执行任何代码前,浏览器先在代码中首先查找所有的函数声明。每当找到一个函数声明,浏览器创建一个函数 以及 一个与函数同名的变量,还将函数引用存储到该变量中
- 函数表达式在运行阶段(随其他代码一起)被处理
执行代码时,如果遇到函数表达式,浏览器创建一个函数,只是单纯地返回其函数引用,你必须显式地处理这个函数引用(例如将函数引用赋给一个变量)
处理函数表达式时,浏览器创建一个函数,只是单纯地返回其函数引用,你必须显式地处理这个函数引用(例如将函数引用赋给一个变量)相同点 调用函数时,浏览器的处理方式 无论使用函数声明还是函数表达式创建的函数,在调用函数时,浏览器处理它们的方式完全相同
调用函数的方法 在函数引用后面加上
()
即可调用函数ps. 这也是区分函数和变量的技巧:有
()
就是函数,没有就是变量务必将[创建函数]放在[调用函数]之前
先区分函数的创建和定义:可见:
前面提到,浏览器分两遍来处理JavaScript代码:
- 创建函数:用代码描述一个函数,有函数声明和函数表达式两种方法
- 定义函数:浏览器发现函数声明和函数表达式后,定义函数,经过定义后,浏览器才知道函数的功能、才知道如何使用函数
第一遍,浏览器分析所有的函数声明,并定义由函数声明创建的函数;
第二遍,浏览器按编写的顺序执行代码,并定义由函数表达式创建的函数。
在代码的任何地方,由函数声明创建的函数都是已经定义的,这被称为提升(hoisting);
而由函数表达式创建的函数,必须等待浏览器执行到函数表达式那一行,这个函数才被定义,才能在后面调用这个函数
因此:
(1)由函数声明创建的函数,可以在代码的任何地方创建;
(2)由函数表达式创建的函数,必须在使用前创建,否则无法正常使用
无论用哪种方式创建函数,只要养成习惯,统一在使用前创建函数,就不会出错(i.e. 保持和其他编程语言一致,将创建函数的部分,即描述函数内容的部分,放在调用这个函数之前)
推荐阅读
- JavaScript|JavaScript第二个分水岭——对象
- js事件循环
- 前端开发工程师知识体系|H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)
- vue.js|尚品汇学习笔记
- vue.js|尚品汇后台管理系统
- Vue|解决导航守卫router.beforeResolve使用不了this.$store
- javascript|尚品汇个人理解笔记
- 尚硅谷电商项目|尚硅谷-尚品汇项目开发总结(第三天)
- 尚硅谷电商项目|尚硅谷-尚品汇项目开发总结(第四天)