【有趣JS连载】JavaScript 函数 (第3章)

函数是什么

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

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

函数的定义

函数的定义方式通常有三种:函数声明方式、函数表达式、 使用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()

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

640?wx_fmt=png

执行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一样,这里不做分析。

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

640?wx_fmt=gif

创建全局上下文,全局变量和函数。

  • 每个函数的调用,会创建一个上下文,外部环境的引用及 this。

  • 函数执行结束后会从堆栈中弹出,并且它的执行上下文被垃圾收集回收(闭包除外)。

  • 当调用堆栈为空时,它将从事件队列中获取事件。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具Fundebug。


结尾彩蛋

欢迎关注前端之阶公众号,获取更多前端知识,加入前端大群,与知名互联网大佬做朋友,开启共同学习新篇章!

640?wx_fmt=other

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值