【JavaScript】作用域 + 预解析 + 对象

学习视频及笔记参考：

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

---

一、作用域

1、概述

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

1.1 全局作用域

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

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

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

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

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

    <script>
        if (true) {
            var num = 10;
        }
        console.log(num); // 10; 因为没有块级作用域，所以能正常访问
    </script>

2、变量的作用域

• 在JavaScript中，根据作用域的不同，变量可以分为两种：全局变量、局部变量。

2.1 全局变量

• 在全局作用域下声明的变量叫做 全局变量 （ 在函数外部定义的变量 ）。
• 全局变量在代码的任何位置都可以使用。
• 全局变量：① 在全局作用域下 var 声明的变量 是全局变量。② 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）。

    <script>
        var num = 10;  // 在全局作用域下声明的变量
        console.log(num);
        function fn() {
            num = 20;  // 在函数内不使用var声明的变量
        }
    </script>

2.2 局部变量 

• 在局部作用域下声明的变量叫做 局部变量 （ 在函数内部定义的变量 ）。
• 局部变量只能在该 函数内部 使用。
• 局部变量：① 在函数内部var声明的变量。②函数的形参。

    <script>
        function fn() {
            var num = 100;  // 在函数内部声明的变量
            console.log(num);
        }
        function fn2(aug) { // 函数的形参
            ...
        }
    </script>

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

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

3、作用域链

• 作用域链：根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问。 【就近原则：先在当前作用域找，没有往上级作用域找...】
• 只要是代码，就至少有一个作用域（全局作用域、局部作用域）。
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

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

二、预解析

• JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候 分为两步：预解析和代码执行。
• 预解析： 在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义
• 代码执行： 从上到下执行JS语句。

1、变量预解析 + 函数预解析

• 预解析也叫做变量、函数提升。
• 变量提升： 变量的声明会被提升到 当前作用域 的最上面，变量的赋值不会提升。
• 函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

// 变量预解析：普通变量
console.log(num);  // 最终结果：undefined
var num = 10;

// 相当于以下代码：
var num; // 变量声明提升，赋值不提升
console.log(num);
num = 10; // 剩下赋值

// 变量预解析：定义匿名函数
fn();   // 最终结果：报错 fn is not a function
var fn = function () {
    console.log('此处是函数！');
}

// 相当于以下代码：
var fn;
fn();
fn = function () {
    console.log('此处是函数！');
}

// 函数预解析
fn();
function fn() {
    console.log('我是一个函数！');  // 正常打印
}

// 相当于以下代码：
function fn() {
    console.log('我是一个函数！');
}
fn();

2、预解析案例

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9; // var a = 9; b = 9; c = 9; (相当于只声明了a)
    console.log(a);
    console.log(b);
    console.log(c);
}

// 相当于以下代码：
function f1() {
    var a;
    a = b = c = 9;   // b,c 未声明，是全局变量
    console.log(a);  // a = 9;
    console.log(b);  // b = 9;
    console.log(c);  // c = 9;
}
f1();
console.log(c); // c = 9;
console.log(b); // b = 9;
console.log(a); // a 是局部变量，因此报错：a is not defined

三、对象

1、概念

• 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由 属性 和 方法 组成的。
• 属性：事物的 特征， 在对象中用 属性 来表示（常用名词）。
• 方法：事物的 行为， 在对象中用 方法 来表示（常用动词）。

2、创建对象的三种方式

       三种方式： 利用字面量创建对象、利用 new Object 创建对象、利用构造函数创建对象。

2.1 利用字面量创建对象

        对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。{ } 里面采取键值对的形式表示（键：属性名；值：属性值，可以是任何类型的值；）。

2.1.1 定义对象

var star = { 
    name : 'ldh', 
    age : 18, 
    sex : '男', 
    sayHi : function(){ 
        alert('hi~'); 
    } 
};

2.1.2 调用对象

• 调用属性两种方式：（1）对象.属性名。（2）对象[‘属性名’]。
• 调用方法：对象.方法名()。【括号一定要加！】

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

2.2 利用 new Object 创建对象

var obj = new Object();  // 利用 new 关键字创建一个对象
obj.uname = 'mingren';   // 给对象添加新的属性并赋值
obj.sex = '男';
obj.age = 19;
obj.skill = function () {
    console.log('影分身术');
}

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

（1）在内存中创建一个新的空对象。

（2）让 this 指向这个新的对象。

（3）执行构造函数里面的代码，给这个新对象添加属性和方法。

（4）返回这个新对象（所以构造函数里面不需要return）。

2.3 利用构造函数创建对象

• 构造函数约定 首字母大写 。
• 函数内的 属性和方法前 面需要添加 this ，表示当前对象的属性和方法。
• 构造函数中 不需要 return 返回结果。
• 当我们创建对象的时候， 必须用 new 来调用构造函数。

        function Game(name, type, blood, attack) {  // 规范写法：首字母大写
            this.name = name;    // 函数内的属性和方法前添加this
            this.type = type;
            this.blood = blood;
            this.attack = function (attack) {
                console.log(attack);
            }
        }

        var lp = new Game('lianpo', '力量型', 500)  // 必须用 new 来调用构造函数
        console.log(lp.name);
        lp.attack('近战');

3、遍历对象属性（for...in...）

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

for (var k in obj) { 
    console.log(k); // 这里的 k 是属性名 
    console.log(obj[k]); // 这里的 obj[k] 是属性值 
}