Js笔记04

最爱琴女E

于 2021-06-29 14:46:47 发布

阅读量123

点赞数

分类专栏： HTML JavaScript CSS 文章标签： html html5 javascript css css3

本文链接：https://blog.csdn.net/qwq_666/article/details/118335160

版权

预解析

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1
			console.log(num); // undefined 坑1
			var num = 10;
			
			// 2
			fn(); // 11
			
			function fn() {
    
				console.log(11);
			}
			
			// 3
			fun(); // 报错 坑2
			var fun = function() {
    
				console.log(22);
			}
		</script>
	</head>
	<body>
	</body>
</html>

我们js引擎运行js分为两步：预解析代码执行

(1). 预解析 js引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面

(2). 代码执行按照代码书写的顺序从上往下执行
预解析分为变量预解析（变量提升）和函数预解析（函数提升）

(1). 变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作

(2). 函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数

案例

1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 案例1
			var num = 10;
			fun();
			
			function fun() {
    
				console.log(num);
				var num = 20;
				console.log(num);
			}
			// 相当于执行了以下操作
			// var num;
			
			// function fun() {
    
			//	var num;
			// 	console.log(num);
			//	var num = 20;
			//	console.log(num);
			// }
			// num = 10;
			// fun();
			// 结果：
			// undefined
			// 20
		</script>
	</head>
	<body>
	</body>
</html>

2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var a = 18;
			f1();
			function f1() {
    
				var b = 9;
				console.log(a);
				console.log(b);
				var a = '123';
			}
			/*
				结果：
				undefined
				9
			*/
		</script>
	</head>
	<body>
	</body>
</html>

对象

现实生活中，万物皆对象，对象是一个具体的事物，看得见摸得着。如：一本书、一辆汽车、一个人……

对象是由属性和方法组成的

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

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

创建对象的三种方式

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

利用字面量创建对象

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

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

键：相当于属性名

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// var obj = {}; // 创建了一个空的对象
			var obj = {
    
				uname: '阿波',
				age: 18,
				sex: '男',
				sayHi: function() {
    
					console.log('hi~');
				}
			}
			// (1) 里面的属性或者方法我们采取键值对的形式	键 属性名 ： 值 属性值
			// (2) 多个属性或者方法中间用逗号隔开
			// (3) 方法冒号后面跟的是一个匿名函数
			// 使用对象
			// (1) 调用对象的属性		我们采取 对象名.属性名	.我们理解为	的
			console.log(obj.uname);
			// (2) 调用属性还有一种方法 对象名['属性名']
			console.log(obj['age']);
			// (3) 调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号
			obj.sayHi();
		</script>
	</head>
	<body>
	</body>
</html>

变量、属性、函数、方法的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.变量和属性的相同点 他们都是用来存储数据的
			var num = 10;
			var obj = {
    
				age: 18,
				fn: function() {
    
					
				}
			}
			console.log(obj.age);
			// 变量	单独声明并赋值	使用的时候直接写变量名   单独存在
			// 属性 在对象里面的不需要声明的	使用的时候必须是	对象.属性
			// 2.函数和方法的相同点	都是实现某种功能 做某件事
			// 函数是单独声明 并且调用的 函数名() 单独存在
			// 方法 在对象里面 调用的时候 对象.方法()
		</script>
	</head>
	<body>
	</body>
</html>

利用new Object创建对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var obj = new Object();// 创建了一个空的对象
			obj.uname = '阿波';
			obj.age = 18;
			obj.sex = '男';
			obj.sayHi = function() {
    
				console.log('hi~');
			}
			// (1) 我们是利用 等号= 赋值的方法 添加对象的属性和方法
			// (2) 每个属性和方法之间用 分号结束
			 console.log(obj.uname);
			 console.log(obj['sex']);
			 obj.sayHi();
		</script>
	</head>
	<body>
	</body>
</html>

构造函数

为何需要构造函数

因为我们依次创建一个对象，里面很多属性和方法是大量相同的我们只能复制。因此我们可以利用函数的方法，重复这些相同的代码，我们就把这个函数称为构造函数，又因为这个函数不一样，里面封装的不是普通代码，而是对象。构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 创建四大天王的对象 相同的属性：名字、年龄、性别 相同的方法：唱歌
			// 构造函数的语法格式
			// function 构造函数名() {
    
			// 	this.属性 = 值;
			// 	this.方法 = function() {}
			// }
			// new 构造函数名();
			function Star(uname,age,sex) {
    
				this.name = uname;
				this.age = age;
				this.sex = sex;
				this.sing = function(sang) {
    
					console.log(sang);
				}
			}
			// new Star('刘德华',18,'男');
			var ldh = new Star('刘德华',18,'男');// 调用函数返回的是一个对象
			// console.log(typeof ldh);
			console.log(ldh.name);
			console.log(ldh.age);
			console.log(ldh['sex']);
			ldh.sing('冰雨');
			
			
			var zxy = new Star('张学友',19,'男');
			console.log(zxy.name);
			console.log(zxy.age);
			console.log(zxy['sex']);
			zxy.sing('吻别');
			// 1.构造函数名字首字母要大写
			// 2.构造函数不需要return就可以返回结果
			// 3.调用构造函数 必须使用new
			// 4.只要new Star() 调用函数就创建一个对象 ldh {}
			// 5.我们的属性和方法前面必须添加this
		</script>
	</head>
	<body>
	</body>
</html>

构造函数和对象的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.构造函数 明星 泛指某一大类 它类似于Java里面的 类（class）
			function Star(uname,age,sex) {
    
				this.name = uname;
				this.age = age;
				this.sex = sex;
				this.sing = function(sang) {
    
					console.log(sang);
				}
			}
			// 2.对象特指一个具体的事物 刘德华 == {name:'刘德华',age: 18,sex:'男',sing:f}
			var ldh = new Star('刘德华',18,'男');// 调用函数返回的是一个对象
			console.log(ldh)

最低0.47元/天解锁文章

最爱琴女E

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js笔记04

预解析JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // 1 console.l
复制链接

扫一扫

专栏目录