JS教程:學習筆記之JS類

來源:互聯網
上載者:User

背景:接觸JavaScript快兩年了。從最開始對她充滿著好奇,到現在的學習了許多關於她的架構。朋友問我:都有這麼多架構,你為何還要去學最底層的物件導向呢?其實這個問題:另一個朋友已經替我回答了。無論以後架構在怎麼變,只要瞭解底層的原理,學起來都是很容易上手的。好了,我們開始學習了。

1、    建立對象:

var obj = new Object();//第一種方式。

var obj = {};//第二種方法。順帶一句可以通過var arr = [] 來建立數組

2、    給對象的屬性賦值

nahao.gender = 'male';

nahao.yearOfBirth = 1989;

nahao.name = 'Topcss'; //對象的屬性也可以叫做對象的成員。像普通的變數一樣,JS對象的屬性可以是是字串,數組,數字,甚至可以是對象或者是函數。

3、    給對象添加方法其實對象的屬性如果是函數,那麼這個屬性就可以叫做對象的方法

nahao.gender = 'male';

nahao.yearOfBirth = 1989;

nahao.name = 'Topcss';

nahao.info = function(){

var str = '姓名:' +

this.name + ',性別:' +

this.gender + ',出生年:' +

this.yearOfBirth;

alert(str);

}

nahao.info();

4、    我們可以使用下面的簡略文法定義上面的對象:

var nahao = {

gender : 'male',

yearOfBirth : 1989,

name : 'Topcss',

info : function(){

var str = '姓名:' + this.name + ',性別:' + this.gender + ',出生年:' + this.yearOfBirth;

alert(str);

}

};//如果調用nahao.info(),將會得到和上面一樣的結果。需要注意的是,屬性之間使用逗號隔開,最後一個屬性之後沒有逗號。

5、 建構函式建構函式可以協助我們來縮減代碼量。首先,建構函式也是一個函數。雛形如下:

function Person(){}/和定義普通的函數沒有什麼區別。下面就來向Person建構函式中新增內容:

function Person(name,gender,yearOfBirth,site){

this.name = name;

this.gender = gender;

this.yearOfBirth = yearOfBirth;

this.site = site;

this.info = function(){

var str = '姓名:' + this.name + ',性別:' + this.gender

+ ',出生年:' + this.yearOfBirth + '網站:' + this.site;

alert(str);

}

}//這樣,建構函式就完成了。我們現在就可以使用如下語句來定義多個對象了:

var nahao = new Person('Top css',male,1989,'www.javava.org);

var gaoshou = new Person('Widen','male',1980,'www.baidu.net');

var wudi = new Person('不詳','不知道','保密','bbs.blueidea.net');通過他們的方法來調用

nahao.info();

gaoshou.info();

wudi.info();

注意:在上面的建構函式中,參數的名字和對象屬性的名字是相同的,例如:

this.name = name;雖然這樣是合法的,但是如果要定義私人屬性的話就不行了(後面會提),而且看起來比較混亂。所以最好將建構函式修改如下:

function Person(nameArg,genderArg,yearOfBirthArg,siteArg){

this.name = nameArg;

this.gender = genderArg;

this.yearOfBirth = yearOfBirthArg;

this.site = siteArg;

this.info = function(){

var str = '姓名:' + this.name + ',性別:' + this.gender

+ ',出生年:' + this.yearOfBirth + '網站:' + this.site;

alert(str);

}

}

6、 靜態方法什麼是靜態方法呢?就是直接添加在某個對象上的屬性或者方法,它僅對一個對象有效,例如:

nahao.skill = '會點XHTML,CSS,現在還會說JavaScript了';添加完這個語句之後,nahao就擁有了skill屬性。但是出自同一個建構函式的gaoshou和wudi卻不受任何影響。當然了,我們可以給它們也加上這個屬性:

gaoshou.skill = '精通HTML,CSS,JS,FLEX,PHP,.NET,Linux編程,Perl,Ruby,XXX...';

wudi.skill = '能用啤酒瓶蓋與沙子手工打磨出CPU等PC基本零組件。';

同樣,我們也可以給建構函式添加靜態方法,但是這同樣不會影響使用該建構函式定義的對象。例如:

Person.showName = function(){

alert(this.name);

};

Person.showName();

nahao.showName();//我們給Person定義了一個showName函數,但是它只對建構函式Person本身有用(但是沒有什麼實際意義),如果在nahao對象上調用這個方法將會出錯。

7、 給對象定義私人成員公開的對象?在前面定義的所有對象,其所有的屬性都是暴露在外的,可以隨便訪問,甚至修改也沒問題。例如我們可以通過nahao.name直接存取到對象的名字等等屬性。如果我們希望有一個屬性對外保密,就可以給對象定義私人屬性:

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){

……

var privacy = privacyArg;

……

}

var nahao = new Person('Top css',male,1989,'www.javava.org','有10跟腳趾頭');

alert(nahao.privacy); //對建構函式作出一定修改之後,我們給nahao對象添加了一個privacy屬性,如果試圖alert它的值的話將會顯示undefined。

下面再來看看私人方法,如果我們對Person建構函式作出如下修改:

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){

function insideOnly(){

alert('我只在對象內部可以調用!');

}

}//那麼insideOnly將不能被外部所訪問,如果試圖執行這個函數將會出錯。需要注意的是,私人方法並沒有綁定到對象上,它的this關鍵字也並不指向對象。如果需要在私人方法內引用對象,那麼可以使用如下方法:

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){

……

var myOwner = this;

function insideOnly(){

alert(myOwner.name);

}

}//首先在建構函式中定義一個myOwner變數,將this關鍵字賦給它,之後就可以在私人函數裡使用這個變數來訪問對象本身了。

8、 特權方法私人成員不能在對象的外部存取,不能訪問的對象有什麼用?我們可以使用特權方法來訪問這些私人屬性。所謂特權方法就是使用this關鍵字定義的函數,例如:

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){

……

this.showPrivacy = function(){

var str = '秘密:' + this.name + privacy + '!';

alert(str);

};

}

var nahao = new Person('Top css',male,1989,'www.javava.org','有10跟腳趾頭');

nahao.showPrivacy();

我們首先給Person建構函式添加了一個showPrivacy特權方法,方法中使用了私人變數privacy的值。最後我們在nahao對象上調用該方法,結果如下:

9、 prototype淺析首先,我們要否定上面這句話“對Person.prototype的修改同樣會影響到使用Person定義的對象。”請看如下代碼:

Person.prototype = {

mark:'Person.Proto'

}

var nahao = new Person('Top css',male,1989,'www.javava.org');

Person.prototype = {

mark:'Person.NewProto'

}

alert(nahao.mark);

alert的輸出會是什麼呢?根據上面的經驗,在alert之前,對Person.prototype的最後修改將它的mark屬性賦值為'Person.NewProto'。但是實際的輸出結果:Person.Proto

這不是bug,而且各個瀏覽器裡都一樣。原因分析如下:

Person.prototype = {

mark:'Person.Proto'

}

一段首先建立一個對象字面量,並且賦值給Person.prototype,我們稱這個對象字面量為Proto。

var nahao = new Person('Top css',male,1989,'www.javava.org');

在建立nahao對象並且按照建構函式初始化對象的同時,會悄悄給nahao對象設定一個內部屬性,我們暫且將其命名為xxx,並且將其賦值為Person.prototype的值,也就是上面提到的對象字面量Proto,JavaScript的動態繼承也就是由這個xxx實現的。(這個JavaScript的內部實現機制不是我拍腦門想出來的,是Netscape的工作人員的一篇文章裡提到的,下面也會用程式來證明這個流程。)然後,

Person.prototype = {

mark:'Person.NewProto'

}

這裡我們將建立另外一個對象字面量NewProto,並且賦值給Person.prototype。到這裡就很明顯了,儘管我們修改了 Person.prototype,但是並沒有影響到nahao對象。當我們訪問nahao.mark的時候,它首先在自己內部找,找不到就會去找xxx,自然就找到了Proto,而非NewProto。那麼xxx這個實現動態繼承的關鍵究竟是什麼呢?在FireFox中它是__proto__,有以下代碼為證。至於在IE中xxx是什麼我還沒找到。

Person.prototype = {

mark:'Person.Proto'

}

var nahao = new Person('Topcss','male',1989,'www.nahao8.com');

nahao.prototype = {

mark:'Person.NewProto'

}

alert(nahao.mark);

alert(nahao.__proto__.mark);//兩次alert的結果都是一樣的,都是Proto。

alert(nahao.__proto__===Person.prototype);//結構為true。

以上代碼經過測試適用於FireFox和chrome。NetScape應該也可以,IE不行。

個人觀點:Person.prototype = {}的方式最好只在定義建構函式的時候使用一次,而且要緊跟著建構函式寫,以後修改prototype的時候都使用Person.prototype.protertyA = ‘valueA’的形式。

10、    最後的建構函式我們在上面看到了定義對象,以及設這和修改其屬性的各種方法,我們可以在建構函式中定義屬性,可以在對象外部定義(靜態)屬性,也可以在對象的prototype中定義屬性。下面是我使用的大致格式:

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){

//公有屬性

this.name = nameArg;

this.gender = genderArg;

this.yearOfBirth = yearOfBirthArg;

this.site = siteArg;

//私人屬性

var privacy = privacyArg;

//特權方法

this.showPrivacy = function(){

};

}

Person.prototype = {

//公有方法

info : function(){

},

func:function(){

}

}



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。