首頁 > web前端 > js教程 > 主體

javascript建立物件、函數封裝、屬性程式碼實例詳解

伊谢尔伦
發布: 2017-07-24 14:57:32
原創
1948 人瀏覽過

建立物件 

首先我們先理解物件導向程式設計(Object-Oriented Programming,OOP),使用OOP技術,常常要使用許多程式碼模組,每個模組都提供特定的功能,每個模組都是孤立的,甚至與其它模組完全獨立。這種模組化程式設計方法提供了非常大的多樣性,大大增加了程式碼的重複使用機會。可以舉例進一步說明這個問 題,假定電腦上的一個高效能應用程式是一輛一流賽車。如果使用傳統的程式設計技巧,這輛賽車就是 一個單元。如果要改進該車,就必須替換整個單元,把它送回廠商,讓汽車專家升級它,或購買一個新 車。如果使用OOP技術,就只需從廠商處購買新的引擎,自己按照說明替換它,而不必用鋼鋸切割車體。 不過大部分的論點是,javascript並不是直接的物件導向的語言,但是透過模擬可以做到很多物件導向語言才能做到的事,如繼承,多型,封裝,javascript都能幹(沒有做不到,只是想不到) 

//以下三种构造对象的方法 
//new Object,实例化一个Object 
var a=new Object(); 
a.x=1,a.y=2; 
//对象直接量 
var b={x:1,y:2}; 
//定义类型 
function Point(x,y){ //类似于C#中的类 
this.x=x; 
this.y=y; 
} 
var p=new Point(1,2); //实例化类
登入後複製

第一種方法是透過建構基本物件直接加入屬性的方法來實現,第二種和第一種差不多,可以看成是第一種方法的快速表示法第三種方法中,可以以」類別「為基礎,創造多個類型相同的物件

物件屬性的封裝(公有和私有)
以範例來說明
function List(){
var m_elements=[]; //私有成員,在物件外無法訪問,如果此處無var聲明,則m_elements將變成全域變量,這樣外部是可以直接存取到的,如alert (m_elements[0]) 

m_elements=Array.apply(m_elements,arguments); 
//此处模拟getter,使用时alist.length; 
//等价于getName()方式:this.length=function(){return m_elements.length;},使用时 
alist.length(); 
//公有属性,可以通过"."运算符或下标来访问 
this.length={ 
valueOf:function(){ 
return m_elements.length; 
}, 
toString:function(){ 
return m_elements.length; 
} 
} 
//公有方法,此方法使用得alert(alist)相当于alert(alist.toString()) 
this.toString=function(){ 
return m_elements.toString(); 
} 
//公有方法 
this.add=function(){ 
m_elements.push.apply(m_elements,arguments); 
} 
//私有方法如下形式,这里涉及到了闭包的概念,接下来继续说明 
//var add=function()或function add() 
//{ 
//m_elements.push.apply(m_elements,arguments); 
//} 
} 
var alist=new List(1,2,3); 
dwn(alist); //=alert(alist.toString()),输出1,2,3 
dwn(alist.length); //输出3 
alist.add(4,5,6); 
dwn(alist); //输出1,2,3,4,5,6 
dwn(alist.length); //输出6
登入後複製

屬性與方法的型別
javascript裡,物件的屬性與方法支援4種不同的型別:private property(私有屬性),dynamic publicproperty(動態公有屬性),static public property/prototype property(靜態公有屬性或原型屬性),static property(靜態屬性或類別屬性)。私有屬性對外界完全不具備訪問性,可以透過內部的getter和setter(都是模擬);動態公有屬性外界可以訪問,每個物件實例持有一個副本,不會互相影響;原型屬性每個物件實例共享唯一副本;類別屬性不作為實例的屬性,只作為類別的屬性。
以下是範例: 

//动态公有类型,静态公有类型(原型属性) 
function myClass(){ 
var p=100; //private property 
this.x=10; //dynamic public property 
} 
myClass.prototype.y=20; //static public property or prototype property,动态为myClass的原型添 
加了属性,将作用于所有实例化了的对象,注意这里用到了prototype,这是一个非常有用的东东 
//要想成为高级javascript阶段,prototype和闭包必须得理解和适当应用 
myClass.z=30; //static property 
var a=new myClass(); 
dwn(a.p) //undefined 
dwn(a.x) //10 
dwn(a.y) //20 
a.x=20; 
a.y=40; 
dwn(a.x); //20 
dwn(a.y); //40 
delete(a.x); //删除对象a的属性x 
delete(a.y); //删除对象a的属性y 
dwn(a.x); //undefined 
dwn(a.y); //20 静态公有属性y被删除后还原为原型属性y 
dwn(a.z); //undefined 类属性无法通过对象访问 
dwn(myClass.z);
登入後複製

以上是javascript建立物件、函數封裝、屬性程式碼實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板