JavaScript中的對象個人分享

cppprimer 發布于2019-08-26 12:10 / 3282人閱讀

摘要：對象對象的概念所謂對象就是是一個擁有屬性和方法的集合體對象的分類內置對象原生對象引用類型可以稱作為內置對象宿主對象就是寄生在一個東西上的對象比如瀏覽器提供的對象比如自定義對象開發人員創建的對象對象是什么類型是所有類型的父級創建對象對象的初始

對象 對象的概念

所謂對象就是是一個擁有屬性和方法的集合體

對象的分類

內置對象/原生對象:

引用類型可以稱作為內置對象

宿主對象:

就是寄生在一個東西上的對象比如瀏覽器提供的對象

比如：DOM、BOM

自定義對象

開發人員創建的對象

Object對象是什么

object類型是所有JavaScript類型的父級

創建對象 對象的初始化器創建方式

var 對象名 = {
屬性名 : 屬性值,
方法名 : function(){
方法體
}
}

注意: 如果存在多個屬性名的話中間用 " , "隔開

示例代碼:

var obj1 = {
    name : "一花一世界",
    name1 : "一葉一孤城",
    soso : function () {
        console.log("你是哈士奇")
    }
};

對象的構造函數方式

利用所有引用類型常見對應的對象 - 就是具有具體的類型

var num = new Number();// Number類型

var str = new String();// String類型

var boo = new Boolean();// Boolean類型

利用Object作為構造函數創建對象

var 對象名 = new Object();

var 對象名 = Object();

示例代碼:

var num = new Number();// Number類型
var num2 = Number();
var str = new String();// String類型
var boo = new Boolean();// Boolean類型

var obj2 = new Object();
var obj3 = Object();

console.log(obj2);// {}// 調用結果為 { }
console.log(obj3);// {}// 調用結果為 { }

var obj4 = new Object(undefined);
var obj5 = new Object(null);

console.log(obj4);// 調用結果為 { }
console.log(obj5);// 調用結果為 { }

利用Object.create()方法創建對象

var 對象名 = Object.create(null) - 就是創建一個空對象

var 對象名 = Object.create(obj)

obj - 表示另一個對象

特點 - 當前創建的新對象擁有與obj對象相同的屬性和方法

示例代碼:

var obj6 = Object.create(null);
var obj7 = Object.create(obj1);

console.log(obj6);// 調用結果為 { }
console.log(obj7);// 調用結果為 { }

創建空對象

創建空對象的方式目前有以下幾種

var obj1 = {};

var obj2 = new Object();

var obj3 = Object();

var obj4 = new Object(undefined);

var obj5 = new Object(null);

var obj6 = Object(undefined);

var obj7 = Object(null);

var obj8 = Object.create(null);

創建方式的對比

Number,String和Boolean

字面量方式創建的是原始類型,構造函數方式創建是引用類型

Array和Object

無論是字面量方式還是構造函數方式創建的都是引用類型

示例代碼:

// 1. Number類型
var num1 = 100;// 字面量方式
var num2 = new Number();// 構造函數方式

// 2. String類型
var str1 = "一花一世界";// 字面量方式
var str2 = new String();//構造函數方式

// 3.Boolean類型
var boo1 = true;// 字面量方式
var boo2 = new Boolean();// 構造函數方式

// 4.Array類型
var arr1 = [];
var arr2 = new Array();

// 5.Object類型
var obj1 = {};
var obj2 = new Object();

變量與對象

示例代碼:

/* 變量聲明并初始化值 */
var obj = 100;
/* 輸出調用 */
console.log(obj);// 調用結果為 100
/* 變量重新賦值為對象 */
obj = {
    /* 對象的屬性 */
    name : "一花一世界",
    /* 對象的方法 */
    soso : function () {
        /* 方法體 */
        console.log("一葉一孤城");
    }
};
/* 輸出調用 */
console.log(obj);// 調用結果為 { name: "一花一世界", soso: [Function: soso] }

變量,函數與對象

注意: 如果訪問一個對象不存在的屬性時 - 值為 undefined

示例代碼:

var obj = {
    neme : "一花一世界",
    "Type-Content" : "text/HTML",
    sayMe : function () {
        console.log("一葉一孤城");
    }
};

console.log(obj.soso);// 調用結果為 undefined

創建一個對象 - 具有name和age屬性與sayMe()方法

對象的屬性 - 類似于變量

其實定義的變量就是某個對象的屬性,定義的函數就是某個對象的方法

JavaScript找那個具有一個全局對象(Global) - 僅存在與概念

瀏覽器運行環境 - BOM中Window(窗口)對象

Node.js運行環境

示例代碼:

var obj1 = {
    name : "一花一世界",
    age : "有點飄",
    sayMe : function () {
        console.log("一葉一孤城");
    }
};
console.log(Object);// 調用結果為 [Function: Object]
console.log(Global);// 調用結果為報錯 - ReferenceError: Global is not defined

控制臺調用圖:

調用對象的屬性方式 對象名.屬性名 - 名稱簡單的調用方式

注意: 不適合用于復雜命名的屬性名稱

示例代碼:

var obj = {
    neme : "一花一世界",
    "Type-Content" : "text/HTML",
    sayMe : function () {
        console.log("一葉一孤城");
    }
};

console.log(obj.neme);// 調用結果為 一花一世界

控制臺調用圖:

對象名稱[屬性名] - 通用的調用方式

適用于復雜命名的屬性名稱

特點: 該種方式比較通用

示例代碼:

var obj = {
    neme : "一花一世界",
    "Type-Content" : "text/HTML",
    sayMe : function () {
        console.log("一葉一孤城");
    }
};

console.log(obj.neme);// 調用結果為 一花一世界
console.log(obj["Type-Content"]);// 調用結果為 text/HTML

控制臺調用圖:

修改對象的屬性 對象名.已存在的屬性名 = 屬性值

示例代碼:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

obj.name = "一葉一孤城";
console.log(obj);// 調用結果為 { name: "一葉一孤城", sayMe: [Function: sayMe] }

對象名[已存在的屬性名] = 屬性值

示例代碼:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

obj["name"]
console.log(obj);// 調用結果為 { name: "一葉一孤城", sayMe: [Function: sayMe] }

刪除對象的屬性 delete 對象名.屬性名

示例代碼:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

delete obj.name;
console.log(obj.name);//調用結果為 undefined

delete 對象名[屬性名]

示例代碼:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

delete obj["name"];
console.log(obj.name);//調用結果為 undefined

檢測對象的屬性 判斷對象的屬性值是否為 undefined

示例代碼:

var obj = {
    name : "張無忌",
    age : 18
}

if (obj.age !== undefined) {
    console.log("obj對象的age屬性存在...");
} else {
    console.log("請先定義obj對象的age屬性...");
}

判斷對象的屬性值 - 先轉換為Boolean類型

示例代碼:

var obj = {
    name : "張無忌",
    age : 18
}

if (obj.age) {
    console.log("obj對象的age屬性存在...");
}

利用in關鍵字進行判斷

示例代碼:

var obj = {
    name : "張無忌",
    age : 18
}

if ("age" in obj) {
    console.log("obj對象的age屬性存在...");
} else {
    console.log("obj對象的age屬性不存在...")
}

Object類型提供了hasOwnProperty()方法

示例代碼:

var obj = {
    name : "張無忌",
    age : 18
}

if (obj.hasOwnProperty("age")) {
    console.log("obj對象的age屬性存在...");
} else {
    console.log("obj對象的age屬性不存在...")
}

遍歷對象的屬性

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("一花一世界");
    }
}
// 1.for...in語句
for (var objAttr in obj) {
    // 通過對象屬性或方法對應的值的類型進行區別
    if (obj[objAttr] instanceof Function) {
        // 當前是對象的方法
        obj[objAttr]();
    } else {
        // 當前是對象的屬性
        console.log(obj[objAttr]);
    }
}

// 2.Object類型提供了keys()方法 - 只能遍歷可枚舉的屬性
var arr = Object.keys(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通過對象屬性或方法對應的值的類型進行區別
    if (obj[objAttr] instanceof Function) {
        // 當前是對象的方法
        obj[objAttr]();
    } else {
        // 當前是對象的屬性
        console.log(obj[objAttr]);
    }
}

// 3.Object類型提供了getOwnPropertyNames()方法 - 包括不可枚舉的屬性
var arr = Object.getOwnPropertyNames(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通過對象屬性或方法對應的值的類型進行區別
    if (obj[objAttr] instanceof Function) {
        // 當前是對象的方法
        obj[objAttr]();
    } else {
        // 當前是對象的屬性
        console.log(obj[objAttr]);
    }
}

調用對象的方法

對象名.方法名()

對象名[方法名]()

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("一花一世界");
    }
}
// 1.對象名.方法名()
obj.sayMe();
// 2.對象名[方法名]()
obj["sayMe"]();

新增對象的方法

注意: 和新增對象的屬性方法類似

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("我是風兒");
    }
}
// 1.對象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log("你是沙");
}
console.log(obj);
// 2.對象名[新的方法名] = function(){}

修改對象的方法

注意: 和修改對象屬性的方法類似

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("我是風兒");
    }
}
// 1.對象名.方法名 = function(){}
obj.sayMe = function(){
    console.log("你是沙");
}
console.log(obj);
obj.sayMe();
// 2.對象名[方法名] = function(){}

刪除對象的方法

注意: 和刪除對象屬性的方法類似

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("一笑一人生");
    }
}
// 1.delete 對象名.方法名
delete obj.sayMe;
// 訪問對象中不存在的方法 -> 報錯(TypeError: obj.sayMe is not a function)
// obj.sayMe();
console.log(obj.sayMe);// undefined
console.log(obj);

// 以屬性是否存在的方式進行判斷
if ("sayMe" in obj) {
    // 確認目前是一個方法
    if (obj.sayMe instanceof Function) {
        obj.sayMe();// 方法調用
    }
}
// 以上代碼可以優化為以下代碼
if ("sayMe" in obj && obj.sayMe instanceof Function) {
    obj.sayMe();// 方法調用
}

// 2.delete 對象名[方法名]

GPU云服務器云服務器 javascript分享 js中的對象 javascript中的 javaScript中的this

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108138.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面向對象中的嚴格模式個人分享

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

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

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

Fundebug 2019-08-26 12:18 評論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