目录
反射机制
反射机制指的是程序在运行时能够获取自身的信息。例如一个对象能够在运行时知道自己有哪些方法和属性。
在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()
例子：
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)
}
}
使用反射去动态设置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原型链继承
继承是面向对象开发的又一个重要概念，它可以将现实生活的概念对应到程序逻辑中。例如水果是一个类，具有一些公共性质，而苹果也是一个类，但苹果属于水果，所有苹果应该继承于水果。
在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>
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方法
class2的adventage方法
一起学习，一起进步 -.- ，如有错误，可以发评论
