js中面向物件的5種寫法
阿新 • • 發佈:2019-01-04
今天為了看看別人網站上是如何實現類似於橫向tab選項卡切換效果是如何實現的,其實這個是根據具體的業務而定,可以同過不同的方法而定,注意我這裡說的是類似。看了一些大型網站是如何實現的,就看了看別人寫的js程式碼,看著越來越不明白,寫的有寫程式碼,看著好像有點像java中面向物件程式設計,並不是以前沒見過,只是以前更不沒有仔細研究,只是往裡面添加了一些資料而已,今天仔細研究,結果讓我漲知識了,媽的js居然有面向物件的寫法(感覺像是發現了新大陸,好興奮,朋友們莫笑話,有寫朋友可能會罵,這個sb,居然連這個都不知道。說句老師話我真不知道)。 發現這個我就上網上搜了一些資料,準備學習學習。
一、先從面向物件的寫法學起。
下面這篇文章是從一個論壇上抄寫來的,論壇的主題是:討論這五種寫法,它們的優缺點,哪個比較規範,特別是最後兩種,經常見到。
文章轉自:http://www.iteye.com/topic/434462
//定義Circle類,擁有成員變數r,常量PI和計算面積的成員函式area()
- //第1種寫法
- function Circle(r) {
- this.r = r;
- }
- Circle.PI = 3.14159;
- Circle.prototype.area = function() {
-
return Circle.PI * this.r * this
- }
- var c = new Circle(1.0);
- alert(c.area());
Java程式碼
- //第2種寫法
- var Circle = function() {
- var obj = new Object();
- obj.PI = 3.14159;
- obj.area = function( r ) {
- return this.PI * r * r;
- }
- return obj;
- }
- var c = new Circle();
-
alert( c.area( 1.0 ) );
Java程式碼
- //第3種寫法
- var Circle = new Object();
- Circle.PI = 3.14159;
- Circle.Area = function( r ) {
- return this.PI * r * r;
- }
- alert( Circle.Area( 1.0 ) );
Java程式碼
- //第4種寫法
- var Circle={
- "PI":3.14159,
- "area":function(r){
- return this.PI * r * r;
- }
- };
- alert( Circle.area(1.0) );
Java程式碼
- //第5種寫法
- var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");
- alert( (new Circle()).area(1.0) );
(需要注意的是:第五種方法new的是Function 而不是function; 在JavaScript 方法、變數是區分大小寫的)
大家來討論一下這五種寫法,它們的優缺點,哪個比較規範,特別是最後兩種,經常見到。
有興趣的朋友可以看看這個帖子,通過大家討論,比較認同的是第一種寫法和第四種寫法,所以以後學習就按照這兩種寫法就好,其它的瞭解就好,能看懂別人寫的程式碼就可以。