目录

反射机制

使用反射去动态设置CSS样式

JavaScript原型链继承

 

反射机制

反射机制指的是程序在运行时能够获取自身的信息。例如一个对象能够在运行时知道自己有哪些方法和属性。

在JavaScript中有一个很简单的语法来实现反射机制，就是for(...in...)

for(var p in obj){
	if(typeof(obj[p]) == "function" ){
		obj[p]();
	}else{
		alert(obj[p]);
	}
}

这段语句遍历obj对象的所有属性和方法，遇到属性则弹出它的值，遇到方法则立刻执行，在后面可以看到，在面向对象的JavaScript程序设计中，反射机制是很重要的一种技术，在实现类的继承中发挥了很大的作用。

function Person(){
	this.personName = "zhang";
	this.personAge = 10;
	this.showInfo = function(){
		console.log(this.personName,this.personAge)
	}
}
//创建Person函数的实例p
var p =new Person();
p.showInfo()

JavaScript 反射创建对象l js反射机制_反射机制

例子：

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/JavaScript反射机制.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<button onclick="show()" >按钮</button>
		<script type="text/javascript">
//			var p =new Person();
//			p.showInfo()
			function show(){
				var obj =new Person();
				for(var o in obj){
					if(typeof(obj[o]) == "function" ){
						obj[o]();
					}else{
						alert(obj[o]);
					}
				}
			}
		</script>
	</body>
</html>

JavaScript反射机制.js

function Person(){
	this.personName = "zhang";
	this.personAge = 10;
	this.showInfo = function(){
		console.log(this.personName,this.personAge)
	}
}

JavaScript 反射创建对象l js反射机制_javascript_02

JavaScript 反射创建对象l js反射机制_javascript_03

JavaScript 反射创建对象l js反射机制_javascript_04

JavaScript 反射创建对象l js反射机制_html_05

JavaScript 反射创建对象l js反射机制_html_06

 

使用反射去动态设置CSS样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="mydiv" style="width: 200px;height: 200px;">
			this is my div
		</div>
		<button onclick="changeDiv('red','white')" >按钮</button>
		<script type="text/javascript">
			function changeDiv(bgColor,color){
				var oDiv = document.getElementById("mydiv");
				if(oDiv){
					oDiv.style.backgroundColor = bgColor;
					oDiv.style.color = color
				}
			}
		</script>
	</body>
</html>

JavaScript 反射创建对象l js反射机制_html_07

JavaScript 反射创建对象l js反射机制_JavaScript 反射创建对象l_08

 

JavaScript原型链继承

继承是面向对象开发的又一个重要概念，它可以将现实生活的概念对应到程序逻辑中。例如水果是一个类，具有一些公共性质，而苹果也是一个类，但苹果属于水果，所有苹果应该继承于水果。

在JavaScript中没有专门的机制去实现类的继承，但是通过拷贝一个类的prototype到另一个类来实现继承。一种简单的实现：

function class1(){
	//构造函数
}
function class2(){
	//构造函数
}

class2.prototype = new class1(); //将class1的属性和方法都给class2，让class2继承class1，将class1实例赋给class2的原型链
class2.prototype.moreProperty1 = "xxx";  //设置class2独有的属性
class2.prototype.moreMethod1 = function(){ //设置class2独有的方法
	//方法实现代码
}
var obj = new class2()

JavaScript使用instanceof判断一个对象是否是某个类的实例

例子:

JavaScript

function fruits(){
	this.name = "水果";
	this.eat = "好吃健康";
	this.adventage = function(){
		alert("对身体有益处")
	}
}
function apple(){
	//构造函数
}

apple.prototype = new fruits(); //将class1的属性和方法都给class2，让class2继承class1
apple.prototype.name = "苹果"
apple.prototype.yanse = "颜色是红色的";  //设置class2独有的属性
apple.prototype.moreMethod1 = function(){ //设置class2独有的方法
	alert("苹果的独有功效")
}

HTML 

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/JavaScript反射机制.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>

		<script type="text/javascript">
			var obj = new apple()
			console.log(obj);
			console.log(obj.eat)
			console.log(obj.name)
			obj.adventage()
			obj.moreMethod1()
		</script>
	</body>
</html>

JavaScript 反射创建对象l js反射机制_javascript_09

JavaScript 反射创建对象l js反射机制_javascript_10

JavaScript 反射创建对象l js反射机制_JavaScript 反射创建对象l_11

console.log(obj instanceof fruits)  //true
console.log(obj instanceof apple)  //true

obj既是苹果的实例，也是水果的实例

 

如果使用class2.prototype = class1.prototype的方法，如果当class2的原型链改变的话，class1的原型链也会改变.如果使用class2.prototype = new class1();就不会产生影响。

function fruits(){
	this.name = "水果";
	this.eat = "好吃健康";
}
fruits.prototype.adventage = function(){
	alert("kkkkkkk")
}
function apple(){
	//构造函数
}

apple.prototype = fruits.prototype; //将class1的属性和方法都给class2，让class2继承class1
apple.prototype.adventage = function(){
	alert("aaaaaaaaaaaaaaaaaaaa")
}

HTML 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/JavaScript反射机制.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var oo = new fruits()
			oo.adventage()
			var obj = new apple()
			console.log(obj);
			obj.adventage()
		</script>
	</body>
</html>

class1的adventage方法 

JavaScript 反射创建对象l js反射机制_反射机制_12

class2的adventage方法  

JavaScript 反射创建对象l js反射机制_反射机制_13