JavaScript基础知识第七章---作用域、预解析和对象

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

---

二、JavaScript 预解析

---

（1）预解析

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

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

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

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

---

（2）变量预解析和函数预解析

2.1 变量预解析（变量提升）

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

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

2.2 函数预解析（函数提升）

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

---

（3）预解析案例

3.1 案例1：结果是几？

// 案例1

var num = 10;

fun();

function fun() {

	console.log(num);   // undefined

    var num = 20;

}

3.2 案例2：结果是几？

// 案例2

var num = 10;

function fn(){

    console.log(num);   // undefined

    var num = 20;

    console.log(num);   //20

} 

fn();

3.3 案例3：结果是几？

// 案例3

var a = 18;

f1();

function f1() {

	var b = 9;

    console.log(a);   // undefined

    console.log(b);   // 9

    var a = '123';

}

3.4 案例4：结果是几？

// 案例4

f1();

console.log(c);   // 9

console.log(b);   // 9

console.log(a);   // a is not defined

function f1() {

	var a = b = c = 9;

    console.log(a);   // 9

    console.log(b);   // 9

    console.log(c);   // 9

}

---

三、JavaScript 对象

---

（1）对象

1.1 什么是对象？

1️⃣ 现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

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

3️⃣ 对象是由属性和方法组成的。

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

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

1.2 为什么需要对象

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？

例如，将“斯蒂芬库里”的个人的信息保存在数组中的方式为：

var arr = ['斯蒂芬库里', '男', 34, 191];

JS 中的对象表达结构更清晰，更强大。斯蒂芬库里的个人信息在对象中的表达结构如下：

---

（2）创建对象的三种方式

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

• 利用字面量创建对象；

• 利用 new Object 创建对象；

• 利用构造函数创建对象；

2.1 利用字面量创建对象

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

{ } 里面采取键值对的形式表示：

• 键：相当于属性名

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

代码演示如下：

var star = {

	name : 'battledao',

    age : 23,

    sex : '男',

    sayHi : function(){

    	alert('大家好啊~');

    }

};

对象的调用：

• 对象里面的属性调用：对象.属性名，这个小点 . 就理解为“ 的 ” ；

• 对象里面属性的另一种调用方式：对象[‘属性名’]，注意方括号里面的属性必须加引号；

• 对象里面的方法调用：对象.方法名()，注意这个方法名字后面一定加括号 ；

代码演示如下：

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

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

star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

2.1.1 练习：请按照要求写出对象

要求：请用对象字面量的形式创建一个名字为可可的狗对象。

具体信息如下：

• 姓名：可可

• 类型(type)：阿拉斯加犬

• 年龄：5岁，

• 颜色：棕红色。

• 技能：汪汪汪(bark) ，演电影 (showFilm)

代码演示如下：

var dog = {

	uname: '可可',

    type: '阿拉斯加犬',

    age: '5岁',

 	color: '棕红色',

    bark: function (a, b) {

    	return '汪汪汪';

    },

    showFilm: function () {

        return '演电影';

    }

}

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

• 变量：单独声明赋值，单独存在；

• 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征；

• 函数：单独存在的，通过“函数名()”的方式就可以调用；

• 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能；

2.2 利用new Object创建对象

代码演示如下：

var andy = new Obect();

andy.name = 'battledao';

andy.age = 23;

andy.sex = '男';

andy.sayHi = function(){

    alert('大家好啊~');

}

• Object() ：第一个字母大写；

• new Object() ：需要 new 关键字；

• 使用的格式：对象.属性 = 值；

2.2.1 练习： 请按照要求写出对象

要求：请用new Object 形式创建一个鸣人对象。

具体信息如下：

• 姓名：鸣人

• 性别：男

• 年龄：19岁

• 技能（skill）：影分身术

代码演示如下：

var obj = new Object;

obj.uname = '鸣人';

obj.sex = '男';

obj.age = '19岁';

obj.skill = function () {

	return '影分身术';

}

2.3 利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数要时要注意以下两点：

• 构造函数用于创建某一类对象，其首字母要大写；

• 构造函数要和 new 一起使用才有意义；

代码演示如下：

function Person(name, 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);