經過這幾天的博客瀏覽，讓我見識大漲，其中有一篇讓我感觸猶深，JavaScript語言本身是沒有面向對象的，但是那些大神們卻深深的模擬出來了面向對象，讓我震撼不已。本篇博客就是在此基礎上加上自己的認知，如有錯誤，還請見諒。 具體來說實現模擬面向對象主要是利用JavaScript函數閉包這個概念css3 ...
經過這幾天的博客瀏覽，讓我見識大漲，其中有一篇讓我感觸猶深，JavaScript語言本身是沒有面向對象的，但是那些大神們卻深深的模擬出來了面向對象，讓我震撼不已。本篇博客就是在此基礎上加上自己的認知，如有錯誤，還請見諒。
具體來說實現模擬面向對象主要是利用JavaScript函數閉包這個概念css3翻轉。由於JavaScript中的每一個function都會形成一個作用域，而如果變數聲明在這個域中，那麼外部是無法直接去訪問，要想訪問必須new出一個實例來，相當於Java中class。首先讓我們來瞭解一下prototype方法：
1、不使用prototype屬性定義的對象方法，是靜態方法，只能直接用類名進行調用！另外，網頁特效，此靜態方法中無法使用this變數來調用對象其他的屬性！
2、使用prototype屬性定義的對象方法，是非靜態方法，只有在實例化後才能使用！其方法內部可以this來引用對象自身中的其他屬性！
Tips ：所有的變數，如果不加上var關鍵字，則預設的會添加到全局對象的屬性上去！
具體來說模擬類有以下5種常見寫法：
第一種寫法：具體介紹見以下代碼註釋。
?| 1 2 3 4 5 6 7 8 9 10 11 |
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;/*Circle.PI屬於全局變數 */
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}/*Circle方法調用prototype屬性從而能用this調用 Circle方法中的r屬性*/
var c = new Circle(1.0);/* 實例化 Circle*/
alert(c.area());
|
第二種寫法：與Java類相似，推薦使用！
?| 1 2 3 4 5 6 7 8 9 10 11 12 |
var Circle = function() {
var obj = new Object(); /*先實例化Object方法，使之能調用 obj.PI屬性及obj.area方法*/
obj.PI = 3.14159;
obj.area= function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );
|
第三種寫法：主要思想是自己先實例化出一個對象，在往這個對象里添加屬性及方法
?| 1 2 3 4 5 6 7 |
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
}
alert( Circle.Area( 1.0 ) );
|
第四種寫法：該寫法跳過new這一步驟，且電腦簡單清晰明瞭，個人推薦這種寫法！！
?| 1 2 3 4 5 6 7 |
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
|
第五種寫法：此方法與前三種大同小異，不過聽說這種寫法很少人用，不建議推薦使用哦！！
?| 1 2 3 |
var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");
alert( (new Circle()).area(1.0) );
|
想必各位朋友都在想既然是模擬面向對象，那是不是得有封裝繼承，getset方法？？？答案是肯定的，那讓我們來看看如下代碼：
封裝：在看看如下代碼我們能清晰的瞭解到封裝的使用，假若我們去掉 var name = "default"; 中的var，那麼結果又是怎麼樣？？答案是與先前一樣的，由此可見無var定義的屬性只是再其變數作用域中充當全局，只有屬性在其作用域中是私有的，若要定義一個私有方法需要將其賦予一個變數充當屬性。還有本例中new 可加可不加，若不加可往其後添加（）圖片切換。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var person = function(){
//變數作用域為函數內部，外部無法訪問
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
}();
alert(person.name);//直接訪問，結果為undefined
alert(person.getName());
person.setName("abruzzi");
alert(person.getName());
|
實現類和繼承：該例的主要思想是定義一個變數，將一個方法賦予它，在根據prototype方法將需要繼承的類放入其中即可達到繼承的效果。。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function Person(){
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
}; /* 封裝好的一個類Person */ var Jack = function(){};
//繼承自Person
Jack.prototype = new Person();
//添加私有方法
Jack.prototype.Say = function(){
alert("Hello,my name is Jack");
};
var j = new Jack();
j.setName("Jack");
j.Say();
alert(j.getName());
|
