網頁制作poluoluo文章簡介：由於JavaScript的靈活性,可以讓每個人按照自己的習慣進行編寫代碼.有函數式的編程方式,也有現在用的較為廣泛的對象字面量.由於面向對象的出現,JavaScript剛開始的函數編程也逐漸演化為類式編程方式.現在我對幾種比較熟悉的編程習慣進行簡單的說明.
由於JavaScript的靈活性,可以讓每個人按照自己的習慣進行編寫代碼.有函數式的編程方式,也有現在用的較為廣泛的對象字面量.由於面向對象的出現,JavaScript剛開始的函數編程也逐漸演化為類式編程方式.現在我對幾種比較熟悉的編程習慣進行簡單的說明:
1.對象字面量:
var person = {
name:null,
setName:function(name){
this.name = name;
return this.name;
},
getName:function(){
alert(this.name);
}
}
具有JavaScript特色的一種編程方式,以類為單位含有屬性name,方法setName和getName.調用方法比較簡便person.setname('R'),this由此至終均指向person,person的屬性與方法均不私有,可以進行調用.
2.prototype構造器調用模式
var Person = function(){
this.name = null;
}
Person.prototype.setName = function(name){
this.name = name;
}
Person.prototype.getName = function(){
alert(this.name);
}
也是很常見的編程方式,創建一個Person類,然後利用prototype對類進行擴展,添加方法.與對象字面量最大區別在於,調用該類的方法時,必須先new(跟Java調用類相似).var p = new Person();p.getName();如果不用new,而直接創建,會產生錯誤.而且這種錯誤將不會報錯,難以發現.錯誤的產生原因來自於this指向Person.prototypel,而Person並沒有setName方法.
3.利用匿名函數進行函數編程
(function(){
var name;
var setName = function(n){
name = n;
}
window['person']['setName'] = setName;
var getName = function(){
alert(name);
}
window['person']['getName'] = getName;
})()
類的出現,其中一個最大的好處就是降低了全局變量的出現,但是如果你依舊習慣於函數式編程,沒關系,只要創建一個匿名函數,進行閉包,就可以再裡面進行函數編程,也不需要擔心全局變量的出現.如上所看到的var name;在匿名函數外部是無法調用的,然後利用外部的變量來調用內部的函數,或者是變量.可以借此創建私有變量和私有方法.
網頁制作poluoluo文章簡介：由於JavaScript的靈活性,可以讓每個人按照自己的習慣進行編寫代碼.有函數式的編程方式,也有現在用的較為廣泛的對象字面量.由於面向對象的出現,JavaScript剛開始的函數編程也逐漸演化為類式編程方式.現在我對幾種比較熟悉的編程習慣進行簡單的說明.
4.類式編程(不知道取什麼名)
var person = function(){
var name = null;
return{
setName:function(n){
name = n;
},
getName:function(){
alert(name);
}
}
}
與對象字面量很相似,其不同之處在於拋開了this,和可以對方法與屬性進行私有.調用方法與對象字面量基本一致.
5.方法鏈
var Person = function(){
this.name = null;
}
Person.prototype = {
setName:function(name){
this.name = name;
return this;
},
getName:function(){
alert(this.name);
return this;
}
}
jQuery就是一個最經典的方法連庫,如果還不懂方法鏈是什麼,看看這個例子:
var p = new Person();
p.setName('Tom').getName().setName('Ray').getName();
由於每個方法的結尾都是return this;所以產生了方法鏈式的類.
網頁制作poluoluo文章簡介：由於JavaScript的靈活性,可以讓每個人按照自己的習慣進行編寫代碼.有函數式的編程方式,也有現在用的較為廣泛的對象字面量.由於面向對象的出現,JavaScript剛開始的函數編程也逐漸演化為類式編程方式.現在我對幾種比較熟悉的編程習慣進行簡單的說明.
本人比較熟悉的就是這幾種方式了,每個人都有每個人的特色,所以方式也是說不盡的.但是借此,我想探討以下幾個問題:
1.有關於this指針
在建立多種類的時候都用到this,可是this的作用究竟是什麼,而其實this在重用和繼承上起著很大的作用.我們先看看一個關於繼承的例子:
首先建立Person類:
var Person = function(){
this.name = null;
}
Person.prototype.setName = function(name){
this.name = name;
}
Person.prototype.getName = function(){
alert(this.name);
}
Person.prototype.getAge = function(){
var age = this.age || '';
alert(age);
}
然後在建立一個Children類,並集成Person的所有方法和屬性:
var Children = function(age){
this.name = null;
this.age = age;
}
Children.prototype = new Person(); //繼承Person的屬性和方法
Children.prototype.ageJudge = function(){ //另外為Children添加新方法
if(this.age > 18){
alert('成年人~');
} else {
alert('未滿18歲呢~');
}
}
Children.prototype.getName = function(){ //重寫getName方法
var about = this.name + ' ' + this.age;
alert(about);
}
var tom = new Children(12);
var ages = tom.getAge(); //12
var judge = tom.ageJudge(); //未滿18歲呢~
var setN = tom.setName('Tom');
var get = tom.getName(); //Tom 12
這就是繼承,然後我們看個簡單的函數重用:
var SetColor = function(){
this.style.backgroundColor = '#000'; //this指向window
}
document.body.onclick = SetColor; //此時this指向body
documnet.getElementById('color').onmouseout = SetColor; //this指向documnet.getElementById('color')
看了this的作用之後,想必對this有了新的認識了吧.現在就有疑問了,就是this的該用與不該用,下面在看個簡單的例子:
var setColor = {
init:function(obj){
this.obj = obj; //this指向setColor
this.obj.onclick = this.color;
},
color:function(){
this.style.backgroundColor = '#000'; //this指向obj
}
}
就在一個類裡,this卻指向2處地方,有時這樣總會讓人覺得困惑.剛學習的人更會被this弄的暈頭轉向.而稍稍改變一下寫代碼的方式:
var setColor = {
init:function(obj){
setColor.obj = obj;
setColor.obj.onclick = setColor.color;
},
color:function(){
this.style.backgroundColor = '#000'; //this可以方便方法的重用
}
}
這樣一下來,代碼可以更加的清晰了.所以編寫代碼的時候應該考慮好究竟今後的用途,還有能否重用.如果明確了不進行繼承或是重用,個人覺得應該盡可能的避免使用this,更有個比較常出現的問題.如下:
var Person = function(){
this.name = null;
}
Person.prototype.setName = function(name){
this.name = name;
}
Person.setName('tom'); //錯誤方式此時setName方法中的this將指向Person.prototypel,Person並沒有setName方法
前面講過,若果不寫成var p = new Person();p.setName('tom');該類裡的this將會直接指向Person.prototypel.這種錯誤在編譯時,還是運行時都不會報錯.有時會造成讓人很頭痛的問題.所以在編寫代碼時,我總是很慎重的選用this.
網頁制作poluoluo文章簡介：由於JavaScript的靈活性,可以讓每個人按照自己的習慣進行編寫代碼.有函數式的編程方式,也有現在用的較為廣泛的對象字面量.由於面向對象的出現,JavaScript剛開始的函數編程也逐漸演化為類式編程方式.現在我對幾種比較熟悉的編程習慣進行簡單的說明.
2.類的封裝
在Java裡,對類的方法或是屬性,可以設置為私有,這樣就可以避免外部的調用,而JavaScript卻不存在這樣的設置,看看下面的代碼:\
var person = {
name:null,
init:function(name){
this.setName(name);
}，
setName:function(name){
this.name = name;
return this.name;
}
}
person.init('tom'); //tom
在這個類裡,一共有2個方法,分別是init和setName,而我們只希望從init中運行setName,或是以後將會為裡面添加的各種方法,而不希望出現:
person.setName('tom'); //tom
直接調用setName方法,正確的說,希望setName方法私有,還有name屬性私有.避免別的程序員使用你的類時,調用了不想被調用的方法.
那應該怎麼對類的封裝好呢?試試另一種編程方式吧,看看改版的怎麼樣:
var person = function(){
var name = null;
var setName = function(n){
name = n;
return name;
}
return{
init:function(n){
setName(n);
}
}
}
這樣子,就可以講原本要私有化的方法和屬性私有化了,外部無法直接調用了.這也是利用了閉包而達成所需要的方式的.可是這種編程方式不易於讀,尤其是新手看到這種代碼會很吃力,還有在占用內存方面也要比一般的高些.
好了,暫時先介紹到這裡,下次有時間在說說閉包與作用域.