JavaScript（三）—— JavaScript 函数/JavaScript 作用域/JavaScript 预解析/JavaScript 对象

本篇为 JavaScript 系列笔记第三篇，将陆续更新

JavaScript（一）—— 初识JavaScript/注释/输入输出语句/变量/数据类型

JavaScript（二）—— JavaScript 运算符/JavaScript 流程控制/JavaScript 数组

一、JavaScript 函数

---

函数：就是封装了一段 可被重复调用 执行的 代码块，通过此代码块可以实现大量代码的重复使用
 

1. 函数的使用

函数在使用时分为两步：声明函数 和 调用函数

声明函数

// 声明函数
function 函数名() {
    // 函数体代码
}

• function 是声明函数的关键字，必须小写
• 由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum

调用函数

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

函数的封装

• 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

案例：利用函数计算1-100之间的累加和

// 声明函数
function getSum(){
	var sumNum = 0;
  	for (var i = 1; i <= 100; i++) {
    	sumNum += i;
  	}
  	alert(sumNum);
}
// 调用函数
getSum();

2. 函数的参数

---

形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

• 调用的时候实参值是传递给形参的
• 形参简单理解为：不用声明的变量
• 实参和形参的多个参数之间用逗号 , 分隔

函数形参和实参个数不匹配问题

• 注意：在JavaScript中，形参的默认值是 undefined

3. 函数的返回值

---

有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现

• 在使用 return 语句时，函数会停止执行，并返回指定的值
• 如果函数没有 return ，返回的值是 undefined

4. arguments 的使用

---

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个 内置对象。

所有函数都内置了一个 arguments 对象，arguments 对象中 存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

• 具有 length 属性
• 按索引方式储存数据
• 不具有数组的 push , pop 等方法

案例： 求任意个数中的最大值

 

5. 函数的两种声明方式

---

自定义函数方式（命名函数）

利用函数关键字 function 自定义函数方式：

// 声明定义方式
function fn() {...}
// 调用  
fn();

• 因为有名字，所以也被称为 命名函数
• 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

函数表达式方式（匿名函数）

利用函数表达式方式的写法如下：

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

• 函数没有名字（fn 是变量名），所以也被称为 匿名函数
• 这个fn 里面存储的是一个函数
• 函数调用的代码必须写到函数体后面

 

二、JavaScript 作用域

---

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript（es6前）中的作用域有两种：

• 全局作用域
• 局部作用域（函数作用域）

1. 作用域

1. 全局作用域

作用于所有代码执行的环境（整个 script 标签内部）或者一个独立的 js 文件

2. 局部作用域 （函数作用域）

作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

3. JS 没有块级作用域

• 块作用域由 { } 包括
• 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：

if (true) {
	int num = 123;
	system.out.print(num);  // 123
}
system.out.print(num);    // 报错

• JS中没有块级作用域（在ES6之前）

<script>
    if (3 < 5) {
        var num = 10;
    }
    console.log(num);	// 10
</script>

2. 变量的作用域

---

在JavaScript中，根据作用域的不同，变量可以分为两种：

• 全局变量
• 局部变量

全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

• 全局变量在代码的任何位置都可以使用
• 在全局作用域下 var 声明的变量 是全局变量
• 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

• 局部变量只能在该函数内部使用
• 在函数内部 var 声明的变量是局部变量
• 函数的形参实际上就是局部变量

3. 作用域链

---

• 只要是代码，就至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

根据在 内部函数可以访问外部函数变量 的这种机制，用 链式查找 决定哪些数据能被内部函数访问，就称作 作用域链

• 采取 就近原则 的方式来查找变量最终的值

 

三、JavaScript 预解析

---

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析 和 代码执行。

预解析：在当前作用域下，JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义

• 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）

1. 变量预解析（变量提升）

---

变量提升：变量的声明会被提升到 当前作用域 的最上面，变量的赋值不会提升

2. 函数预解析（函数提升）

---

函数提升： 函数的声明会被提升到 当前作用域 的最上面，但是 不会调用函数

3. 预解析案例

---

案例 ： 打印结果为多少？

var num = 10;
fun();

function fun() {
  console.log(num);
  var num = 20;
}

结果为： undefined ，分析代码执行步骤如下：

 

四、JavaScript 对象

---

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由 属性 和 方法 组成的：

• 属性：事物的 特征，在对象中用属性来表示（常用名词）
• 方法：事物的 行为，在对象中用方法来表示（常用动词）

1. 创建对象的三种方式

---

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

• 利用 字面量 创建对象
• 利用 new Object 创建对象
• 利用 构造函数 创建对象

方式一 ：利用字面量创建对象

对象字面量 ：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

1. 对象的创建

// 利用对象字面量创建对象 {}
var obj = {
    uname: '张无忌',
    age: 18,
    gender: '男',
    sayHi: function() {
        console.log('hi');  
    }
};

• { } 里面采取键值对的形式表示
  • 键：相当于属性名
  • 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
• 多个属性、方法间用 , 隔开
• 方法冒号后跟匿名函数

2. 对象的调用

• 对象里面的属性调用：对象名.属性名

console.log(obj.uname);

• 对象里面属性的另一种调用方式：对象名['属性名']

console.log(obj['age']);

• 对象里面的方法调用：对象名.方法名()

obj.sayHi();

方式二 ： 利用 new Object 创建对象

var obj = new Object();
obj.uname = '张无忌';
obj.gender = '男';
obj.age = 18;
obj.sayHi = function () {
    console.log('hi');
}

• 对象的调用方法同上

方式三：利用构造函数创建对象

构造函数 ：是一种特殊的函数，主要用来 初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些 公共的属性和方法抽取 出来，然后封装到这个函数里面，减少代码复用。

在 JavaScript 中，使用构造函数要时要注意以下两点：

• 构造函数用于创建某一类对象，其 首字母要大写
• 构造函数要 和 new 一起使用 才有意义

function  构造函数名() {
    this.属性 = 值;
    this.方法 = function() {}
}
new 构造函数名();

2. new 关键字

---

new 在执行时会做四件事情：

1. 在 内存中 创建一个新的 空对象
2. 让 this 指向 这个新的对象
3. 执行构造函数里面的代码，给这个新对象 添加属性和方法
4. 返回 这个新对象（所以构造函数里面不需要return）

3. 遍历对象属性

---

for ... in 语句用于对 数组 或者 对象 的属性进行循环操作

for (变量 in 对象) {
	// 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key