JavaScript 進階篇之閉包、類比類,繼承(五)

來源:互聯網
上載者:User

一、javascript中的閉包
1、我們一起先來理解什麼是函數的範圍。

2、調用的對象

結合例子:複製代碼 代碼如下:function display(something)
{
function executeDisplay1()
{
document.write("我在幫老闆列印:"+something+"<br />");//引用外部函數的something參數
}
executeDisplay1();//函數display引用了內建函式
}
display("sorry");//執行完畢後被垃圾收集器回收

3、閉包的形成

例一、複製代碼 代碼如下:var obj = {};//全域的對象
function buyHouse(price,area)
{
return function(){return "你要付的房款:"+price*area;}; //把內建函式作為傳回值
}
obj.people = buyHouse(12000,80); //把內建函式的引用儲存到obj對象的people屬性中。
//這樣就形成了閉包,簡單的表達:把嵌套函數的引用儲存到全域範圍中,不管是使用它返回的值,還是把它存在對象的屬性中都可以。
document.write(obj.people()+"<br />");

例二、 複製代碼 代碼如下:function add()
{
var number = 0;
return function(){return ++number;};//
}
var num = add();//現在是不是有4引用了吧,第一個全域建立:訪問函數,第二個有外部函數(這裡指的是Add()引用了匿名函數)
//第三個是匿名函數(就是return function.....引用了Add的局部變數),第四個就全域對象(var num)了。
//全域對象的每次調用的對象依然儲存在函數體中,所以局部變數的值都會被維持。
document.write(num());

//等效的方法
num2 = (function(){var number = 0;return function(){return ++number;}})();//匿名函數,直接賦給了全域對象
document.write(num2());

例三、實現私人屬性 複製代碼 代碼如下://使用閉包實現私人屬性
function createProperty(o,propertyname,check)
{
var value;
o["get"+propertyname] = function(){return value;};//將一個匿名的函數體返回給對象的屬性
o["set"+propertyname] = function(v){if(check && !check)//檢查參數的合法性throw("參數不對!");
else value = v; };//將一個匿名的函數體返回給對象的屬性
}
var o = {};
createProperty(o,"Age",function(x){return typeof x == "number";});//後面跟了一個匿名的函數,執行驗證的工作,如果不是數字就返回false
o.setAge(22);//使用對象的屬性
document.write(o.getAge());

//其實上面還是將函數儲存到了全域對象的屬性中。

二、javascript中的類
同樣也從一些基本的術語開始吧!
1、原型(prototype)

其實一個對象的原型就是建構函式的prototype的值,所有的函數都一個prototype屬性,當函數被建立是就被自動建立和初始化,初始化它的值是一個對象,這個對象內建一個屬性就是constructor,它指回到和原型相關聯的那個建構函式。 複製代碼 代碼如下:function PeopleHope(money,house)
{
this.money = money;
this.house = house;
}
PeopleHope.prototype.hope = function(){document.write("我想擁有鈔票,房子");};//這就是原型,都會被建構函式初始化成對象的屬性。
for(var p in PeopleHope.prototype)
{
document.write("原型出來了吧! \t " + p + "<br />");//輸出:原型出來了吧! hope
}

2、類比類

其實Javascript中的“類”就是函數而已。直接上代碼吧! 複製代碼 代碼如下:function PeopleHope(money,house)
{
this.money = money;
this.house = house;
PeopleHope.VERSION = 0.1//類的屬性
PeopleHope.createLive = function(){document.write("在黨的領導下,我們的生活很好!");}//類方法 必須是類直接引用
}

3、類的繼承 複製代碼 代碼如下:function CreateClass(name,version)
{
this.name = name; //初始化對象屬性
this.version= version;
CreateClass.AUTHOR = "Frank";//類屬性
CreateClass.SellHouse = function(){document.write("我們是房地產龍頭企業萬科");};//類的方法
CreateClass.prototype.Company = "vanke";
CreateClass.prototype.HousePrice = function(){document.write("大梅沙山頂豪宅賣5千萬一套,暢銷價!");};
//原型,其實到這裡大家可能就會問了,這個原型和類方法等有什麼區別呢?
//其實就是:比如 var o = new CreateClass("中糧地產","一期");CreateClass函數裡面的this就是o了,連起來就是
//o.name = "中糧地產";o.version = “一期”;吧!
//至於原型其實在乾的事你可以把它理解成一個”叛徒“在你建立o這個對象的時候,由 原型告訴建構函式一起帶走初始化
//成了對象o的屬性。
}
function House(name,version,city)
{
CreateClass.apply(this,[name,version]);//繼承建構函式
this.city = city;
House.prototype.housename = "半島花園";
}
House.prototype = new CreateClass("中糧地產","二期");//通過new擷取CeateClass屬性,包括原型對象
//列印函數的prototype屬性
function displayPrototype(c)
{
for(var x in c.prototype)
{
document.write(x+"<br />");
}
}
displayPrototype(House);//輸出:HousePrice Company name version
//刪除不是原型的對象
delete House.prototype.name;//刪除
delete House.prototype.version;//刪除
displayPrototype(House);//輸出:HousePrice Company
var customers = new House("半島花園","三期","西拔牙");
for(var t in customers)
{
if(typeof customers[t] == "function")//判斷是不是函數
{
customers[t]();//執行
continue;//返回本次,進行下一次迴圈
}
document.write(t +":\t" + customers[t]+ "<br />");
// 輸出housename: 半島花園 Company: vanke 大梅沙山頂豪宅賣5千萬一套,暢銷價!name: 半島花園version: 三期 city: 西拔牙
//繼承就實現了。通過原型。

小結:本篇就和大家分享到這裡吧,本來還有命名空間要分享,由於學習時間安排的關係,Javascript文法就給大家分享到這裡吧!

下次我將分享我對javascript客服端的編程及Jquery等進階應用程式。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.