JavaScript基於對象引入，閉包，面向對象的實現

Function對象的引入，建立方法對象

/*
function say(name,age) {
	alert("姓名："+name+"，年齡："+age);
}
say("蓋倫",24);
*/

//Function對象的引入，建立方法對象
var sayFunc=new Function("name","age","alert(\"姓名：\"+name+\"，年齡：\"+age)");
sayFunc("蓋倫",24);

　　Function對象屬性

//Function對象屬性
var sayFunc=new Function("name","age","alert(\"姓名：\"+name+\"，年齡：\"+age)");
alert("sayFunc方法對象的方法的參數個數"+sayFunc.length);//輸出參數2個

　　Function對象方法

//Function對象方法
var sayFunc=new Function("name","age","alert(\"姓名：\"+name+\"，年齡：\"+age)");
alert(sayFunc.toString());
alert(sayFunc.valueOf());

　　JS變量的做用域

<script type="text/javascript">

var a="zibo";
function func() {
	alert(a);
}
func();//讀取全局變量a

/*
function func2(){
	var b="nihao";
}
func2();
alert(b);//b讀取不到，做用域出了
*/

function func3(){
	c="welcome";
}
func3();
alert(c);//c能夠讀取

</script>

　　閉包

<script type="text/javascript">

function func2(){
	var b="nihao";

	//定義一個function，而後返回return，從而調用了私有變量
	function func2(){//能夠獲取父方法的私有屬性
		alert(b);
	}
	return func2;

}
var result=func2();
result();

</script>

　　閉包的理解（訪問私有變量d）

<script type="text/javascript">

function func4(){
	var d="淄博";//至關於private屬性

	function func4(){//至關getter,setter
		return d;
	}
	return func4;

}
var result=func4();
alert(result());

</script>

　　閉包

閉包是可以讀取其餘函數內部變量的函數

本質上閉包是函數內部和函數外部鏈接起來的一座橋樑

　　閉包的用途

一、讀取函數內部的變量

二、讓這些變量始終保持在內存中

　　閉包使用的注意點：

一、函數的變量保存在內存中，內存開銷很大，不能濫用閉包，不然會形成網頁性能問題，在IE中可能致使內存泄漏，解決辦法，退出函數前，將不使用的局部變量所有刪除。

二、閉包會在父函數外部改變父函數內部變量的值，使用時不要隨意改變。

 

<script type="text/javascript">

var name="Window name";

var obj={
	name:"阿卡麗",//key & value
	age:22,
	getNameFunc:function(){
		return function(){
			return this.name;
		};
	}
};
alert(obj.name);
alert(obj.age);

//返回 this.name，
alert(obj.getNameFunc()());//兩個()

</script>

　　

<script type="text/javascript">

var name="Window name";

var obj={
	name:"阿卡麗",//key & value
	age:22,
	getNameFunc:function(){
		var name="提莫";
		return function(){
			return name;
		};
	}
};
alert(obj.name);
alert(obj.age);

//返回 this.name，
alert(obj.getNameFunc()());//兩個()

</script>

　　面向對象

 

<script type="text/javascript">

//建立對象方式一：對象初始化器
var m={
	name:"淄博",
	age:100,
	show:function(){
		alert("名稱："+this.name+"，年齡："+this.age);
	},
	action:function(){
		alert("使用動做");
	}
};

alert(m.name);
alert(m.age);
m.show();
m.action();

//建立對象方式二：構造函數
function Person(name,age){
	this.name=name;
	this.age=age;
	this.show=function(){
		alert("名稱："+this.name+"，年齡："+this.age);
	};
	this.action=function(){
		alert("使用動做2");
	};
}
var p=new Person("蒙多",22);
alert(p.name);
alert(p.age);
p.show();
p.action();
</script>

　　對象的屬性定義：私有屬性、對象屬性、類屬性

<script type="text/javascript">

function f() {
	this.ob="對象屬性";
	f.prototype.ob2="對象屬性2";
	var privateOb="私有屬性";

}
f.classOb="類屬性";//至關於static屬性

alert(f.classOb);

var ff=new f();
alert(ff.ob);
alert(ff.ob2);
//私有屬性須要閉包才能取出來

</script>

　　對象方法的定義：私有方法、實例方法、類方法

　　

<script type="text/javascript">

function f() {
	this.ob="對象屬性";
	f.prototype.ob2="對象屬性2";
	var privateOb="私有屬性";
	var privateFunc=function(){
		alert("私有方法");
	};
	privateFunc();//私有方法new的時候內部調用
	this.objFunc=function(){
		alert("對象方法");
	};
	f.prototype.objFunc2=function(){
		alert("對象方法2");
	};

}
f.classOb="類屬性";//至關於static屬性
f.classFunc=function(){
	alert("類方法");//至關於static方法
};

/*
alert(f.classOb);

var ff=new f();
alert(ff.ob);
alert(ff.ob2);
//私有屬性須要閉包才能取出來
*/

//調用方法
f.classFunc();
var f1=new f();
f1.objFunc();
f1.objFunc2();

</script>

　　JS實現繼承

一、Apply() 實現屬性和方法的繼承

二、Prototype 實現原型的繼承

<script type="text/javascript">

function A(str) {
	this.str=str;
	this.showStr=function(){
		alert("123"+this.str);
	};
	this.action=function(){
		alert("動做行爲");
	};
}

//B繼承A
function B(str){
	A.apply(this,[str]);
}

var b=new B("string字符串");
alert(b.str);
b.showStr();
b.action();
</script>

　　

<script type="text/javascript">

function A(str) {
	this.str=str;
	this.showStr=function(){
		alert("123"+this.str);
	};
	this.action=function(){
		alert("動做行爲");
	};
}

//B繼承A
function B(str){
	A.apply(this,[str]);
}

B.prototype=new A();//原型繼承

var b=new B("string字符串");
alert(b.str);
b.showStr();
b.action();
</script>

　　JS實現模擬多態

<script type="text/javascript">

function A() {
	this.action=function(){
		alert("動做行爲");
	};
}

//B繼承A
function B(){
	this.action=function(){
		alert("睡覺");
	};
}
B.prototype=new A();//原型繼承

//C繼承A
function C(){
	this.action=function(){
		alert("吃飯");
	};
}
C.prototype=new A();//原型繼承

function action(a){//多態
	if(a instanceof A){
		a.action();
	}
}

var b=new B();
action(b);
var c=new C();
action(c);

</script>