一、作用域

1.概述

通常来说，一段代码所用到的名字并不总是有效和可用的，控制这个名字可用有效性的代码范围就是这个名字的作用域。

• 作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。 es6中的作用域分类
• 全局作用域：作用于所有代码执行的环境（整个script标签内部或者一个独立的js文件）。
• 局部作用域：（函数作用域）作用于函数内部的就是局部作用域。 JS没有块级作用域（在ES6之前）
• 块作用域由{}包括。
• 其他编程语言，在if、循环语句中创建的变量，仅仅只能在本if语句、本循环语句中使用。

2.变量的作用域

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

• 全局变量
• 局部变量

全局变量

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

局部变量

• 在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
• 局部变量只能在该函数中使用
• 在函数内部var声明的变量是局部变量
• 函数的形参实际上就是局部变量

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

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

<script>
    // 变量的作用域： 根据作用域的不同我们变量分为全局变量和局部变量
    // 1. 全局变量： 在全局作用域下的变量 在全局下都可以使用
    // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
    var num = 10; // num就是一个全局变量
    console.log(num);
    function fn() {
      	console.log(num);
    }
    fn();
    // console.log(aru);

    // 2. 局部变量   在局部作用域下的变量   后者在函数内部的变量就是 局部变量
    // 	  注意： 函数的形参也可以看做是局部变量
    function fun(aru) {
      var num1 = 10; // num1就是局部变量 只能在函数内部使用
      num2 = 20;
    }
    fun();
    // console.log(num1);
    // console.log(num2);
</script>

3.作用域链
只要是代码，就至少有一个作用域链，写在函数内部的局部作用域，如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的机制，利用链式查找决定哪些数据能被内部函数访问，就称为作用域链，作用域链采取就近原则的方式来查找变量最终的值。

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

二、预解析

<script>
    // 1问  
    console.log(num); // 报错

    // 2问
    console.log(num); // 【undefined】
    var num = 10;
    // 相当于执行了以下代码
    // var num;
    // console.log(num);
    // num = 10;

    // 3问
  	fn(); // 11
    function fn() {
      console.log(11);
    }
    

    // 4问
    fun(); // 【报错】
    var fun = function() {
      console.log(22);
    }
    // 函数表达式 调用必须写在函数表达式的下面
    // 相当于执行了以下代码
    // var fun;
    // fun();
    // fun = function() {
    //         console.log(22);
    //     }
</script>

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

• 预解析：代码在执行前会将当前作用域下var和function关键字声明的变量提升到代码最前面。
• 代码执行：从上到下执行JS语句。

预解析只会发生在var定义的变量和function上，学习预解析可以让我们知道为什么在变量声明之前访问var的变量会返回undefined而不是报错，为什么可以在函数声明之前调用函数。

变量预解析（变量提升）

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

函数预解析（函数提升）

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

<script>
    // 预解析案例
    // 案例1
    var num = 10;
    fun();

    function fun() {
        console.log(num); // undefined
        var num = 20;
    }
    // 相当于执行了以下操作
    var num;
    function fun() {
      var num;
      console.log(num);
      num = 20;
    }
    num = 10;
    fun();


    // 案例2
    var num = 10;

    function fn() {
      console.log(num); // undefined
      var num = 20;
      console.log(num); // 20
    }
    fn();
        // 相当于以下代码
        var num;
        function fn() {
          var num;
          console.log(num);
          num = 20;
          console.log(num);
        }
        num = 10;
        fn();


    // 案例3
    var a = 18;
    f1();
    function f1() {
        var b = 9;
        console.log(a); // undefined
        console.log(b); // 9
        var a = '123';
    }
        // 相当于以下代码
        var a;
        function f1() {
            var b;
            var a;
            b = 9;
            console.log(a);
            console.log(b);
            a = '123';
        }
        a = 18;
        f1();


    // 案例4
    f1();
    console.log(c); // 9
    console.log(b); // 9
    console.log(a); // 报错
    function f1() {
        var a = b = c = 9;
        console.log(a); // 9
        console.log(b); // 9
        console.log(c); // 9
    }
        // 以下代码
        function f1() {
            var a;
            a = b = c = 9;
            // 相当于 var  a  = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看
            // 集体声明  var a = 9, b = 9, c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
</script>

三、对象

1.概述

在js中，对象是一组无序的属性和方法的集合，所有的一切事物都是对象，包括字符串、数字、数组、函数等。 属性：事物的特征，在对象中用属性来表示。 方法：事物的行为，在对象中用方法来表示。

2.创建对象的三种方式

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

利用字面量创建对象

{}里面采取键值对的方式
键：属性名
值：属性值，可以是任意数据类型

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

对象的调用

• 对象里面的属性调用 对象.属性名
• 另一种调用方式，对象['属性名']，方括号里面的属性名必须带引号。
• 对象里面的方法调用，对象.方法() 必须要有执行符号（小括号）。

// 1.调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
console.log(obj.uname);

// 2.调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);

// 3.调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号
obj.sayHi();

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

• 变量 单独声明赋值，单独存在
• 属性 对象里面的变量为属性，用来描述对象的特性
• 函数 单独存在的，通过函数名()来调用，
• 方法 对象里面的函数称为方法，不需要声明

利用new Object创建对象

• Object第一个O大写
• new Object()需要new关键字
• 利用等号=赋值的方法给对象添加属性和方法。对象.属性 = 值。

var cess = new Obect();
cess.name = 'cess';
cess.age = 18;
cess.sex = '男';
cess.sayHi = function() {
    alert('大家好啊~');
}

利用构造函数创建对象

构造函数： 用来初始化对象，为对象成员赋初始值。它总于new运算符一起使用，我们可以把对象中公用的一些属性和方法提取出来，封装到函数中。
注意：
构造函数约定首字母大写
函数内属性和方法前面需要添加this，表示当前对象的属性和方法。
构造函数中不需要return返回
当我们创建对象的时候，必须用new来调用构造函数

function Person(uname, age, sex) {
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.sayHi = function() {
      alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
    }
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

构造函数和对象
构造函数： 抽取公共部分封装到函数中，泛指某一大类
对象：特指某一个，通过new构建对象的过程我们也称之为对象的实例化

3.new关键字

new在执行时会做四件事

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

4.遍历对象属性

for...in...语句用于对数组或对象的属性进行遍历

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

// 语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。
for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

小结

• 对象可以让代码结构更清晰
• 对象复杂数据类型Object
• 本质：对象就是一组无序的属性和方法的集合
• 构造函数泛指某一大类，比如苹果，红苹果、绿苹果都统称苹果。
• 对象实例特指一个事物，比如一个红苹果。
• for...in...用于循环数组或对象的属性。