js--EcmaScritp(四)对象+Math+Date-CSDN博客

本文链接：https://blog.csdn.net/qq_41532872/article/details/86497850

创建对象的方式1


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			//创建对象的方式1：使用new关键字创建
			var user=new Object();
			//添加属性
			user.name="小明";
			//添加方法
			user.eat=function(){
				console.log(this.name+"吃东西");
			}
		</script>
	</body>
</html>

创建对象的方式2


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			//创建对象的方式2：通过字面量创建，即{属性名值：值，属性名2：值2, 属性名(方法名)：值}
			//js是弱类型语言，属性名可以加引号，也可以不加
			var user={
				  //属性
				  name:"小明",
				  age:22,
				  222:"abc",
				  //方法(函数)
				  sleep:function(){
				  	console.log(this.name+"正在睡觉！");
				  }
			}
			//访问对象的属性的两种语法
			//1.使用点语法来访问，即对象.属性名
			 //2.如果属性名是纯数字时，用中括号法来访问，即对象["属性名"]
			 //无论属性名是不是数字，都可以使用中括号法来访问
			console.log(user.name+"..."+user["age"]);
			console.log(user["222"]);
			//用变量保存属性名时，
			var age="age";
			console.log(user[age]);
			//用点语法访问方法
			user.sleep();
		</script>
	</body>
</html>

在这里插入图片描述

创建对象的方式3


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			//创建对象的方式3：通过构造函数创建,构造函数名首字母大写，和普通函数区分开俩
			//语法:function 函数名(形参){
				  //初始化属性的值
			//}
			function  Person(name,age){
				this.name=name;
				this.age=age;
				this.eat=function(food){
					console.log(this.name+"正在吃"+food);
				}
			}
			 //调用构造函数创建2个对象
			 var p1=new Person("小明",22);
			  var p2=new Person("小华",23);
			  //调用方法
			  p1.eat("苹果");
			  p2.eat("龙虾");
		</script>
	</body>
</html>

在这里插入图片描述

this关键字


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			/**
			 * this关键字的使用场合
			 * 1.用在普通函数中，this代表window对象
			 * 2.用在对象的方法中，this代表当前的对象(实例)
			 * 3.用在构造函数中，this代表当前的新的对象
			 */
			var i=0;
			function f1(){
				 this.i=10;
				 console.log(this);
			}
			//在js中，函数也是属于window对象的，可以用window.函数名()来调用函数
			window.f1();
			var stu={
				name:"张三",
				say:function(){
					console.log(this.name+"在说话");
				}
			}
			stu.say();
			 function  User(name,age){
			 	this.name=name;
			 	this.age=age;
			 }
		</script>
	</body>
</html>

在这里插入图片描述

链式语法


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			/**
			 * 链式语法：用同一个对象，连续调用它的多个方法，核心是多个方法的调用者是同一个对象
			 * 注意：链式调用除了最后一个方法外，都需要在方法体中返回当前对象，即return this
			 */
			  var  obj={
			  	  name:"小明",
			  	  eat:function(food){
			  	  	  console.log(this.name+"正在吃"+food);
			  	  	  //返回当前对象
			  	  	  return this;
			  	  },
			  	  sleep:function(){
			  	  	console.log(this.name+"正在睡觉");
			  	  	  //返回当前对象
			  	  	return this; 
			  	  },
			  	  play:function(){
			  	  	 	console.log(this.name+"正在玩游戏");
			  	  }
			  };
			/*  obj.eat("槟榔");
			  obj.sleep();
			  obj.play();*/
			  //链式语法 
			  obj.eat("槟榔").sleep().play();
			  
		</script>
	</body>
</html>

在这里插入图片描述

for…in循环


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			/**
			 * for..in循环语法
			 * for(var 变量 in  数组或对象){
			 * 	
			 * }
			 */
			 //1.遍历数组:变量代表的是元素的索引
			 var arr1=["11","22","33"];
			  for(var i in arr1){
			  	  console.log(arr1[i]);
			  }
			  //2.遍历对象：变量代表的是属性名，名称是一个string
			  var  user={
			  	   name:'小明',
			  	   age:"24",
			  	   sex:"男",
			  	   eat:function(){
			  	   	console.log(this.name+"在吃东西");
			  	   }
			  };
			  for(var p in user){
			  	//  console.log(p+",类型："+(typeof p));
			  	//console.log(typeof user[p]);
			  	//如果属性的值不是function类型，就输出属性的值
			  	if(typeof user[p]!='function'){
			  		 console.log(user[p]);
			  	}
			  }
		</script>
	</body>
</html>

在这里插入图片描述

eval函数


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是标题</title>
	</head>
	<body>
		<script>
			/**
			 * eval()：是把传入的字符串当成js代码来执行
			 * 从安全性角度来说，不推荐使用，容易造成脚本攻击
			 */
			eval('while(true){alert("11")}');
			//while(true){alert("11")}
			//json：是一种数据格式，刑如{属性名：值，属性名2：值2...属性n:值n}就叫json格式
		</script>
	</body>
</html>

在这里插入图片描述

Math和Date


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<!--	用span显示当前的日期时间信息-->
		<span id="info"></span>
		<script>
		/* Math：这个是数学运算对象，里面的方法都是做数学运算的
		 */
		//floor()：返回小于等于参数的最大整数
		var a=Math.floor(-4.5);
		console.log(a);//-5
		//ceil()：返回大于等于参数的最小整数
		var b=Math.ceil(-4.5);
		console.log(b);//-4
		/**
		 * Date:日期时间对象，处理日期和时间的
		 * 创建：new Date()返回代表当前日期时间的Date对象
		 * getMonth()返回的月份范围[0,11]，即0对应1月份，1对应2月份..11对应12月
		 */
		function  show(){
			    var now=new Date();
		 //得到当前的年
		  var year=now.getFullYear();
		  //得到月份
		  var month=now.getMonth()+1;
		  //得到当前是本月几号
		  var today=now.getDate();
		  //得到小时
		  var hour=now.getHours();
		  //得到分钟
		  var minute=now.getMinutes();
		  //得到秒
		  var second=now.getSeconds();
            //	得到星期几,返回[0,6],0代表星期天，1代表星期一，依次类推
            var weeknum=now.getDay();
            //数组保存星期几的汉字
            var weeks=["日","一","二","三","四","五","六"];
           
		//  console.log(year+"年"+month+"月"+today+"号"+"，现在是："+hour+":"+minute+":"+second);
		document.getElementById('info').innerHTML=year+"年"+month+"月"+today+"号，星期"+ weeks[weeknum]+"，现在是："+hour+":"+minute+":"+second;
		}
		 show();
		  setInterval(show,1000);
		</script>
	</body>
</html>

在这里插入图片描述