【前端笔记13】javascript5 预解析、对象

本文基于 【黑马程序员JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门】P141-154内容所做笔记。创建对象、遍历对象属性 for…in为重点内容。

---

一、预解析

导入

	// 不同顺序的输出结果
// 1.
	console.log(num);	// 输出：报错
// 2. 
	console.log(num);	// 输出：undefined
	var num = 10; 	
		// 因js预解析特性，相当于执行以下代码
			var num;
			console.log(num);
			num = 10;
// 3.
	fn();	// 输出：11

	function fn(){
		console.log(11);
	}
	fn();	// 输出：11
// 4.
	fun();	// 报错
	var fun = function(){	// 函数变量法定义函数fun
		console.log(22);	
	}

js引擎运行步骤：预解析 → 代码执行
预解析： js引擎会把js代码中所有的 var 和 function 提升到当前作用域的最前面

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

// 案例1
	var num = 10;
	fun();
	function fun(){
		console.log(num);
		var num = 20;
	}
// 相当于执行了以下操作
	var num;
	
	function fun(){
		var num;
		console.log(num);	//根据就近原则，输出undefined
		num = 20;
	}
	num = 10;
	fun();

// 案例2
	f1();
	console.log(c);	// 输出 9
	console.log(b); // 输出 9
	console.log(a); // 输出 undefined
	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;	// b、c未声明，当作全局变量使用
		console.log(a);
		console.log(b);
		console.log(c);
	}
	f1();
	console.log(c);
	console.log(b);
	console.log(a);

---

二、对象

对象：一组无序的相关属性和方法的集合，如字符串、数值、数组、函数等
属性：事物的特征（名词）
方法：事物的行为（动词）

创建对象

1. 字面量创建对象（常用）

属性或方法的创建采用 键值对 的形式：属性名: 属性值（键: 值）
多个属性或方法间用 逗号, 隔开
方法冒号后面跟一个 匿名函数

let obj = {
	uname:  '姓名',
	age: 19,
	sayHi: funtion(){
		console.log('hi~');
	}
}

2. 利用new object 创建对象

let obj = nuw Object();

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

3. 利用构造函数创造对象(常用)

前两种创建对象方式一次只能创建一个对象，若多个对象具有相似的属性方法，兼容性不高。

// 构造函数语法格式
function 构造函数名(){
	this.属性 = 值；
	this.方法 = funtion(){}
}
// 调用构造函数格式
new 构造函数名(属性值);

// 例子
function Star(uname,age,sex){
	this.name = uname；
	this.age = age,
	this.sex = sex;
	this.f1 = funtion(msg){
		console.log(msg);
	}
}
var test1 = new Star('姓名1', 18, '性别');	// 返回对象给test1
var test2 = new Star('姓名2', 19, '性别');	
console.log(test1.name);	// 输出：姓名1
console.log(test2.age);		// 输出：19
test1.f1('对象1')	// 输出：对象1

调用对象属性方法

调用方式：

1. 对象名.属性名
2. 对象名[‘属性名’]
3. 对象名.方法名()

new关键字

new 执行的过程

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

遍历对象属性 for(…in…)

// 格式：for (变量 in 对象){}
// 例子:
let obj = {
	name: '名',
	age: 18,
	sex: '性'
}
for(let k in obj){
	console.log(k);		// 输出：'name'、'age'、'sex'
// 变量 输出 得到的是 属性名(字符串)
	console.log(obj[k])	//输出：名、18、性	// 相当于obj['name']
// 对象['变量'] 输出 属性值
}

遍历数组对象

数组对象：一个数组的每个元素是一个对象

let students = [
	{name:'小1', age: 1}
	{name:'小2', age: 2}
	{name:'小3', age: 3}
]
for (let i = 0; i < students.length; i++){
	console.log(i)			// 输出students数组下标 0 1 2
	console.log(students[i])	// 输出students数组内的各对象元素的所有值 
	console.log(students[i].name)	// 输出students数组内各对象元素的name的值
}

---

---

若对本文有任何建议或意见欢迎在评论区提出~十分感谢！
Ending