JS高级特性（二）

最新推荐文章于 2024-07-31 10:51:11 发布

须佐能乎！

最新推荐文章于 2024-07-31 10:51:11 发布

阅读量228

点赞数

分类专栏： JavaScript 文章标签： JS高级特性 JS对象

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

三、对象

1、如何定义对象

<!DOCTYPE html>
<html>
  <head>
    <title>01_如何定义对象.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	//1 在javascript中,底层存在Object对象:Object对象应该所有对象的父级.
	var obj1 = new Object();
	
	//2 JSON的key/value格式,Java中的Map集合
	var ob2 = {};
	
	//3 在javascript中,函数即对象:函数对象(我起的)
	function obj3(){}
		
  </script>
</html>

2、定义对象的属性和方法

<!DOCTYPE html>
<html>
  <head>
    <title>02_定义对象的属性和方法.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	//定义普通对象的属性和方法(JSON的key/value格式)
	var hero = {
		name : "zhangwuji",
		sayMe : function(){
			alert("i am zhangwuji.");
		}
	}
	
	//定义函数对象的属性和方法
	function Hero(){
		this.name = "zhangwuji";
		this.sayMe = function(){
			alert("i am zhangwuji.");
		}
	}
	
	/*
	 * this的用法:
	 * 	* 指代DOM对象
	 * 	* 指代jQuery对象
	 * 	* 指代javascript对象
	 */
	
	
  </script>
</html>

3、调用对象的属性和方法

<!DOCTYPE html>
<html>
  <head>
    <title>03_调用对象的属性和方法.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	//普通对象
//	var hero = {
//		name : "zhangwuji",
//		sayMe : function(){
//			alert("i am zhangwuji.");
//		}
//	}
	
	//调用普通对象hero的属性和方法
	//1 
//	alert(hero.name);
//	hero.sayMe();
	
	//2 
//	alert(hero['name']);
//	hero['sayMe']();
	
	//增加普通对象hero的属性和方法
	//hero.value = "zhouzhiruo";
	//alert(hero.value);
//	hero.sayVal = function(){
//		alert("zhangwuji's value is zhouzhiruo.");
//	}
//	hero.sayVal();
	
	//修改普通对象hero的属性和方法
	//hero.name = "zhouzhiruo";
	//alert(hero.name);
//	hero.sayMe = function(){
//		alert("i am zhouzhiruo.")
//	}
//	hero.sayMe();
	
	//删除普通对象hero的属性和方法
//	delete hero.name;
//	alert(hero.name);
	
//	delete hero.sayMe;
//	hero.sayMe();
	
	/*
	 * 函数对象:类似于Java中的类的概念
	 * 	* 实际上,是不存在函数对象的概念的(是我们自己起的名)
	 * 	* 函数对象实际上是叫做构造器
	 */
	function Hero(){
		this.name = "zhangwuji";
		this.sayMe = function(){
			alert("i am zhangwuji.");
		}
	}
	
	/*
	 * 调用之前,必须要先new对象
	 * 	* 这里的写法是构造函数的写法
	 * 	* hero也是javascript对象,是一个普通对象
	 */
	var hero = new Hero();
	
	//调用函数对象Hero的属性和方法
//	alert(hero.name);
//	alert(hero['name']);
	
//	hero.value = "zhouzhiruo";
//	alert(hero.value);
	
//	delete hero.name;
//	alert(hero.name);
	
	hero.name = "zhouzhiruo";
	alert(hero.name);
	
//	class A(){
//		String name = "zhangwuji";
//	}
//	
//	A a = new A();
//	a.name
	
  </script>
</html>

4、this的用法

<!DOCTYPE html>
<html>
  <head>
    <title>04_this的用法.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	/*
  	 * this的用法:
  	 * 	* 指代DOM对象(常用)
  	 * 	* 指代JQuery对象(最不常用)
  	 * 	* 指代javascript对象(居中)
  	 * 
  	 * this的实际用法,不止以上三种.
  	 */
	//1 指代DOM对象
//	document.getElementById("ok").onclick = function(){
//		this.value;
//	}
	
	//2 指代jQuery对象:在jQuery的插件中使用
	$.each(this,function(){
		alert(this.value);
	});
	
	//3 指代javascript对象:只要在函数对象中,使用this的话,this永远都指代函数对象
	function Hero(){
		this.name = "zhangwuji";
		this.sayMe = function(){
			alert("hello "+this.name);
		}
	}
	
	var hero = new Hero();
	
	hero.sayMe();
	
  </script>
</html>

5、举例

<!DOCTYPE html>
<html>
  <head>
    <title>05_举例.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	//定义一个字符串
	var str = "aaaa";
	//定义一个数值
	var i = 7;
	//定义一个数组
	var arr = [1,2,3,4,5];
	
	/*
	 * 这些所谓的常用类型,可以直接使用
	 * 	* 这种方式类似于Java中JDK提供的常用类型
	 * 	* 说明在javascript的底层,提供了类似的常用类型
	 * 
	 * javascript的内建对象:Java中的API提供的常用类型
	 * 	* javascript内建对象:帮助文档"w3school.chm"
	 * 	* javascript的内容并不像java一样,具有完整的帮助文档.(javascript没有完整的帮助文档)
	 */
	
  </script>
</html>

四、内建对象

1、Object对象

<!DOCTYPE html>
<html>
  <head>
    <title>01_Object对象.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	//以下两种写法是等价的(面试题)
	var obj1 = new Object();
	var obj2 = {};
	
	//Object对象是所有javascript对象的父级.
	
	//面试题(真实)
	//判断以下哪个描述是错误的?D
//	var a = {};		//定义对象
//	var b = [];		//定义数组
//	var c = //;		//定义正则表达式
//	var d = ();
	
	//面试题(百度)
	//alert():提示框,在提示框中实现换行
	alert("xxx\nyyy");// \r或\n
	
	
  </script>
</html>

2、Array对象

<!DOCTYPE html>
<html>
  <head>
    <title>02_Array对象.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	//以下两种写法是等价的
	var arr1 = [];
	var arr2 = new Array();
	
	alert(typeof arr1);		//object
	alert(typeof arr2);		//object
	
	//Array对象的属性
	//1 length属性:获取数组长度
	//alert(arr1.length);
	
	//2 index和input属性,放弃的
	
	//3 constructor属性:返回对创建此对象的数组函数的引用。(不研究)
	
	//4 prototype属性:使您有能力向对象添加属性和方法。(现在不研究,统一放在原型的内容)
	
	//Array对象的方法
	//1 toString()方法:把数组转换为字符串，并返回结果。
	
	//2 join()方法:把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
	
	//3 pop()和push()方法:删除并返回数组的最后一个元素；向数组的末尾添加一个或更多元素，并返回新的长度。
	
	//4 reverse()方法:颠倒数组中元素的顺序。
	
	//javascript的内建对象的属性和方法,在Java中的JDK的内容,都有类似的内容
	
	//反转字符串示例(面试题)
	
	//定义一个字符串
	var str = "abcdefg";
	//利用String对象的split()方法，将字符串切割成一个数组
	var arr = str.split("");
	//利用Array对象的reverse()方法，将数组中元素的顺序颠倒。
	arr = arr.reverse();
	//测试打印
	alert(arr.toString());
	
	//Java的版本至少在1.5版本以上

	
  </script>
</html>

3、String对象

<!DOCTYPE html>
<html>
  <head>
    <title>03_String对象.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	//以下两种写法不是等价的(面试)
	var str1 = "aaa";
//	var str2 = new String("aaa");
//	
//	alert(typeof str1);		//string
//	alert(typeof str2);		//object
	
	//String对象的属性
	//length属性:字符串的长度(字符的个数)
	//alert(str1.length);		//3
	
	//String对象的方法
	//1 substr():从起始索引号提取字符串中指定数目的字符。
	//2 substring():提取字符串中两个指定的索引号之间的字符。
	
	//3 split():把字符串分割为字符串数组。
	
	//4 replace():替换与正则表达式匹配的子串。
	
	//判断字符串是否包含指定字符串示例
	
	//定义两个要判断的字符串
	var str = "abcdefg";
	var substr = "xyz";
	
	function sub(str,substr){
		//将判断的字符串定义成String对象
		var string = new String(str);		//不必要,更规范一些
		//截取判断的字符串
		var result = string.substr(string.indexOf(substr),substr.length);
		
		if(result==substr){
			return true;
		}else{
			return false;
		}
	}
	
	alert(sub(str,substr));

  </script>
</html>

4、Events对象

<!DOCTYPE html>
<html>
  <head>
    <title>04_Events对象.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	/*
  	 * Event:事件
  	 * Events对象:事件对象
  	 * 	* 在javascript中,具有事件的.
  	 * 		onclick\ondblclick\onchange等
  	 * 	* 事件对象与之前使用的事件内容,是否存在关系?
  	 * 		之前使用的事件内容,其实是javascript中事件对象的属性.
  	 */
	
	
	
  </script>
</html>

5、Functions对象

<!DOCTYPE html>
<html>
  <head>
    <title>05_Functions对象.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	/*
  	 * Functions对象:javascript全局对象
  	 * 	* 全局属性:
  	 * 		* NaN:表示不是一个数值
  	 * 		* undefined:未定义
  	 * 	* 全局方法
  	 * 		* decodeURI():解码某个编码的 URI。
  	 * 		* encodeURI():把字符串编码为 URI。
  	 * 		* escape():对字符串进行编码。
  	 * 		* eval():计算 JavaScript 字符串，并把它作为脚本代码来执行。
  	 * 		* isNaN():检查某个值是否是数字。返回值为Boolean值,true不是数字.
  	 * 
  	 * Functions对象与Function对象:是不是一个?
  	 * 	* Function对象实际上,浏览器内核中集成的javascript引擎里.
  	 * 	* 对于Function对象,我们只需要了解new Function()定义函数即可.
  	 */
	
	
	
	
  </script>
</html>