JavaScript高級程式設計（第三版）學習筆記6、7章

来源:http://www.cnblogs.com/TwinklingZ/archive/2016/03/10/5263608.html
-Advertisement-
Play Games

第6章，面向對象的程式設計 對象： 1、數據屬性 configurable，表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或能否把屬性修改為訪問器屬性，預設為true ‚enumerbale，表示能否通過for-in訪問屬性，預設true ƒwritable，表示能否修改屬


第6章，面向對象的程式設計

對象：

1、數據屬性

configurable，表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或能否把屬性修改為訪問器屬性，預設為true

‚enumerbale，表示能否通過for-in訪問屬性，預設true

ƒwritable，表示能否修改屬性值，預設true

„value，數據存儲位置，預設undefined

修改預設屬性特性：Object.defineProperty()，接收三個參數：屬性所在對象，屬性名，描述符對象，描述符對象屬性必須是：configurable、enumerable、writable、value

例：

var obj = {};
Object.defineProperty(obj,”name”,{
    writable:true,
    value:”nihao”
    });

2、訪問器屬性

configurable，表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或能否把屬性修改為訪問器屬性，預設為true

‚ enumerbale，表示能否通過for-in訪問屬性，預設true

ƒget，讀取屬性時調用，預設undefined

„set，寫入屬性時調用，預設undefined

修改必須通過Object.defineProperty()

例：

var obj = {
    _year:2004,
    edition:1
}
Object.defineProperty(book,”year”,{
    get:function(){
        return this._year;
    },
    set:function(newValue){
        if(newValue > 2004){
            this._year = newValue;
            this.edition += newValue – 2004;
        }
    }
});
book.year = 2005;
alert(book.edition);    //2

定義多個屬性：Object.defineProperties()，接收兩個對象，一是要修改和添加屬性的兌現，第二個對象屬性與第一個對象要修改或添加的屬性一一對應，支持的瀏覽器：IE9+，FireFox4+，Safari5+，Opera12+，chrome

讀取屬性：Object.getOwnPropertyDescriptor()，接收兩個參數，屬性所在對象，要讀取描述符的屬性名稱，支持的瀏覽器：IE9+，FireFox4+，Safari5+，Opera12+，chrome

創建對象：

工廠模式：

function createPerson(name,age){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function(){
        alert(this.name);
    };
    return o;
}
var person1 = createPerson(“g”,29);

構造函數模式：

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName() = function(){
        alert(this.name);
    };
}
var person = new Person(“g”,28);

兩種模式區別：

構造函數模式中不需要顯示創建對象，對this直接賦值，沒有返回語句

構造函數名首字母必須大寫，必須使用new操作符創建新實例

原型模式

創建的每個函數都有一個prototype（原型）屬性，這個屬性是一個指針，指向一個對象，這個對象的用途是包含可以由特定類型的所有實例共用的屬性和方法，換句話就是，prototype就是通過函數創建的對象的原型對象，好處在於可以是所有實例共用相同的屬性和方法。

isPrototypeOf()，個人理解就是可以用以判斷某個實例的原型是否與當前原型相同

例：

Person.prototype.isPrototypeOf(person1);        //true

 

Object.getPrototypeOf()，可以返回某個實例的原型，支持的瀏覽器IE9+，Firefox3.5+，Safari5+，Opera12+，chrome

註：訪問對象屬性名時會進行一次搜索，先在實例對象搜索，不存在則到當前對象的原型對象去搜索。

註：實例中的屬性若與原型對象中的屬性一樣，則會屏蔽原型對象的屬性，與上一條剛好可以對的上

hasOwnProperty()方法可以確定某個屬性是否來自實例，不是來自實例，則返回false，否則返回true

在實例上調用delete時，只會刪除實例上的屬性名，並不會刪除原型的屬性

例：

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.sayName = function(){
    alert(this.name);
}
var per1 = new Person();
var per2 = new Person();
per1.name = "Greg";
alert(per1.name);   //"Greg" 來自實例
alert(per2.name);   //"Nicholas"
delete per1.name;
alert(per1.name);   //"Nicholas" 來自原型
delete per1.name;
alert(per1.name);   //"Nicholas"

註：Object.getOwnPropertyDescriptor()方法只能用於實例屬性，要取得原型屬性描述符，必須直接在原型對象上調用本方法

in操作符：只有當屬性在實例對象中或者在原型對象中時，返回true

例：

alert(“name” in Person);            //true
alert(“name” in per1);            //true

同時使用in和hasOwnProperty可以確定該屬性是存在原型中，還是實例中

Object.keys()方法：接收一個對象作為參數，返回所有可枚舉的屬性組成的字元串數組

Object.getOwnPropertyNames()方法：接收一個對象，返回所有屬性組成的字元串數組，無論是否可枚舉

更簡單的原型語法：

使用上述方法實在太麻煩了，更經常使用的是以下方法：使用對象字面量

Person.prototype = {
    name : “Nicholas”,
    age : 29
    sayName = function(){
        alert(this.name);
    }
}

不過，此方法，相當於重寫了整個prototype對象，將導致constructor屬性不再指向Person而是指向Object，雖然instanceof還是會返回正確的結果，但通過constructor已經不能確定對象類型了。

var per = new Person();
alert(per instanceof Object);    //true
alert(per instanceof Person);    //true
alert(per constructor Object);    //true
alert(per constructor Person);    //false

若constructor真的很重要，可以如下設置

Person.prototype = {
    constructor:Person,
    name : “Nicholas”,
    age : 29
    sayName = function(){
        alert(this.name);
    }
}

以上寫法會使constructor的enumerable特性被設置為true，預設情況下原生的是false的，在相容ECMAScript5的瀏覽器可以使用Object.defineProperty()進行設置

Object.defineProperty(Person.prototype,”constructor”,{
    enumerable:false,
    value:Person
    });

註：重寫原型對象，將會切斷現有原型與任何之前已經存在的對象實例之間的聯繫

 

繼承（難度較大，需再仔細研究）

 

使用原型鏈來實現

 

子類型要覆蓋超類的方法，應該將給原型添加方法的代碼放在替換原型之後，

註：通過原型鏈實現繼承時，不能使用對象字面量創建原型方法，否則會重寫原型鏈

 

借用構造函數

 

組合繼承

 

原型式繼承，Object.creat();接收兩個參數：一是用作新對象原型的對象和（可選的）一個為新對象定義額外屬性的對象

 

例：Object.creat(person,{name:{value:”greg”}});

 

寄生式繼承

寄生組合式繼承

第7章，函數表達式

創建方式：

1、函數聲明，可以函數聲明提升，就是可以把使用函數的語句放在函數聲明之前

function funName(arg0,arg1){
    //函數體
}

2、函數表達式，不能進行函數提升，也就是無法在函數創建前使用函數，在這種情況下創建的函數稱為匿名函數，有時也叫拉姆達函數

var funName = function(arg0,arg1){
    //函數體
}

嚴格模式下無法使用arguments.callee來實現遞歸，可以使用如下方式實現遞歸：

var factorial = (function f(num){
    if(num <= 1){
        return 1;
    }else{
        return num * f(num - 1);
    }
});

閉包（難度也不小）

閉包指有權訪問另一個函數作用域中的變數的函數，閉包，也是一個函數

創建閉包的常見方式是在一個函數內部創建另一個函數

閉包只能取得包含函數即外部函數中任何變數的最後一個值。下例可以清晰說明問題

例：

function createFuncrions(){
    var result = new Array();
    for(var i = 0;i < 10;i++){
        result[i] = function(){
            return i;
        }
    }
    return result;
}
var re = createFuncrions();
alert(re[1](2));

每個函數返回的都將是10，而不是如預期般返回對應的索引值，因為createFuncrions函數最後返回時I = 10，此時每個函數都引用保存著變數i的同一個對象，所以在每個函數內部i都是10，可以使用如下方法強制閉包返回預期效果：

function createFuncrions(){
    var result = new Array();
    for(var i = 0;i < 10;i++){
        result[i] = function(num){
            return function(){
                return num;
            };
        }(i);
    }
    return result;
}
var re = createFuncrions();
alert(re[2]());

每一個都會返回各自的索引值

模仿塊級作用域

使用匿名函數可以模仿塊級作用域：

(function(){
    alert("test");    //塊級作用域，沒有使用圓括弧將function包起來將會出錯
})();

使用閉包和私有變數的明顯不足之處在於，會在作用域鏈中多查找一個層次，在一定程度上影響查找速度

函數中定義的變數可以在一定程度上稱為私有變數，通過函數可以模擬出私有變數，靜態私有變數

增強模塊模式：

var singleton = function(){
    //private arg and private method
    var privateVariable = 10;
    function privateFunction(){
        return false;
    }

    //create obj
    var obj = new Object();
    obj.publicProperty = true;
    obj.publicFunction = function(){
        privateVariable ++;
        return privateFunction();
    };
    return obj;
}();
alert(typeof singleton);
alert(singleton.publicProperty);
alert(singleton.publicFunction());

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 利用簡潔的圖片預載入組件提升h5移動頁面的用戶體驗
    在做h5移動頁面，相信大家一定碰到過頁面已經打開，但是裡面的圖片還未載入出來的情況，這種問題雖然不影響頁面的功能，但是對於不利於用戶體驗。拋開網速的原因，解決這個問題有多方面的思路：最基本的，要從http請求合併，緩存管理，圖片壓縮等方面做性能優化；另外就是可以對頁面里用到的所有圖片做預載入的處理。
  • javascript 數組迭代與歸併
    數組的5個迭代方法： every(); //對數組中的每一項運行給定函數，如果該函數對每一項都返回true，則返回true； filter(); //對數組中的每一項運行給定函數，返回該函數會返回true的項組成的數組； forEach(); //對數組中的每一項運行給定函數，這個方法沒有返回值；
  • jQuery之基本Html控制項操作
    閑來無聊，收集總結一下jQuery常用操作，希望對新手有用。 基於jquery 1.3.2 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--><!--<script src="https://aja
  • 淺談web語義化
    web語義化是什麼 HTML5標準出來的時候，我曾經詫異為什麼要定義這麼多header footer nav article標準，DIV不挻好的嘛，方便開發人員記憶啊。但當頁面開發完，面對所有都是DIV標簽的網頁，就會混亂了，到底哪裡是頁頭，哪裡是正文。當然我們可以用瀏覽器打開，F12一下，就一目了
  • 11個讓你代碼整潔的原則
    寫Web頁面就像我們建設房子一樣，地基牢固，房子才不會倒。同樣的，我們製作Web頁面也一樣，一個良好的HTML結構是製作一個美麗的網站的開始，同樣的，良好的CSS只存在同樣良好的HTML中，所以一個乾凈的，語義的HTML的優點很多，那麼平時製作中，我們做到了這一點嗎？我們一起來看一張圖片： 上圖展示
  • 使用nodejs爬取拉勾蘇州和上海的.NET職位信息
    最近開始找工作，本人蘇州，面了幾家都沒有結果很是傷心。在拉勾上按照城市蘇州關鍵字.NET來搜索一共才80來個職位，再用薪水一過濾，基本上沒幾個能投了。再加上最近蘇州的房價蹭蹭的長，房貸壓力也是非常大，所以有點想往上海去發展。閑來無聊寫了個小爬蟲，爬了下蘇州跟上海的.NET職位的信息，然後簡單對比了一
  • meta總結
    做項目的時候發現正常的代碼在360瀏覽器上樣式都是亂的，翻閱資料才發現360是雙核，分為極速模式和相容模式，極速模式是用webkit內核，相容模式是用trident內核（也就是IE內核）,最後加了一行代碼就完美解決了 <meta name="renderer" content = "webkit"/
  • 無刷新分頁技術，Ajax+smarty
    這裡運用Smarty模板，更簡單 本文主要的技術：AJAX，PHP，Smarty,另外自己封裝了一個很簡單的類 類： (function(){ function $(id) { return document.getElementById(id); } $.init=function() { try
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類