JS基础&实战--day05

对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * JS中数据类型
			 * 	- String 字符串
			 *  - Number 数值
			 * 	- Boolean 布尔值
			 * 	- Null 空值
			 * 	- Undefined 未定义
			 * 		- 以上这五种类型属于基本数据类型,以后我们看到的值
			 * 			只要不是上边的5种,全都是对象
			 * 	- Object 对象
			 * 
			 * 
			 * 基本数据类型都是单一的值"hello" 123 true,
			 * 	值和值之间没有任何的联系。
			 * 
			 * 在JS中来表示一个人的信息(name gender age):
			 * 	var name = "孙悟空";
			 * 	var gender = "男";
			 * 	var age = 18;
			 * 如果使用基本数据类型的数据,我们所创建的变量都是独立,不能成为一个整体。
			 * 
			 * 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
			 * 
			 * 对象的分类:
			 * 	1.内建对象
			 * 		- 由ES标准中定义的对象,在任何的ES的实现中都可以使用
			 * 		- 比如:Math String Number Boolean Function Object....
			 * 
			 * 	2.宿主对象
			 * 		- 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
			 * 		- 比如 BOM DOM
			 * 
			 * 	3.自定义对象
			 * 		- 由开发人员自己创建的对象
			 * 
			 */
			
			//创建对象
			/*
			 * 使用new关键字调用的函数,是构造函数constructor
			 * 	构造函数是专门用来创建对象的函数
			 * 使用typeof检查一个对象时,会返回object
			 */
			var obj = new Object();
			
			
			/*
			 * 在对象中保存的值称为属性
			 * 向对象添加属性
			 * 	语法:对象.属性名 = 属性值;
			 */
			
			//向obj中添加一个name属性
			obj.name = "孙悟空";
			//向obj中添加一个gender属性
			obj.gender = "男";
			//向obj中添加一个age属性
			obj.age = 18;
			
			/*
			 * 读取对象中的属性
			 * 	语法:对象.属性名
			 * 
			 * 如果读取对象中没有的属性,不会报错而是会返回undefined
			 */
			
			//console.log(obj.gender);
			//console.log(obj.hello);
			
			/*
			 * 修改对象的属性值
			 * 	语法:对象.属性名 = 新值
			 */
			obj.name = "tom";
			
			/*
			 * 删除对象的属性
			 * 	语法:delete 对象.属性名
			 */
			delete obj.name;
			
			
			console.log(obj.age);
			
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

属性名和属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var obj = new Object();

			/*
			 * 向对象中添加属性
			 * 属性名:
			 * 	- 对象的属性名不强制要求遵守标识符的规范
			 * 		什么乱七八糟的名字都可以使用
			 * 	- 但是我们使用是还是尽量按照标识符的规范去做
			 * 
			 */
			obj.name = "孙悟空";
			
			//obj.var = "hello";
			
			/*
			 * 如果要使用特殊的属性名,不能采用.的方式来操作
			 * 	需要使用另一种方式:
			 * 		语法:对象["属性名"] = 属性值
			 * 	读取时也需要采用这种方式
			 * 
			 * 使用[]这种形式去操作属性,更加的灵活,
			 * 	在[]中可以直接传递一个变量,这样变量值是多少就会读取那个属性
			 * 
			 */
			obj["123"] = 789;
			obj["nihao"] = "你好";
			var n = "nihao";
			//console.log(obj["123"]);
			
			/*
			 * 属性值
			 * 	JS对象的属性值,可以是任意的数据类型
			 * 		甚至也可以是一个对象
			 */
			
			obj.test = true;
			obj.test = null;
			obj.test = undefined;
			
			//创建一个对象
			var obj2 = new Object();
			obj2.name = "猪八戒";
			
			//将obj2设置为obj的属性
			obj.test = obj2;
			
			//console.log(obj.test.name);
			
			/*
			 * in 运算符
			 * 	- 通过该运算符可以检查一个对象中是否含有指定的属性
			 * 		如果有则返回true,没有则返回false
			 *  - 语法:
			 * 		"属性名" in 对象
			 */
			//console.log(obj.test2);
			
			//检查obj中是否含有test2属性
			//console.log("test2" in obj);
			//console.log("test" in obj);
			console.log("name" in obj);
			
		</script>
	</head>
	<body>
	</body>
</html>

基本和引用数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 基本数据类型
			 * 	String Number Boolean Null Undefined
			 * 
			 * 引用数据类型
			 * 	Object
			 * 
			 * JS中的变量都是保存到栈内存中的,
			 * 		基本数据类型的值直接在栈内存中存储,
			 * 		值与值之间是独立存在,修改一个变量不会影响其他的变量
			 * 
			 * 		对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,
			 * 		而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用,
			 * 		当一个通过一个变量修改属性时,另一个也会受到影响
			 */
			
			var a = 123;
			var b = a;
			a++;
			
			/*console.log("a = "+a);
			console.log("b = "+b);*/
			
			var obj = new Object();
			obj.name = "孙悟空";
			
			var obj2 = obj;
			
			//修改obj的name属性
			obj.name = "猪八戒";
			
			
			
			/*console.log(obj.name);
			console.log(obj2.name);*/
			
			//设置obj2为null
			obj2 = null;
			
			/*console.log(obj);
			console.log(obj2);*/
			
			var c = 10;
			var d = 10;
			//console.log(c == d);
			
			var obj3 = new Object();
			var obj4 = new Object();
			obj3.name = "沙和尚";
			obj4.name = "沙和尚";
			
			/*console.log(obj3);
			console.log(obj4);*/
			
			/*
			 * 当比较两个基本数据类型的值时,就是比较值。
			 * 而比较两个引用数据类型时,它是比较的对象的内存地址,
			 * 		如果两个对象是一摸一样的,但是地址不同,它也会返回false
			 */
			console.log(obj3 == obj4);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

对象字面量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//创建一个对象
			//var obj = new Object();
			
			/*
			 * 使用对象字面量来创建一个对象
			 */
			var obj = {};
			
			//console.log(typeof obj);
			
			obj.name = "孙悟空";
			
			//console.log(obj.name);
			
			/*
			 * 使用对象字面量,可以在创建对象时,直接指定对象中的属性
			 * 语法:{属性名:属性值,属性名:属性值....}
			 * 	对象字面量的属性名可以加引号也可以不加,建议不加,
			 * 	如果要使用一些特殊的名字,则必须加引号
			 * 
			 * 属性名和属性值是一组一组的名值对结构,
			 * 	名和值之间使用:连接,多个名值对之间使用,隔开
			 * 	如果一个属性之后没有其他的属性了,就不要写,
			 */
			var obj2 = {
				
				name:"猪八戒",
				age:13,
				gender:"男",
				test:{name:"沙僧"}
				
			};
			
			console.log(obj2.test);
			
		</script>
	</head>
	<body>
	</body>
</html>

函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 函数 function
			 * 	- 函数也是一个对象
			 * 	- 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
			 * 	- 函数中可以保存一些代码在需要的时候调用
			 * 	- 使用typeof检查一个函数对象时,会返回function
			 */
			
			//我们在实际开发中很少使用构造函数来创建一个函数对象
			//创建一个函数对象
			//可以将要封装的代码以字符串的形式传递给构造函数
			//var fun = new Function("console.log('Hello 这是我的第一个函数');");
			
			//封装到函数中的代码不会立即执行
			//函数中的代码会在函数调用的时候执行
			//调用函数 语法:函数对象()
			//当调用函数时,函数中封装的代码会按照顺序执行
			//fun();
			
			/*
			 * 使用 函数声明 来创建一个函数
			 * 	语法:
			 * 		function 函数名([形参1,形参2...形参N]){
			 * 			语句...
			 * 		}
			 */
			
			function fun2(){
				console.log("这是我的第二个函数~~~");
				alert("哈哈哈哈哈");
				document.write("~~~~(>_<)~~~~");
			}
			
			//console.log(fun2);
			//调用fun2
			//fun2();
			
			/*
			 * 使用 函数表达式 来创建一个函数
			 * var 函数名  = function([形参1,形参2...形参N]){
			 * 	 语句....
			 *  }
			 */
			
			var fun3 = function(){
				console.log("我是匿名函数中封装的代码");
			};
			
			
			fun3();
			
		</script>
	</head>
	<body>
	</body>
</html>

函数的参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 定义一个用来求两个数和的函数
			 * 	可以在函数的()中来指定一个或多个形参(形式参数)
			 * 	多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
			 * 	但是并不赋值
			 */
			function sum(a,b){
				console.log("a = "+a);
				console.log("b = "+b);
				console.log(a+b);
			}
			
			/*
			 * 在调用函数时,可以在()中指定实参(实际参数)
			 * 	实参将会赋值给函数中对应的形参
			 */
			/*sum(1,2);
			sum(123,456);*/
			
			/*
			 * 调用函数时解析器不会检查实参的类型,
			 * 	所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
			 * 函数的实参可以是任意的数据类型
			 */
			//sum(123,"hello");
			//sum(true , false);
			
			/*
			 * 调用函数时,解析器也不会检查实参的数量
			 * 	多余实参不会被赋值
			 * 如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
			 * 
			 */
			//sum(123,456,"hello",true,null);
			sum(123);
			
		</script>
	</head>
	<body>
	</body>
</html>

返回值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个函数,用来计算三个数的和
			 * 
			 * 可以使用 return 来设置函数的返回值
			 * 	语法:
			 * 		return 值
			 * 
			 * 	return后的值将会会作为函数的执行结果返回,
			 * 		可以定义一个变量,来接收该结果
			 * 
			 *  在函数中return后的语句都不会执行
			 * 
			 * 	如果return语句后不跟任何值就相当于返回一个undefined,
			 * 	如果函数中不写return,则也会返回undefined
			 * 
			 * 	return后可以跟任意类型的值
			 * 
			 */
			function sum(a , b , c){
				//alert(a + b +c);
				
				var d = a + b + c;
				
				return d;
				
				//return undefined;
				
			}
			
			//调用函数
			//变量result的值就是函数的执行结果
			//函数返回什么result的值就是什么
			var result = sum(4,7,8);
			
			//var result = alert("hello");
			
			console.log("result = "+result);
			
			
		</script>
	</head>
	<body>
		
	</body>
</html>

== 练习==

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 定义一个函数,判断一个数字是否是偶数,如果是返回true,否则返回false
			 */
			
			function isOu(num){
				
				return num % 2 == 0;
			}
			
			var result = isOu(15);
			
			//console.log("result = "+result);
			
			
			/*
			 * 定义一个函数,可以根据半径计算一个圆的面积,并返回计算结果
			 * 3.14*r*r
			 */
			function mianji(r){
				
				return 3.14*r*r;
				
			}
			
			result = mianji(5);
			
			//console.log("result = "+result);
			
			
			/*
			 * 创建一个函数,可以在控制台中输出一个人的信息
			 * 	可以输出人的 name age gender address
			 * 
			 * 实参可以是任意的数据类型,也可以是一个对象
			 * 	当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
			 */
			function sayHello(o){
				
				//console.log("o = "+o);
				console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
			}
			
			//sayHello("猪八戒",28,"高老庄","男");
			//创建一个对象
			var obj = {
				name:"孙悟空",
				age:18,
				address:"花果山",
				gender:"男"
				
			};
			
			//sayHello(obj);
			
			/*
			 * 实参可以是一个对象,也可以是一个函数
			 */
			
			function fun(a){
				console.log("a = "+a);
				//a(obj);
			}
			
			//fun(sayHello);
			
			//fun(function(){alert("hello")});
			
			fun(mianji(10));
			
			/*
			 * mianji()
			 * 	- 调用函数
			 * 	- 相当于使用的函数的返回值
			 * 
			 * mianji
			 * 	- 函数对象
			 * 	- 相当于直接使用函数对象
			 */
			
		</script>
	</head>
	<body>
	</body>
</html>

return

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			function fun(){
				alert("函数要执行了~~~~");
				
				for(var i=0 ; i<5 ; i++){
					
					
					if(i == 2){
						//使用break可以退出当前的循环
						//break;
						
						//continue用于跳过当次循环
						//continue;
						
						//使用return可以结束整个函数
						//return;
					}
					
					console.log(i);
				}
				
				alert("函数执行完了~~~~");
			}
			
			//fun();
			
			/*
			 * 返回值可以是任意的数据类型
			 * 	也可以是一个对象,也可以是一个函数
			 */
			function fun2(){
				
				//返回一个对象
				return {name:"沙和尚"};
			}
			
			var a = fun2();
			
			//console.log("a = "+a);
			
			function fun3(){
				//在函数内部再声明一个函数
				function fun4(){
					alert("我是fun4");
				}
				
				//将fun4函数对象作为返回值返回
				return fun4;
			}
			
			a = fun3();
			//console.log(a);
			//a();
			fun3()();
			
			
		</script>
	</head>
	<body>
	</body>
</html>

立即执行函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			
			//函数对象()
			/*
			 * 立即执行函数
			 * 	函数定义完,立即被调用,这种函数叫做立即执行函数
			 * 	立即执行函数往往只会执行一次
			 */
			/*(function(){
				alert("我是一个匿名函数~~~");
			})();*/
			
			(function(a,b){
				console.log("a = "+a);
				console.log("b = "+b);
			})(123,456);
			
		</script>
	</head>
	<body>
	</body>
</html>

对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个对象
			 */
			var obj = new Object();
			
			//向对象中添加属性
			obj.name = "孙悟空";
			obj.age = 18;
			
			//对象的属性值可以是任何的数据类型,也可以是个函数
			obj.sayName = function(){
				console.log(obj.name);
			};
			
			function fun(){
				console.log(obj.name);
			};
			
			//console.log(obj.sayName);
			//调方法
			obj.sayName();
			//调函数
			//fun();
			
			/*
			 * 函数也可以称为对象的属性,
			 * 	如果一个函数作为一个对象的属性保存,
			 * 	那么我们称这个函数时这个对象的方法
			 * 	调用这个函数就说调用对象的方法(method)
			 * 
			 * 但是它只是名称上的区别没有其他的区别
			 * 
			 */
			
			var obj2 = {
				
				name:"猪八戒",
				age:18,
				sayName:function(){
					console.log(obj2.name);
				}
				
			};
			
			obj2.sayName();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

枚举对象中的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var obj = {
						name:"孙悟空",
						age:18,
						gender:"男",
						address:"花果山"
					 };
					 
			//枚举对象中的属性
			//使用for ... in 语句
			/*
			 * 语法:
			 * 	for(var 变量 in 对象){
			 * 	
			 *  }
			 * 
			 * for...in语句 对象中有几个属性,循环体就会执行几次
			 * 	每次执行时,会将对象中的一个属性的名字赋值给变量
			 */
			
			for(var n in obj){
				console.log("属性名:"+n);
				
				console.log("属性值:"+obj[n]);
			}
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 作用域
			 * 	- 作用域指一个变量的作用的范围
			 * 	- 在JS中一共有两种作用域:
			 * 		1.全局作用域
			 * 			- 直接编写在script标签中的JS代码,都在全局作用域
			 * 			- 全局作用域在页面打开时创建,在页面关闭时销毁
			 * 			- 在全局作用域中有一个全局对象window,
			 * 				它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用
			 * 			- 在全局作用域中:
			 * 				创建的变量都会作为window对象的属性保存
			 * 				创建的函数都会作为window对象的方法保存
			 * 			- 全局作用域中的变量都是全局变量,
			 * 				在页面的任意的部分都可以访问的到
			 * 
			 * 		2.函数作用域
			 * 
			 */
			
			var a = 10;
			var b = 20;
			//var c = "hello";
			
			//console.log(window.c);
			
			function fun(){
				console.log("我是fun函数");
			}
			
			//window.fun();
			
			//window.alert("hello");
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

变量的提前声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			
			/*
			 * 变量的声明提前
			 * 	- 使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值),
			 * 		但是如果声明变量时不适用var关键字,则变量不会被声明提前
			 * 
			 * 函数的声明提前
			 * 	- 使用函数声明形式创建的函数 function 函数(){}
			 * 		它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数
			 * 	   使用函数表达式创建的函数,不会被声明提前,所以不能在声明前调用	
			 */
			/*console.log("a = "+a);
			
			var a = 123;*/
			
			//fun();
			
			
			//函数声明,会被提前创建
			function fun(){
				console.log("我是一个fun函数");
			}
			
			//函数表达式,不会被提前创建
			var fun2 = function(){
				console.log("我是fun2函数");
			};
			
			fun2();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

函数作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 函数作用域	
			 * 	- 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
			 * 	- 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
			 * 	- 在函数作用域中可以访问到全局作用域的变量
			 * 		在全局作用域中无法访问到函数作用域的变量
			 * 	- 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用
			 * 		如果没有则向上一级作用域中寻找,直到找到全局作用域,
			 * 		如果全局作用域中依然没有找到,则会报错ReferenceError
			 * 	- 在函数中要访问全局变量可以使用window对象
			 */
			
			//创建一个变量
			var a = 10;
			
			function fun(){
				
				var a = "我是fun函数中的变量a";
				var b = 20;
				
				//console.log("a = "+a);
				
				function fun2(){
					console.log("a = "+window.a);
				}
				
				fun2();
				
			}
			
			//fun();
			//console.log("b = "+b);
			
			/*
			 * 在函数作用域也有声明提前的特性,
			 * 	使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
			 * 	函数声明也会在函数中所有的代码执行之前执行
			 */
			
			function fun3(){
				
				fun4();
				
				//console.log(a);
				
				var a = 35;
				
				function fun4(){
					alert("I'm fun4");
				}
				
			}
			
			//fun3();
			
			
			var c = 33;
			
			/*
			 * 在函数中,不适用var声明的变量都会成为全局变量
			 */
			function fun5(){
				//console.log("c = "+c);
				//c = 10;
				
				//d没有使用var关键字,则会设置为全局变量
				d = 100;
			}
			
			fun5();
			
			//在全局输出c
			//console.log("d = "+d);
			
			var e = 23;
			
			/*
			 * 定义形参就相当于在函数作用域中声明了变量
			 */
			function fun6(e){
				alert(e);
			}
			
			fun6();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

debug

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			alert(d);
			
			var a = 10;
			
			var b = "hello";
			
			c = true;
			
			function fun(){
				alert("hello");
			}
			
			var d = 35;
			
		</script>
	</head>
	<body>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值