JS基础-作用域

1. 作用域概述

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

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突

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

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

---

2. 全局作用域

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

---

3. 局部作用域

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

---

4. JS 没有块级作用域

• 块作用域由 { } 包括

• 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用

  如下 Java 代码，有块级作用域：

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

以上java代码会报错，是因为代码中 { } 即一块作用域，其中声明的变量 num，在 “{ }” 之外不能使用；

• 而类似的 JavaScript 代码，Js中没有块级作用域，但不会报错（在ES6之前）：

if (true) {
	var num = 123;
	console.log(123); //123
}
console.log(123);   //123

---

5. 变量的作用域

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

• 全局变量

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

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

• 局部变量

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

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

---

全局变量和局部变量的区别

• 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被释放，因此比较占内存
• 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被释放，因此更节省内存空间（建议）

---

6.作用域链

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域，根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称为作用域链

作用域链：采取就近原则的方式来查找变量最终的值

function f1() {
    var num = 123;
    function f2() {
        console.log( num ); // 123
    }
    f2();
}
var num = 456;
f1();

---

7. 预解析

---

7.1 预解析的概念

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

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

• 代码执行： 从上到下执行JS语句

注意：预解析会把变量和函数的声明在代码执行之前执行完成

---

7.2 变量预解析

预解析也叫做变量、函数提升。

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

console.log(num);  // undefined
var num = 10;

console.log(num);  // 报错

---

7.3 函数预解析

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

fn();
function fn() {
    console.log('打印');
}

// 等价于：提升函数声明到最上面
function fn() {
    console.log('打印');
}
fn();  // 函数的调用排到了后面，所以可以正常调用

---

7.4 函数表达式声明函数问题

函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：

fn();
var  fn = function() {
    console.log('想不到吧');
}

// 等价于：提升函数声明到最上面
var fn;
fn();
fn = function() {
    console.log('想不到吧');
}
// 结果：报错 ”fn is not a function"

---

8. 对象

---

8.1 对象的相关概念

• 什么是对象？

  Object 是复杂数据类型

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

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

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

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

• 为什么需要对象？

  为了让更好地存储一组相关联的数据，对象中为每项数据设置了属性名称，可以访问数据更语义化，代码结构清晰，表意明显，方便开发者使用

---

8.2 创建对象三种方式

1. 利用字面量创建对象

使用花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；采取键值对的形式表示

• 键：相当于属性（方法）名
• 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

var star = {
    name : 'pink',
    sex : '男',
    sayHi : function () {
        alert('大家好啊~');
    }
};

---

2. 利用 new Object 创建对象

创建空对象：var andy = new Obect();

给空对象添加属性和方法：对象.属性 = 值;

obj.uname = 'wzq';
obj.age = 18;
obj.sayHi = function() {
		console.log('hi~');
	}

---

3. 利用构造函数创建对象

构造函数：抽象了对象的公共部分，封装到了函数里面，它泛指某一大类

创建对象：特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

function 构造函数名(形参1,形参2,形参3) {
     this.属性名 = 参数;
     this.方法名 = 函数体;
}

构造函数的调用：

var obj = new 构造函数名(实参1，实参2，实参3)
console.log(obj.属性名);
obj.方法名();

以上代码中，obj 即接收到构造函数创建出来的对象

注意：

• 构造函数名字首字母大写
• 构造函数中不需要 return 就可以返回结果
• 调用构造函数，必须用 new
• 只要 new 构造函数名 就会创建一个对象

new关键字的作用

1. 在构造函数代码开始执行之前，创建一个空对象
2. 让 this 指向创建出来的空对象
3. 执行构造函数的代码，给新对象添加属性和方法
4. 在函数完成之后，返回这个新对象

---

8.3 对象的使用

访问对象的属性

• 对象.属性名（这个小点可以理解为“的” ）
• 对象[‘属性名’]（方括号里面的属性必须加引号）

console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性

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

star.sayHi(); // 调用sayHi方法

变量、属性、函数、方法总结

• 变量和属性的相同点：他们都是用来存储数据的
  • 变量：单独声明赋值，单独存在
  • 属性：在对象里面的不需要声明，用来描述特征的

• 函数和方法的相同点：都是实现某种功能，做某件事
  • 函数：单独存在的，通过 函数名() 的方式就可以调用
  • 方法：对象里面的函数称为方法，方法不需要声明，使用 对象.方法名() 的方式就可以调用，方法用来描述该对象的行为和功能

---

8.4 遍历对象

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

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

变量：自定义，它需要符合命名规范，通常写为 k 或者 key

for (var k in obj) {
    console.log(k); 	// 输出属性名
    console.log(obj[k]); // 属性值
}

---