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

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

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

文章目录

一、JavaScript 函数
- 1. 函数的使用
- 2. 函数的参数
- 3. 函数的返回值
- 4. arguments 的使用
- 5. 函数的两种声明方式
二、JavaScript 作用域
- 1. 作用域
- 2. 变量的作用域
- 3. 作用域链
三、JavaScript 预解析
- 1. 变量预解析（变量提升）
- 2. 函数预解析（函数提升）
- 3. 预解析案例
四、JavaScript 对象
- 1. 创建对象的三种方式
- 2. new 关键字
- 3. 遍历对象属性

一、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. 作用域

全局作用域

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

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

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

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 在执行时会做四件事情：

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

3. 遍历对象属性

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

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

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

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

JavaScript匿名函数、作用域、预解析
匿名函数: 没有名字的函数/定义时未直接命名的函数. 优点: 非匿名函数在定义时,已经创建了函数对象和作用域对象:所以,即使没有调用也会占用内存空间:但是匿名函数仅在调用时,才临时创建函数对象和作用域 ...
重学前端之（4）函数、作用域、预解析
函数为什么要有函数? 在写代码的时候,有一些常用的代码需要书写多次,如果直接复制粘贴的话,会造成大量的冗余代码. 如果修改呢?? 多个页面呢?? 函数可以封装一段重复的JavaScript代码,它只 ...
【07】JavaScript：05-作用域、变量的作用域、作用域链、预解析、对象
文章目录 JavaScript基础第05天笔记 1 - 作用域 1.1 作用域概述 1.2 全局作用域 1.3 局部作用域 1.4 JS没有块级作用域 2 - 变量的作用域 3 - 作用域链 4 - ...
JavaScript 预解析、对象、错误
单线程记住一句话:JavaScript语言是单线程的区分线程和进程进程是一个工厂,工厂有它的独立资源-工厂之间相互独立-线程是工厂中的工人,多个工人协作完成任务-工厂内有一个或多个工人-工人之间 ...
js变量提升_学习笔记：JS中的作用域和预解析
知识总结:谢静贤.汤昊在javascript中作用域是非常重要的,本文将会说明作用域以及我们在工作,以及面试中的一些面试题,如果有不足的地方希望大家可以评论指出来,自己一定会及时的改正错误,避免大家 ...
this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
javascript之作用域与预解析
js之预解析在谈js的预解析之前,先看一段c++程序 #include <iostream> using namespace std;void useGreet(){greet(); } ...
php函数嵌套作用域,javascript 嵌套的函数（作用域链）_javascript技巧
嵌套的函数(作用域链) 当你进行函数的嵌套时,要注意实际上作用域链是发生变化的,这点可能看起来不太直观.你可把下面的代码置入firebug监视值的变化. var testvar = 'window属性 ...
函数的作用域以及预编译
一.函数的作用域函数作用域有点像单面镜(外面看不到里面,里面可以看到外面) JS的特点:单线程.是解释性语言 (翻译一行,执行一行) 二.预解析 JS预解析三部曲:语法解析 ⇒ 预编译 ⇒ 解释执 ...

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