JS基础：作用域、预解析、对象(重点）

目录

1. JS作用域

1.1 作用域是什么

1.2 变量的作用域

1.3 js 没有块级作用域

1.4 作用域链

2. JS 预解析

2.1 案例1（面试常问）

2.2 案例2 

2.3 案例3

3. JS 对象

3.1 对象定义

3.1.1 为什么使用对象

3.2 创建对象的三种方法

3.2.1 用字面量创建对象

3.2.2 用 new Object 创建对象

3.2.3 利用构造函数创建对象

3.2.4 构造函数和对象的区别

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

3.3 new关键字

3.3.1 new 的执行过程

3.4 遍历对象

3.4.1 遍历对象属性

3.5 对象小结

---

1. JS作用域

1.1 作用域是什么

• 一段代码的名字不总是有效和可用的，限定这个名字的可用性的代码范围就是这个名字的作用域
• 作用域提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
• JS 作用域（es6）之前：全局作用域和局部作用域
• 全局作用域：整个script 标签，或者是单独的 js 文件
• 局部作用域（函数作用域）：在函数内部就是局部作用域，代码只在函数内部起效果

1.2 变量的作用域

在 js 中变量的的作用域分为两种：

• 全局变量：在全局作用域下的变量
• 局部变量：在局部作用域（函数内部）下的变量

 注意：在局部变量中直接赋值的变量属于全局变量 

            函数的形参也可看做局部变量

从执行效率看全局变量和局部变量

• 全局变量只有在浏览器关闭时才会销毁，比较占内存资源
• 局部变量当程序执行完毕时就会销毁，比较节约内存资源

1.3 js 没有块级作用域

• js 在es6中新增的块级作用域
• 块级作用域 { }

1.4 作用域链

• 只要是代码，至少有一个作用域链
• 写在函数内部的是局部作用域
• 如果函数中还有函数，那么在这个作用域中又诞生一个作用域
• 根据内部函数可以访问外部函数，用链式查找决定哪些数据可以被内部函数访问，就称作用域链

2. JS 预解析

1.js 引擎运行js 分两步：预解析和运行

• js 引擎会把js 里面的所有的 var 还有 function 提升到当前作用域的最前面
• 代码按照代码的书写顺序从上往下执行

2. 预解析分 变量预解析（变量提升）和函数预解析（函数提升）

• 变量提升：把所有的变量提升到当前的作用域最前面，不提示赋值操作
• 函数提升：把所有的函数提升到当前的作用域最前面，不调用函数

 函数表达式调用必须写在函数表达式的下面

2.1 案例1（面试常问）

 结果是 undefined

对于整块的预解析操作：声明>函数体>赋值>调用>函数内置变量的提升

2.2 案例2 

 结果：undefined 20

2.3 案例3

 结果：9 9 9 9 9 is not defined

注意：直接赋值的变量当做全局变量

打印undefined说明变量已经声明没有赋值

打印 is not undefined 异常说明变量没有声明

3. JS 对象

3.1 对象定义

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

 对象由属性和方法构成

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

3.1.1 为什么使用对象

保存一个值时，使用变量，保存多个值（一组值），可以使用数组，保存一个人的完整信息用对象

3.2 创建对象的三种方法

3.2.1 用字面量创建对象

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

        var obj = {

            name: 'lisa',

            age: 18,

            sex: '女',

            sayHi: function () {

                console.log('hi~');

            }

        }

•  属性和方法根据键值对的形式   键 属性名： 值  属性值
• 多个属性或者方法用逗号隔开
• 方法冒号后面跟一个匿名函数

     使用对象：

1. 调用对象的属性用对象名.属性名，.理解为的
2. 对象名['属性名']

     调用对象的方法：对象名.方法名，注意要加（）

3.2.2 用 new Object 创建对象

和创建数组 new arr 原理一致

var obj = new Object(); //创建一个空的对象

obj.name = 'lisa';

obj.age = 18;

obj.sex = '女';

obj.sayHi = function () {

        console.log('hi~');

}

• 用等号赋值的方法添加对象的属性
• 属性和方法间用分号结束

3.2.3 利用构造函数创建对象

因为前面两种创建对象的方式一次只能创建一个对象，所以我们需要使用构造函数来创建多个对象

 构造函数：把对象里面一些相同的属性和方法抽象出来封装到函数里面

构造函数语法格式：

        function 构造函数名() {

            this.属性=值;

            this.方法=function(){}

        }

        // 使用构造函数

        new 构造函数名();

 

•  注意：构造函数首字母要大写
• 构造函数不需要return就可以返回结果
• 我们调用构造函数必须用new
• 调用函数就是创建了一个对象
• 属性和方法前面必须加 this

3.2.4 构造函数和对象的区别

• 对象：一个具体的事物
• 构造函数：泛指的某一大类，类似java里面的class

我们用构造函数创建函数的过程叫实例化对象

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

1. 变量和属性的相同点：都是用来存储数据的

• 变量：单独声明并赋值
• 属性：在对象里的，不需要声明，使用必须是 对象.属性

1. 函数和方法的相同点：都是实现某种功能

• 函数：是单独声明并调用的，函数名（）
• 方法：在对象里面，调用的使用 对象.方法（）

3.3 new关键字

3.3.1 new 的执行过程

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

3.4 遍历对象

3.4.1 遍历对象属性

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

 

• 输出的是变量，结果是属性名
• 输出对象名[变量]，结果是属性值
• 在 for ... in 里面的变量一般写 k 或者key

3.5 对象小结

1. 对象可以让代码结构变清晰
2. 对象复杂数据类型object
3. 本质：对象是一组无序的相关属性和方法的集合
4. 构造函数泛指某一大类，如明星，苹果
5. 对象是实例特质一个事物，如刘德华，这个苹果
6. for ... in 语句可以对对象进行循环操作