js 建立方法

來源:互聯網
上載者:User

標籤:style   使用   io   ar   div   cti   代碼   amp   sp   

貼個代碼先: 
function O(user,pwd){ //use constructor 
this.user=user; 
this.pwd=pwd; 
this.get=get; 
return this; 

function O2(user,pwd){ //use factory 
var obj=new Object(); 
obj.user=user; 
obj.pwd=pwd; 
obj.get=get; 
return obj; 

function O3(){ //use prototype 

O3.prototype.user=‘abc‘; 
O3.prototype.pwd=‘dis‘; 
// O3.propotype.get=‘get‘; 
//O3.prototype.get(){ 
//alert(this.pwd); 
//} 
function O4(user,pwd){ 
this.user=user; 
this.pwd=pwd; 
return this; 

O4.prototype.get=function(){alert(‘123‘);} 

//function get(){ 
//alert("This User:"+this.user); 
// } 
function test2(){ 
//var a=new O2(‘Us‘,‘Pw‘); use factory & constructor 
//var a=new O3(); //use prototype 
//a.get(); 
var a=new O4(‘*U4‘,‘P4‘); //混合 
//a.user=‘Not ABC‘; //set new property 
//alert(a.user); 
a.get(); 

常用的MS 就這幾種,可能還有其它的.碰到再說吧.... 
題外話:昨天手欠,試圖用alert(window.appName)到ff之下去查看瀏覽器版本,結果彈出的竟然是Netscape,咋不是 firefox。繼而又跑去chrome下實驗,又一次彈出了Netscape。baidu搜 Netscape 竟然發現js就出自Netscape公司。慚愧啊慚愧!!!研究了這麼久的js都不認識祖師爺。於是又跑去找了找族譜,原來js出自Brendan Eich之手,95年他創造js時候,也不過就31歲。哎呀,真是白活了,如他一般老的我,到現在都學不會js,真是人比人氣死人。。js當初設計的時候,沒有想到自己能從一部打電話用的手機變成集拍照,上網,遊戲,電話於一身的智能機。真是造化弄人!!!也許各中的神奇,連Brendan Eich本人都沒有想到。應該說Brendan Eich創造了js,而一大批的js牛人成就了今天如此複雜的js。 
js不是木有類嗎?沒關係,人家不是設計了原型屬性麼~ 
js不是木有塊級範圍嗎?沒關係,人家不是有範圍鏈麼~ 
js怎樣實現成員變數私人化?哦,用閉包解決吧~ 
哦,這麼多基本概念,徹底的暈掉了,路漫漫其修遠兮。 
言歸正傳,本文討論幾種js建立對象的方法,先從最好理解的原廠模式開始: 

複製代碼代碼如下:
function createPerson(name,age,job){ 
var o = {}; 
o.name = name; 
o.age = age; 
o.job = job; 
o.sayName = function(){ 
alert(this.name); 
}; 
return o; 

var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName(); 


這裡先定義o為一個空的對象,然後為o設定了一堆屬性。其實也可以直接給o屬性的嘛,所以如果這樣寫也是ok的。 

複製代碼代碼如下:
function createPerson(name,age,job){ 
var o = { 
name : name, 
age : age, 
job : job, 
sayName : function(){ 
alert(this.name); 

}; 
return o; 

var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName(); 


還有一種辦法是利用無敵的this,因為this就表示當前運行時的對象,將建構函式this的範圍指向新對象,將當前運行對象的屬性和方法都賦給新對象,這樣對象模式稱為建構函式模式 

複製代碼代碼如下:
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 

var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName(); 


在這個例子中,tanya和ansel都有一個constructor屬性,該屬性指向person。 
考慮一下如下的情況: 

複製代碼代碼如下:
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 

Person("tanya","30","female"); 
Person("ansel","30","male"); 
window.sayName(); 
window.sayName(); 


發現兩次彈出的都是ansel,這是因為不用new的話,就不是一個person的執行個體,而僅僅在執行函數。而在全域範圍調用一個函數時this總是指向Global對象。而Global對象在瀏覽器中就是window對象。 
我們還可以用構造模式在另外一個對象中調用sayName方法,還記得Apply和call麼,來吧再考慮另外一種情況, 

複製代碼代碼如下:
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 

var olivia = {}; 
Person.call(olivia,"tanya","30","female"); 
olivia.sayName(); 
var philip = {} 
Person.apply(philip,["ansel","30","male"]); 
philip.sayName(); 


原型模式就要考慮原型鏈了,分析一下,sayName方法在執行個體中被重複定義了兩次,但其實沒有必要創造兩個一樣的副本。使用原型方法,可以使是tanya和ansel的共用一個sayName方法。 
於是原型模式的寫法如下: 

複製代碼代碼如下:
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 

Person.prototype.sayName= function(){ 
alert(this.name); 
}; 
var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName(); 


實際應用時,不是一成不變的套用某種模式,活學活用。需要共用方法的時候就用原型模式,需要使用副本的時候就用構造模式,還可以結合起來,把所有資訊都封裝在建構函式中,而通過在建構函式中初始化原型,使得對象保持了同時使用建構函式和原型的優點。 

複製代碼代碼如下:
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
if (typeof sayName != "function" ){ 
Person.prototype.sayName= function(){ 
alert(this.name); 
}; 


var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
ansel.sayName = function () { 
alert("Hi ansel, how hansome you are!"); 

tanya.sayName(); 
ansel.sayName(); 

js 建立方法

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.