1. 首页
  2. 前端进阶
  3. JavaScript

【JS 小书】第 3 章:JavaScript 函数

函数是什么

函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。

函数可以概括为:一次封装,四处使用。

函数的定义

函数的定义方式通常有三种:函数声明方式、函数表达式、 使用Function构造函数 。

函数声明方式

语法:


function 函数名(参数1,参数2,...){ //要执行的语句 }

例:


// 声明 function sum(num1, num2) { return num1 + num2; } // 调用 sum(1, 2) // 3

函数表达式

语法:


var fn = function(参数1,参数2,...){ //要执行的语句 };

例:


// 声明 var sum = function(num1,num2){ return num1+num2; }; // 调用 sum(1, 2) // 3

使用Function构造函数

Function构造函数可以接收任意数量的参数,最后一个参数为函数体,其他的参数则枚举出新函数的参数。其语法为:


new Function("参数1","参数2",...,"参数n","函数体");

例:


// 声明 var sum = new Function("num1","num2","return num1+num2"); // 调用 sum(1, 2) // 3

三种定义方式的区别

三种方式的区别,可以从作用域、效率以及加载顺序来区分。

从作用域上来说,函数声明式和函数表达式使用的是局部变量,而 Function()构造函数却是全局变量,如下所示:


var name = '我是全局变量 name'; // 声明式 function a () { var name = '我是函数a中的name'; return name; } console.log(a()); // 打印: "我是函数a中的name" // 表达式 var b = function() { var name = '我是函数b中的name'; return name; // 打印: "我是函数b中的name" } console.log(b()) // Function构造函数 function c() { var name = '我是函数c中的name'; return new Function('return name') } console.log(c()()) // 打印:"我是全局变量 name",因为Function()返回的是全局变量 name,而不是函数体内的局部变量。

从执行效率上来说Function()构造函数的效率要低于其它两种方式,尤其是在循环体中,因为构造函数每执行一次都要重新编译,并且生成新的函数对象。

来个例子:

var start = new Date().getTime()

for(var i = 0; i < 10000000; i++) {
  var fn = new Function('a', 'b', 'return a + b')
  fn(i, i+1)
}
var end = new Date().getTime();
console.log(`使用Function构造函数方式所需要的时间为:${(end - start)/1000}s`)
// 使用Function构造函数方式所需要的时间为:8.646s

start = new Date().getTime();
var fn = function(a, b) {
  return a + b;
}
for(var i = 0; i < 10000000; i++) {
  fn(i, i+1)
}
end = new Date().getTime();
console.log(`使用表达式的时间为:${(end - start)/1000}s`)
// 使用表达式的时间为:0.012s

由此可见,在循环体中,使用表达式的执行效率比使用 Function()构造函数快了很多很多。所以在 Web 开发中,为了加快网页加载速度,提高用户体验,我们不建议选择 Function ()构造函数方式来定义函数。

最后是加载顺序,function 方式(即函数声明式)是在 JavaScript 编译的时候就加载到作用域中,而其他两种方式则是在代码执行的时候加载,如果在定义之前调用它,则会返回 undefined


console.log(typeof f) // function console.log(typeof c) // undefined console.log(typeof d) // undefined function f () { return 'JS 深入浅出' } var c = function () { return 'JS 深入浅出' } console.log(typeof c) // function var d = new Function('return "JS 深入浅出"') console.log(typeof d) // function

函数的参数和返回值

函数的参数-arguments

JavaScript 中的函数定义并未指定函数形参的类型,函数调用也未对传入的实参值做任何类型检查。实际上,JavaScript 函数调用甚至不检查传入形参的个数。


function sum(a) { return a + 1; } console.log(sum(1)); // 2 console.log(sum('1')); // 11 console.log(add()); // NaN console.log(add(1, 2)); // 2

当实参比形参个数要多时,剩下的实参没有办法直接获得,需要使用即将提到的arguments对象。

JavaScript中的参数在内部用一个数组表示。函数接收到的始终都是这个数组,而不关心数组中包含哪些参数。在函数体内可以通过arguments对象来访问这个参数数组,从而获取传递给函数的每一个参数。arguments对象并不是Array的实例,它是一个类数组对象,可以使用方括号语法访问它的每一个元素。


function sum (x) { console.log(arguments[0], arguments[1], arguments[2]); // 1 2 3 } sum(1, 2, 3)

arguments对象的length属性显示实参的个数,函数的length属性显示形参的个数。


function sum(x, y) { console.log(arguments.length); // 3 return x + 1; } sum(1, 2, 3) console.log(sum.length) // 2

函数的参数-arguments

JavaScript 中的函数定义并未指定函数形参的类型,函数调用也未对传入的实参值做任何类型检查。实际上,JavaScript 函数调用甚至不检查传入形参的个数。


function sum(a) { return a + 1; } console.log(sum(1)); // 2 console.log(sum('1')); // 11 console.log(add()); // NaN console.log(add(1, 2)); // 2

函数的参数-同名参数

在非严格模式下,函数中可以出现同名形参,且只能访问最后出现的该名称的形参。


function sum(x, x, x) { return x; } console.log(sum(1, 2, 3)) // 3

而在严格模式下,出现同名形参会抛出语法错误。


function sum(x, x, x) { 'use strict'; return x; } console.log(sum(1, 2, 3)) // SyntaxError: Duplicate parameter name not allowed in this context

函数的参数-参数个数

当实参比函数声明指定的形参个数要少,剩下的形参都将设置为undefined值。


function sum(x, y) { console.log(x, y); } sum(1); // 1 undefined

函数的返回值

所有函数都有返回值,没有return语句时,默认返回内容为undefined


function sum1 (x, y) { var total = x + y } console.log(sum1()) // undefined function sum2 (x, y) { return x + y } console.log(sum2(1, 2)) // 3

如果函数调用时在前面加上了new前缀,且返回值不是一个对象,则返回this(该新对象)。


function Book () { this.bookName = 'JS 深入浅出' } var book = new Book(); console.log(book); // Book { bookName: 'JS 深入浅出' } console.log(book.constructor); // [Function: Book]

如果返回值是一个对象,则返回该对象。


function Book () { return {bookName: JS 深入浅出} } var book = new Book(); console.log(book); // { bookName: 'JS 深入浅出' } console.log(book.constructor); // [Function: Book]

函数的调用方式

JS 一共有4种调用模式:函数调用、方法调用、构造器调用和间接调用。

函数调用

当一个函数并非一个对象的属性时,那么它就是被当做一个函数来调用的。对于普通的函数调用来说,函数的返回值就是调用表达式的值


function sum (x, y) { return x + y; } var total = sum(1, 2); console.log(total); // 3

使用函数调用模式调用函数时,非严格模式下,this被绑定到全局对象;在严格模式下,thisundefined


// 非严格模式 function whatIsThis1() { console.log(this); } whatIsThis1(); // window // 严格模式 function whatIsThis2() { 'use strict'; console.log(this); } whatIsThis2(); // undefined

方法调用

当一个函数被保存为对象的一个属性时,称为方法,当一个方法被调用时,this被绑定到该对象。


function printValue(){ console.log(this.value); } var value=1; var myObject = {value:2}; myObject.m = printValue; //作为函数调用 printValue(); //作为方法调用 myObject.m();

咱们注意到,当调用printValue时,this绑定的是全局对象(window),打印全局变量value1。但是当调用myObject.m()时,this绑定的是方法m所属的对象Object,所以打印的值为Object.value,即2

构造函数调用

如果函数或者方法调用之前带有关键字new,它就构成构造函数调用。


function fn(){ this.a = 1; }; var obj = new fn(); console.log(obj.a);//1

参数处理:一般情况构造器参数处理和函数调用模式一致。但如果构造函数没用形参,JavaScript构造函数调用语法是允许省略实参列表和圆括号的。

如:下面两行代码是等价的。


var o = new Object(); var o = new Object;

函数的调用上下文为新创建的对象。


function Book(bookName){ this.bookName = bookName; } var bookName = 'JS 深入浅出'; var book = new Book('ES6 深入浅出'); console.log(bookName);// JS 深入浅出 console.log(book.bookName);// ES6 深入浅出 Book('新版JS 深入浅出'); console.log(bookName); // 新版JS 深入浅出 console.log(book.bookName);// ES6 深入浅出

1.第一次调用Book()函数是作为构造函数调用的,此时调用上下文this被绑定到新创建的对象,即 book。所以全局变量bookName值不变,而book新增一个属性bookName,值为'ES6 深入浅出'

2.第二次调用Book()函数是作为普通函数调用的,此时调用上下为this被绑定到全局对象,在浏览器中为window。所以全局对象的bookNam值改变为' 新版JS 深入浅出',而book的属性值不变。

间接调用

JS 中函数也是对象,函数对象也可以包含方法,call()apply()方法可以用来间接地调用函数。

这两个方法都允许显式指定调用所需的this值,也就是说,任何函数可以作为任何对象的方法来调用,哪怕这个函数不是那个对象的方法。两个方法都可以指定调用的实参。call()方法使用它自有的实参列表作为函数的实参,apply()方法则要求以数组的形式传入参数。


var obj = {}; function sum(x,y){ return x+y; } console.log(sum.call(obj,1,2));//3 console.log(sum.apply(obj,[1,2]));//3

词法(静态)作用域与动态作用域

作用域

通常来说,一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

词法作用域

词法作用域,也叫静态作用域,它的作用域是指在词法分析阶段就确定了,不会改变。而与词法作用域相对的是动态作用域,函数的作用域是在函数调用的时候才决定的。

来个例子,如下代码所示:


var blobal1 = 1; function fn1 (param1) { var local1 = 'local1'; var local2 = 'local2'; function fn2(param2) { var local2 = 'inner local2'; console.log(local1) console.log(local2) } function fn3() { var local2 = 'fn3 local2'; fn2(local2) } fn3() } fn1()

当浏览器看到这样的代码,不会马上去执行,它会先生成一个抽象语法树。上述代码生成的抽象语法树大概是这样的:

码农进阶题库,每天一道面试题 or Js小知识

执行fn1函数,fn1中调用 fn3(),从fn3函数内部查找是否有局部变量 local1,如果没有,就根据抽象树,查找上面一层的代码,也就是 local1 等于 'local1' ,所以结果会打印 'local1'

同样的方法查找是否有局部变量 local2,发现当前作用域内有local2变量,所以结果会打印 'inner local2

思考

有如下的代码:


var a = 1; function fn() { console.log(a) }

两个问题:

  1. 函数 fn 里面的变量 a, 是不是外面的变量 a
  2. 函数 fn 里面的变量 a的值, 是不是外面的变量 a的值。

对于第一个问题:

分析一个语法,就能确定函数 fn里面的 a 就是外面的 a

对于第二个问题:

函数 fn 里面的变量 a的值, 不一定是外面的变量 a的值,假设咱们这样做:


var a = 1; function fn() { console.log(a) } a = 2 fn()

这时候当咱们执行 fn() 的时候,打印 a 的值为 2。所以如果没有看到最后,一开始咱们是不知道打印的 a 值到底是什么。

所以词法作用域只能确定变量所在位置,并不能确定变量的值。

调用栈(Call Stack)

什么是执行上下文

执行上下文就是当前JavaScript代码被解析和执行是所在环境的抽象概念,JavaScript中运行任何的代码都是在执行上下文中运行。

执行上下文的类型,主要有两类:

  • 全局执行上下文:这是默认的,最基础的执行上下文。不在任何函数中的代码都位于全局执行上下文中。共有两个过程:1.创建有全局对象,在浏览器中这个全局对象就是window对象。2.将this指针指向这个全局对象。一个程序中只能存在一个执行上下文。
  • 函数执行上下文:每次调用函数时,都会为该函数创建一个新的执行上下文。每个函数都拥有自己的执行上下文,但是只有在函数被调用的时候才会被创建。一个程序中可以存在多个函数执行上下文,这些函数执行上下文按照特定的顺序执行一系列步骤,后文具体讨论。

调用栈

调用栈,具有LIFO(Last in, First out 后进先出)结构,用于存储在代码执行期间创建的所有执行上下文。

当JavaScript引擎首次读取脚本时,会创建一个全局执行上下文并将其push到当前执行栈中。每当发生函数调用时,引擎都会为该函数创建一个新的执行上下文并push到当前执行栈的栈顶。

引擎会运行执行上下文在执行栈栈顶的函数,根据LIFO规则,当此函数运行完成后,其对应的执行上下文将会从执行栈中pop出,上下文控制权将转到当前执行栈的下一个执行上下文。

看看下面的代码:


var myOtherVar = 10; function a() { console.log('myVar', myVar); b(); } function b() { console.log('myOtherVar', myOtherVar); c(); } function c() { console.log('Hello world!'); } a(); var myVar = 5;

有几个点需要注意:

  • 变量声明的位置(一个在上,一个在下)
  • 函数a调用下面定义的函数b, 函数b调用函数c

当它被执行时你期望发生什么? 是否发生错误,因为ba之后声明或者一切正常? console.log 打印的变量又是怎么样?

以下是打印结果:


"myVar" undefined "myOtherVar" 10 "Hello world!"

1. 变量和函数声明(创建阶段)

第一步是在内存中为所有变量和函数分配空间。 但请注意,除了undefined之外,尚未为变量分配值。 因此,myVar在被打印时的值是undefined,因为JS引擎从顶部开始逐行执行代码。

函数与变量不一样,函数可以一次声明和初始化,这意味着它们可以在任何地方被调用。

所以以上代码在创建阶段时,看起来像这样子:


var myOtherVar = undefined var myVar = undefined function a() {...} function b() {...} function c() {...}

这些都存在于JS创建的全局上下文中,因为它位于全局作用域中。

在全局上下文中,JS还添加了:

  • 全局对象(浏览器中是 window 对象,NodeJs 中是 global 对象)
  • this 指向全局对象

2. 执行

接下来,JS 引擎会逐行执行代码。

myOtherVar = 10在全局上下文中,myOtherVar被赋值为10

已经创建了所有函数,下一步是执行函数 a()

每次调用函数时,都会为该函数创建一个新的上下文(重复步骤1),并将其放入调用堆栈。


function a() { console.log('myVar', myVar) b() }

如下步骤:

  • 创建新的函数上下文
  • a 函数里面没有声明变量和函数
  • 函数内部创建了 this 并指向全局对象(window)
  • 接着引用了外部变量 myVarmyVar 属于全局作用域的。
  • 接着调用函数 b函数b的过程跟a一样,这里不做分析。

下面调用堆栈的执行示意图:

码农进阶题库,每天一道面试题 or Js小知识

  • 创建全局上下文,全局变量和函数。
  • 每个函数的调用,会创建一个上下文,外部环境的引用及 this。
  • 函数执行结束后会从堆栈中弹出,并且它的执行上下文被垃圾收集回收(闭包除外)。
  • 当调用堆栈为空时,它将从事件队列中获取事件。

往期推荐

作者:前端小智
链接:https://segmentfault.com/a/1190000020616499

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:【JS 小书】第 3 章:JavaScript 函数

链接:https://www.javascriptc.com/3383.html

« 前端攻城狮都需要知道的一些CSS属性选择器
能帮我们更快更好的学习编程的10个好技巧»
Flutter 中文教程资源

相关推荐

QR code