高级面向对象之面向对象中常用的属性和方法

最新推荐文章于 2024-09-26 19:55:39 发布

HeartAndThink

最新推荐文章于 2024-09-26 19:55:39 发布

阅读量335

点赞数

文章标签： javascript 函数 prototype 面向对象方法-对象

本文链接：https://blog.csdn.net/heartAndthink/article/details/73027342

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>面向对象中的常用属性和方法</title>
	</head>
	<body>
		<script>
			面向对象中的常用属性和方法:
			(1)hasOwnProperty() : 看是不是对象对象自身下面的属性
			(2)constructor : 查看对象的构造函数
					->:每个原型都会自动添加constructor属性
					->:for in 的时候有些属性是找不到的
					->:避免修改constructor属性
			(3)instanceof : 运算符
					->:查看对象与构造函数在原型链上是否有关系
			(4)toString():object对象上的方法
			
			demo1:
			
			var arr = [];
			arr.num = 10;
			Array.prototype.num2 = 20;
			alert(arr.hasOwnProperty('num'));  // true
			alert(arr.hasOwnProperty('num2')); // false
			demo1中 我们可以看出num是对象arr自身下面的属性,num2不是对象arr下面的属性,而是数组对象Array原型对象下面的属性
			
			demo2: constructor使用
			
			function Aaa(){
				
			}
			var a1 = new Aaa();
			alert(a1.constructor);   // Aaa
			var arr = [];
			alert(arr.constructor);  // Array
			但是这个constructor属性是哪里来的呢?
			原来 当我们定义一个对象后,系统会自动添加一行代码,以上面的Aaa对象为例,当我们定义了
			一个对象 Aaa之后(function Aaa(){}),系统会自动添加下面这行代码:
			Aaa.prototype.constructor=Aaa;就是说当我们定义了一个对象后,程序会自动给我们添加一个construcor属性,
			它是一个指针,指向该对象的构造函数,
			因此我们可以利用constructor属性来判断一些对象的类型,如:
			var arr = [];
			alert(arr.constructor == Array); // true
			
			demo3:
			但是我们可以修改constructor,如
			function Aaa(){
				
			}
			Aaa.prototype.constructor = Array;
			var a1 = new Aaa();
			alert(a1.constructor == Aaa);  // false
			此时我们修改了系统为Aaa对象默认添加的constructor属性,此时Aaa的constructor属性不再指向Aaa,而是Array
			但是我们尽量不要修改constructor属性
			
			demo4: 我们有时候不经意就把constructor属性值该掉了
			function Aaa(){
			}
			
			Aaa.prototype.name='小明';
			Aaa.prototype.age = 20;
			
			var a1 = new Aaa();
			alert(a1.constructor); // Aaa
			
			但是当我们这样写时(简写):
			Aaa.prototype={
				name:'小明',
				age:20
			}
			
			alert(a1.constructor);  //Object
			
			这是为什么呢? 以为这种写法相当于我们把一个json对象{name:'小明',age:20}赋值给了Aaa的原型对象,
			json 对象有自己的constructor,此时我们就不经意间修改了Aaa的默认constructor属性,
			但是我们可以手动矫正,把constructor 属性的指向给修正过来:
			
			Aaa.prototype={
				constructor:Aaa,
				name:'小明',
				age:20
			}
			这样constructor属性又重新指向了Aaa
			
			demo5:通过for in 获取对象属性(自己添加的属性可以知道,系统自带的既原型链上的属性是获取不到的):
			
			var Aaa =function(){
				
			}
			
			for(var attr in Aaa.prototype){
				alert(attr);  //弹不出任何值
			}
			当我们给Aaa对象添加一个属性时, Aaa.name='小明'; for in 便利就可以获取到,弹出name
			
			2.instanceof
			它其实不是面向对象的属性和方法,它其实是一个运算符,但是它的作用却是跟面向对象有关的
			demo1:
			function Aaa (){
				
			}
			var a1 = new Aaa();
			alert(a1 instanceof Aaa);    // true
			alert(a1 instanceof Array);  //false
			alert(a1 instanceof Object); //true
			因此我们也可以利用instanceof做类型判断
			
			3.toString(): 返回对象的字符串表示
			
			demo1:
			function Aaa(){
				
			}
			 var a1 = new Aaa();
			 alert(a1.toString == Object.prototype.toString); // true
			 结果为true 表明 toString()方法来自于 Object
			 
			 Demo2: 与demo1比较
			 
			var arr =[];
			alert(arr.toString == Object.prototype.toString);  //false
			var arr2 = new String();
			alert(arr2.toString == Object.prototype.toString); // false
			
			demo1中对象是自定义对象,demo2中是系统对象,对比我们可以得出结论:
			
			toString()方法:--> 系统对象下面都是自带的,自己写的对象都是通过原型链找Object下面的
			
			demo3: 既然我们知道了toString方法的作用是返回对象的字符串表示,以及自定义对象的toString
					方法的出处我们就可以利用toString 方法达到下面的作用
					
					1:返回自定义的字符串样式
					
						var arr =[1,2,3];
						alert(arr.toString()); // 1,2,3 系统默认的返回形式
						我们可以自定义返回形式:
						Array.prototype.toString = function(){
							return this.join('+');
						}
					
					alert(arr.toString());  // 1+2+3 得到我们自定义的返回形式，以加号连接
					
					2:进制转换
					
						var num = 255;
						alert(num.toString(16)); // ff
						把整形的数值255 转换为16进制的字符表示, 因此我们可以利用这一特性
						实现颜色值的转换(RGB和16进制颜色值相互转换)
					
					3. 做类型判断
				        	虽然我们可以利用 constructor 属性和instanceof 做类型判断,但是toString方法
				        	也可以用来做类型判断
				     
						var arr=[];
						var arr2={};
						var arr3 = new Date();
						alert(Object.prototype.toString.call(arr));  // '[object Array]'
						alert(Object.prototype.toString.call(arr2)); // '[object Object]'
						alert(Object.prototype.toString.call(arr3)); // '[object Date]'
						通过结果可以看出,我们可以利用toString方法进行类型判断,如:
						
						alert(Object.prototype.toString.call(arr) == '[object Array]');  // true
						
					4.总结:
						既然 constructor,instanceof,toString()这三个都能用来判断类型,那么哪一种最呢?
						答案是 使用toString()方法,它才是最完美的判断,基本上这三个我们都能用,但是在某些特殊的
						情况下 constructor和instanceof 就会出现问题,例如在iframe 中(跨页面了),如下:
						
			 			window.onload = function(){
			 				var oF = document.createElement('iframe');
			 				document.body.appendChild(oF);
			 				var ifArray = window.frames[0].Array;  // 这个数组对象是iframe 下的数组对象
			 				
			 				// 创建一个数组对象实例arr,它其实是iframe下数组对象的实例，那就跨页面了，
			 				// 虽然它是一个数组，但是它是在iframe下面的数组
			 				var arr = new ifArray();
			 				
			 				alert(arr.constructor == Array);   // false
			 				alert(arr instanceof Array);       // false
			 				alert(Object.prototype.toString.call(arr) == '[object Array]');  // true
			 			}
			 			// 综上所述,使用toString方法判断类型最好(当然大部分情况下，constructor和instanceof也能用)
		</script>
	</body>
</html>