JavaScript中的面向對象個人分享

DirtyMind 發布于2019-08-26 12:11 / 2576人閱讀

摘要：面向對象面向對象的概念所謂面向對象就用抽象方式創建基于顯示世界模型的一種變成模式面向對象編程可以看做是使用一系列對象互相協作的軟件設計備注面向對象全稱簡稱面向對象編程的主要三個特征是封裝所謂封裝就是按要求使用得到對象的結果相關數據用于存儲

面向對象 面向對象的概念

所謂面向對象就用抽象方式創建基于顯示世界模型的一種變成模式,面向對象編程可以看做是使用一系列對象互相協作的軟件設計

備注: 面向對象全稱"Object Oriented Programming"簡稱"OOP"

面向對象編程的主要三個特征是:

封裝 - 所謂封裝就是按要求使用得到對象的結果.

相關數據(用于存儲屬性)

基于這些數據所能做的事情

繼承 - 繼承通常是指類與類之間的關系,如果兩個類都有相同的屬性或方法,那么可以讓一個類繼承另一個類這樣就不需要在前者再次定義同樣的屬性或方法

多態 - 不同的對象可以定義具有相同名稱的方法,方法是作用于所在的對象中.這種不同對象通過相同方法的調用實現各自行為的能力,被稱為多態

構造函數

構造函數又稱為構造器,是對象中的一個方法,在實例化時構造器被調用.在JavaScript中函數就可以作為構造器使用,所以就不用特意定義一個構造器方法

語法:
創建構造函數(類的概念) - 用于創建對象(屬性和方法)
function 構造函數名稱(){
this.屬性名 = 屬性值;
this.方法名 = function(){
方法體
}
}

注意: this關鍵字 -> 指代利用當前構造函數創建的對象

示例代碼:

function Hero(name){
    this.name = name;
    this.sayMe = function(){
        console.log("我是" + name);
    }
}
// 利用構造函數創建對象
var hero = new Hero("張無忌");
console.log(hero);// 調用結果為 Hero { name: "張無忌", sayMe: [Function] }

var obj = {
    name : "張無忌",
    sayMe : function(){
        console.log("我是張無忌");
    }
};
console.log(obj);// 調用結果為 { name: "張無忌", sayMe: [Function: sayMe] }

控制臺調用結果對比圖:

函數與構造函數

示例代碼:

// 1.函數；2.構造函數
function Hero(name){
    var v = 100;// 局部變量
    function n(){}// 內部函數
    this.name = name;// 屬性
    this.sayMe = function(){// 屬性
        console.log("我是"+name);
    }
}
// 1.函數調用
Hero();
// 2.構造函數使用
var hero = new Hero();

function fun(){
    var v = 100;// 局部變量
    // 方法
    this.get = function(){
        return v;
    }
    this.set = function(value){
        v = value;
    }
}
// 構造函數
var f = new fun();
console.log(f);// 調用結果為 fun { get: [Function], set: [Function] }

console.log(f.get());// 調用結果為 100
f.set(200);
console.log(f.get());// 調用結果為 200

獲取屬性描述符

通過定義對象(屬性或方法)這種方式

屬性默認都是數據描述符

語法:
使用Object.getOwnPropertyDescriptor()方法獲取指定屬性的描述符
Object.getOwnPropertyDescriptor(obj,prop)
obj - 表示指定屬性對應的目標對象
prop - 表示獲取描述符的目標屬性名稱
返回值 - 其屬性描述符對象

示例代碼:

var obj = {
    name : "張無忌"
}

var result = Object.getOwnPropertyDescriptor(obj,"name");
console.log(result);

控制臺效果圖:

設置屬性描述符

Object.defineProperty()方法為對象定義新屬性或修改現有屬性,并返回該對象

Object.defineProperty(obj,prop,descriptor)

obj - 要在其上定義屬性的對象

prop - 要定義或修改的屬性的名稱

descriptor - 將被定義或修改的屬性描述符

返回值 - 被傳遞給函數的對象

Object.defineProperties()方法為對象定義一個或多個新屬性或修改現有屬性,并返回該對象

Object.defineProperties(obj,props)

obj - 要在其上定義屬性的對象

props - 要定義其可枚舉屬性或修改的屬性描述符的對象

返回值 - 被傳遞給函數的對象

示例代碼:

var obj = {
    // 定義對象的同時定義了該屬性以及值(可修改、可刪除以及可枚舉的)
    name : "張無忌"
}
/*
    Object.defineProperty(obj, prop, desc)方法
    * 作用
      * 用于定義目標對象的新屬性
      * 用于修改目標對象的已存在屬性
    * 參數
      * obj - 表示目標對象
      * prop - 表示目標對象的目標屬性名稱
      * desc - 表示屬性描述符，必須是對象格式
        {
            value : 值
        }
    * 返回值 - 返回傳遞的對象
 */
Object.defineProperty(obj, "name", {
    value : "周芷若"
});
console.log(obj.name);// 周芷若
/*
    同樣都是為對象新增屬性
    1.如果直接使用 "對象名.屬性名 = 值" -> 可修改、可刪除以及可枚舉的
    2.如果使用Object.defineProperty()方法新增屬性
      * 該新屬性是不可修改、不可刪除以及不可枚舉的
 */
Object.defineProperty(obj, "age", {
    value : 18
});
console.log(obj.age);// 18

var result1 = Object.getOwnPropertyDescriptor(obj, "age");
console.log(result1);
// 一旦屬性的值是不可修改的 - 如果執行修改操作時 -> 沒有語法報錯，但是無效
obj.age = 80;
console.log(obj.age);// 18

obj.job = "教主";
var result2 = Object.getOwnPropertyDescriptor(obj, "job");
console.log(result2);

屬性描述符的可選鍵值 - 設置屬性描述符writable

writable - Boolean值,表示目標屬性的值是否可以被修改

當且僅當該屬性的writable為true時,value才能被賦值運算符改變

備注: 默認為false

示例代碼:

var obj = {
    // 定義對象的同時定義了該屬性以及值(可修改、可刪除以及可枚舉的)
    name : "張無忌"
}
// 修改現有屬性
Object.defineProperty(obj, "name", {
    value : "周芷若",
    writable : false // 不可修改
});
console.log(obj.name);// 周芷若
// 修改name屬性值
obj.name = "趙敏";
console.log(obj.name);// 周芷若

Object.defineProperty(obj, "age", {
   value : 18,
   writable : true
});
console.log(obj.age);// 18
// 修改age屬性值
obj.age = 80;
console.log(obj.age);// 80
// 刪除age屬性值
delete obj.age;
console.log(obj.age);// undefined

屬性描述符的可選鍵值 - 設置屬性描述符configurable

configurable - Boolean值,表示目標屬性的描述符是否可以被修改

當且僅當該屬性的configurable為true時, 該屬性描述符才能夠被改變同時該屬性也能從對應的對象上被刪除

備注: 默認為false

示例代碼:

var obj = {
    // 定義對象的同時定義了該屬性以及值(可修改、可刪除以及可枚舉的)
    name : "張無忌"
}
// 修改現有屬性
Object.defineProperty(obj, "name", {
    value : "周芷若",
    writable : true, // 控制當前屬性是否可被修改
    configurable : true // 控制當前屬性是否可被刪除
});
console.log(obj.name);// 周芷若
// 修改name屬性值
obj.name = "趙敏";
console.log(obj.name);// 周芷若
// 刪除name屬性值
delete obj.name;
console.log(obj.name);// 周芷若

屬性描述符的可選鍵值 - 設置屬性描述符enumerable

enumerable - Boolean值,表示目標屬性是否可遍歷.

當且僅當該屬性的enumerable為true時,該屬性才能夠出現在對象的枚舉屬性中

備注: 默認為false

示例代碼:

var obj = {
    // 定義對象的同時定義了該屬性以及值(可修改、可刪除以及可枚舉的)
    name : "張無忌"
}
Object.defineProperty(obj, "name", {
    value : "周芷若",
    enumerable : false
});
console.log(obj.name);// 周芷若
/*
    屬性描述符enumerable - 控制當前屬性是否可被枚舉(遍歷)
    * 僅能循環遍歷對象中可被枚舉的屬性
      * for...in語句
      * keys()方法
    * 可以循環遍歷對象中可被枚舉和不可被枚舉的屬性
      * getOwnPropertyNames()方法
 */
for (var i in obj) {
    console.log(i);
}
var result1 = Object.keys(obj);
console.log(result1);
var result2 = Object.getOwnPropertyNames(obj);
console.log(result2);

屬性描述符存取器

對象的屬性除了可以直接定義以外,還可以使用存取器進行定義.

其中setter為存值函數 - 使用屬性面舒服中的set;

getter為取值函數 - 使用屬性描述符中的get

示例代碼:

var obj = {
    name : "張無忌"
}
var value;// 全局變量
Object.defineProperty(obj, "name", {
    // 獲取指定的屬性值
    get : function(){// 當獲取或訪問當前屬性時，會調用get方法
        console.log("this is get function");
        /*
            類似于數據描述符中的value
            * get方法在被調用時，不能傳遞任何參數
            * get方法在被調用時，允許傳遞this關鍵字
              * this - 表示當前的目標對象(不能調用對象的當前目標屬性)
          */
        return value;// 由于變量為初始化，調用時可能結果為 undefined
    },
    /*
        set方法用于定義當前目標屬性的修改作用
        * 該方法接收唯一的一個參數 -> 作為當前目標屬性的新的值
        * 通過屬性修改操作指定的新的值 -> 作為形參對應的實參
     */
    set : function(newValue){
        console.log("this is set function: " + value);
        /*
            set方法在被調用時，允許傳遞this關鍵字
              * this - 表示當前的目標對象(不能調用對象的當前目標屬性)
         */
        value = newValue;
    }
});
console.log(obj.name);// undefined

obj.name = "趙敏";
console.log(obj.name);// 趙敏

控制臺調用圖效果:

注意: 如果方法被調用時用this關鍵字時要加一個全局變量配合否則控制臺會報錯

控制臺調用圖效果:

屬性描述符存取器的另一種方法

示例代碼:

var value;
var obj = {
    // 存取描述符中的get
    get attr() {// 表示當前目標屬性名稱
        return value;
    },
    // 存取描述符中的set
    set attr(newValue) {// 表示當前目標屬性名稱
        console.log("setter: " + newValue);
        value = newValue;
    }
}
console.log(obj.attr);//調用結果為 "undefined"
obj.attr = 100;//調用結果為 "setter: 100"

控制臺調用圖效果:

防篡改對象

所謂防篡改對象就是不讓篡改對象的屬性或方法

防篡改對象的屬性或方法提供了三種保護方式:

禁止擴展 - 就是禁止為對象擴展的屬性或方法

密封對象 - 就是禁止擴展新的屬性或方法,禁止配置現有的屬性或方法的描述符,僅允許讀寫的屬性值(就是只能有不能改)

凍結對象 - 就是禁止對象執行執行任何修改操作

禁止擴展

如果禁止為對象擴展新的屬性或方法,需要修改對象屬性的extensible為false

Object.preventExtensions()方法用于設置指定對象不可擴展,即不能新增屬性或方法

Object.isExtensible()方法判斷一個對象是否可擴展的(就是是否可以在它上面添加新的屬性)

示例代碼:

var obj = {};
// 將對象設置禁止擴展
Object.preventExtensions(obj);
// 新增屬性或方法無效 -> 語法沒有報錯
obj.name = "張無忌";
console.log(obj);
/*
    Object.defineProperty()方法新增屬性
    * 結果 - 報錯
    * 信息 - TypeError: Cannot define property:name, object is not extensible.
 */
Object.defineProperty(obj, "name", {
    value : "周芷若"
});
console.log(obj);

/*
    Object.isExtensible(obj)方法
    * 作用 - 用于判斷指定目標對象是否可擴展
    * 返回值
      * true - 表示指定目標對象是可擴展的
      * false - 表示指定目標哦對象是不可擴展的
 */
var result = Object.isExtensible(obj);
console.log(result);

密封對象

密封對象,就是指禁止為對象擴展新的屬性或方法,并且禁止修改現有屬性的描述符

Object.seal()方法用于封閉一個對象,阻止添加新屬性并將所有現有屬性標記為不可配置.當前屬性的值只要可寫就可以改變

Object.isSealed()方法判斷一個對象是否被密封

示例代碼:

var obj = {
    name : "張無忌" // 表示可修改
};
console.log(Object.getOwnPropertyDescriptor(obj, "name"));

/*
    將該對象進行密封
    1.不能為該對象新增屬性或方法
    2.不能修改該對象的屬性或方法的描述符
      * configurable
      * enumerable
  */
Object.seal(obj);

console.log(Object.getOwnPropertyDescriptor(obj, "name"));

/* 新增屬性
obj.age = 18;
console.log(obj);
// 修改屬性
obj.name = "周芷若";
console.log(obj);
*/

/*Object.defineProperty(obj, "age", {
    value : 18
});*/
Object.defineProperty(obj, "name", {
    value : "周芷若",
    writable : false, // 表示不可修改
    configurable : true,
    enumerable : false
});

console.log(Object.getOwnPropertyDescriptor(obj, "name"))

console.log(obj);

obj.name = "趙敏";
console.log(obj);

凍結對象

凍結對象,就是指禁止對對象執行任何操作

Object.freeze()方法用于凍結一個對象,凍結指的是不能像這個對象添加新的屬性,不能修改其已有屬性的值,不能刪除已有屬性以及不能修改該對象已有屬性的可枚舉性,可配置性,可寫性.該方法返回被凍結的對象

Object.isFrozen()方法判斷一個對象是否被凍結

示例代碼:

var obj = {
    name : "張無忌"
}
// 凍結對象
Object.freeze(obj);

/*obj.age = 18;
console.log(obj);
obj.name = "周芷若";
console.log(obj);
delete obj.name;
console.log(obj);*/

Object.defineProperty(obj, "age", {
    value : 18
});
console.log(obj);

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108171.html

JavaScript面向對象中的錯誤與異常個人分享

摘要：錯誤與異常錯誤與異常概念所謂錯誤就是錯誤就是程序中不正常的運行狀態在其他編程語言中稱為異常或錯誤解釋器會為每個錯誤情況創建并且拋出一個對象對象包含錯誤的描述信息語句語句作用用于捕獲和處理代碼中的錯誤語句作用用于處理語句中出現的錯誤語句錯誤與異常錯誤與異常概念所謂錯誤就是錯誤就是程序中不正常的運行狀態在其他編程語言中稱為異常或錯誤解釋器會為每個錯誤情況創建并且拋出一個Erro...

王陸寬 2019-08-23 11:25 評論0 收藏0
JavaScript面向對象中的this關鍵字個人分享

摘要：關鍵字關鍵字描述本身沒有任何含義但它也可以代表任何含義被自動定義在所有的函數作用域中都有一個共同點它總是要返回一個對象指向哪個對象不取決于定義在哪它取決于調用位置注意建議搞不明白時盡量不要使用否則會很混亂一定要理解之后使用的基本用法表示在函 this關鍵字 this關鍵字描述 this本身沒有任何含義,但它也可以代表任何含義 this被自動定義在所有的函數作用域中 this都有一個共...

nevermind 2019-08-23 11:25 評論0 收藏0
JavaScript面向對象中的繼承個人分享

摘要：繼承原型鏈所謂言行鏈就是如果構造函數或對象的原型指向構造函數或對象的原型再指向構造函數或對象以此類推最終的構造函數或對象的原鄉指向的原型由此形成一條鏈狀結構被稱之為原型鏈示例代碼原型鏈通過構造函數創建對象將的原型指向對象通過構造函數創建對象繼承原型鏈所謂言行鏈就是如果構造函數或對象A,A的原型指向構造函數或對象B,B的原型再指向構造函數或對象C,以此類推,最終的構造函數或對象的原...

Coly 2019-08-26 12:14 評論0 收藏0
JavaScript面向對象中的String類型個人分享

摘要：類型大小寫轉換表示將小寫內容轉換為大寫內容表示將大小內容轉換為小寫內容示例代碼構造函數方式表示將小寫內容轉換為大寫內容表示將大小內容轉換為小寫內容調用結果為調用結果為控制臺調用效果圖根據指定位置獲取字符串表示通過指定字符串中指定字符 String類型大小寫轉換 toUpperCase() - 表示將小寫內容轉換為大寫內容 toLowerCase() - 表示將大小內容轉換為小寫內容...

Fundebug 2019-08-26 12:18 評論0 收藏0
JavaScript面向對象中的嚴格模式個人分享

摘要：嚴格模式嚴格模式的概念所謂嚴格模式就是對中的一種限制性更強的方式屬于代碼的一種強制規則來規范代碼的格式簡單的說就是必須按照嚴格模式的規則書寫代碼否則就會報錯嚴格模式修正了一些引擎難以優化的錯誤同樣的代碼有些時候嚴格模式會比非嚴格模式下更加快嚴格模式嚴格模式的概念所謂嚴格模式就是對JavaScript中的一種限制性更強的方式. 屬于代碼的一種強制規則,來規范代碼的格式簡單的說就是...

lordharrd 2019-08-23 11:27 評論0 收藏0
JavaScript面向對象中的Array類型個人分享

摘要：類型檢測數組示例代碼調用結果為方法作用用于判斷當前對象的數據類型結果特點可以準確判斷出當前變量的類型調用結果為調用結果為報錯調用結果為調用結果為方法判斷指定類型是否出現在當前對象的原型鏈中調用結果為轉換數組提供了兩種方法用于數組的轉 Array類型檢測數組示例代碼: var arr = [1,2,3,4,5]; console.log(arr instanceof Array);/...

KnewOne 2019-08-26 12:17 評論0 收藏0