JavaScript-對象

xeblog 發布于2019-08-26 12:10 / 477人閱讀

摘要：對象是什么在中，一個對象就像一個多帶帶擁有屬性和類型的實體。一個杯子作為一個對象，杯子有顏色重量等屬性。同樣，對象也有屬性定義它的特征。方法是關聯到某個對象的函數，或者說，一個方法是一個值為某個函數的對象屬性。

對象是什么

在JavaScript中，一個對象就像一個多帶帶擁有屬性和類型的實體。一個杯子作為一個對象，杯子有顏色、重量等屬性。同樣，JavaScript對象也有屬性定義它的特征。
方法是關聯到某個對象的函數，或者說，一個方法是一個值為某個函數的對象屬性。
對象可以分為以下幾類

內置對象/原生對象

就是JavaScript語言預定義的對象

宿主對象

是JavaScript運行環境提供的對象

自定義對象

就是開發人員自主創建的對象

Object對象

Object類型是引用類型。但Object類型是所有JavaScript中所有類型的父級（所有類型的對象都可以是Object的屬性和方法）

創建對象

/*
* 1. 對象的初始化器創建方式
*     var 對象名=｛
*      屬性名 : 屬性值
*      方法名 : function{
*         方法體
*      ｝
*    ｝
*/
var obj = {
    name : "九筒",
    age : 2,
    sayYou : function () {
        console.log("火鍋")
    }
};

/* 2. 對象的構造函數方式
*      * 利用所有的引用類型創建對應的對象->具有具體的類型
*        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();
var str = new Storage();
var boo = new Boolean();

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

/*   利用Object.create創建對象
*      var 對象名 = Object.create(null) -> 創建一個空對象
      var 對象名 = Object.create(obj)
      * obj - 表示另一個對象
      * 特點 - 當前創建的新對象擁有與obj對象相同的屬性和方法*/
var obj4 = Object.create(null);
var obj5 = Object.create(obj);

對象的屬性 定義對象的屬性

對象的屬性就像是附加到對象上的變量

/*對象介意定義多個屬性
*  屬性之間使用逗號分開*/
var obj = {
    name : "吳凡",
    age : 23,
    book : function () {
        console.log("暗毀")
    }
};

調用對象的屬性

/*  調用對象的屬性
*     對象名.屬性名
*     不適用于復雜命名的屬性名稱*/
console.log(obj.name);

/*   對象名[屬性名]-通用方式
     適用于復雜命名的屬性名稱
*     */
console.log(obj["name"]);//屬性名是字符串形式

新增、刪除、修改對象的屬性

var obj = {
    name : "火鍋",
    variety : "比熊",
    age : function () {
        console.log("3")
    }
}
   /* 新增對象的屬性
   *    1對象名.新的屬性名 = 屬性值
   *    2對象名[新的屬性名] = 屬性值*/
obj.col="白色";
console.log(obj.col);//白色

   /*刪除對象的屬性
   * delete 對象名.屬性名
   * delete 對象名[屬性名]*/
delete obj.col
console.log(obj.col);//undefined

  /*修改對象的屬性
  * 對象名.已存在的屬性名 = 屬性值
  * 對象名[已存在的屬性名] = 屬性值*/
obj.name = "九筒";
console.log(obj.name);//九筒

檢測對象的屬性

var obj = {
    name : "火鍋",
    variety : "比熊",
    age : function () {
        console.log("3")
    }
};
console.log(obj.name)

/*   1. 判斷對象的屬性值是否為undefined*/
if (obj.name !==undefined){
    console.log("obj對象name屬性存在")
}else{
    console.log("obj對象name屬性不存在")
}

/*   2. 判斷對象的屬性值，先轉換為boolean類型*/
if (obj.name){
    console.log("obj對象name屬性存在")
}

/*   3. 利用in關鍵字進行判斷*/
if ("name" in obj){
    console.log("obj對象name屬性存在")
}else{
    console.log("obj對象name屬性不存在")
}

/*   4. Object類型提供了hasOwnProperty()方法*/
if (obj.hasOwnProperty("name")){
    console.log("obj對象name屬性存在")
}else{
    console.log("obj對象name屬性不存在")
}

便利屬性

var obj = {
    name : "小薄荷",
    age : "0.3",
    variety : 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 : "火鍋",
    variety : "比熊",
    age : function () {
        console.log("3")
    }
}

/*調用對象的方法*/
// 1.對象名.方法名()
obj.sayMe();
// 2.對象名[方法名]()
obj["sayMe"]();

/*新增對象的方法*/
// 1.對象名.新的方法名 = function(){}
obj.name = function(){
    console.log("九筒");
}
console.log(obj);
// 2.對象名[新的方法名] = function(){}

/*修改對象的方法*/
// 1.對象名.方法名 = function(){}
obj.name = function(){
    console.log("九筒");
}
// 2.對象名[方法名] = function(){}

/*刪除對象的方法*/
//1.delete 對象名.方法名
delete obj.sayMe;
// 訪問對象中不存在的方法 -> 報錯(TypeError: obj.sayMe is not a function)
// obj.sayMe();
// 2.delete 對象名[方法名]

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

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

JavaScript 闖關記

摘要：對象數組初始化表達式，闖關記之上文檔對象模型是針對和文檔的一個。闖關記之數組數組是值的有序集合。數組是動態的，根闖關記之語法的語法大量借鑒了及其他類語言如和的語法。《JavaScript 闖關記》之 DOM（下） Element 類型除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現 XML 或 HTML 元素...

mj 2019-08-21 18:45 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
JavaScript中的面向對象（object-oriented）編程

摘要：對象在中，除了數字字符串布爾值這幾個簡單類型外，其他的都是對象。那么在函數對象中，這兩個屬性的有什么區別呢表示該函數對象的原型表示使用來執行該函數時這種函數一般成為構造函數，后面會講解，新創建的對象的原型。這時的函數通常稱為構造函數。。本文原發于我的個人博客，經多次修改后發到sf上。本文仍在不斷修改中，最新版請訪問個人博客。最近工作一直在用nodejs做開發，有了nodejs，...

JerryZou 2019-08-21 10:26 評論0 收藏0
10分鐘了解Javascript-天碼營

摘要：然后將構造函數的原型設為，便實現了對象繼承。首先，我們定義一個構造函數，并在其中定義一個局部變量。這里的是局部變量，其作用域仍然存在是閉包現象，而非對象屬性。 Javascript是動態的，弱類型的，解釋執行的程序設計語言。 Javascript極其靈活，支持多種程序設計范式：面向對象、指令式、函數式。JavaSCript最初被用于瀏覽器腳本，現在已經是所有主流瀏覽器的默認腳本語言。瀏...

trigkit4 2019-08-21 13:33 評論0 收藏0
JavaScriptCore全面解析

摘要：可嵌入動態文本于頁面，對瀏覽器事件作出響應，讀寫元素，控制等。年月，發布了一款面向普通用戶的新一代的瀏覽器版，市場份額一舉超過。網景將這門語言作為標準提交給了歐洲計算機制造協會。線程和的并發執行都是線程安全的。后面會詳細講解對象類型的轉換。本文由云+社區發表作者：殷源，專注移動客戶端開發，微軟Imagine Cup中國區特等獎獲得者 JavaScript越來越多地出現在我們客戶端開...

OnlyMyRailgun 2019-08-23 14:54 評論0 收藏0
JavaScript設計模式與開發實踐 | 01 - 面向對象的JavaScript

摘要：在中，并沒有對抽象類和接口的支持。例如，當對象需要對象的能力時，可以有選擇地把對象的構造器的原型指向對象，從而達到繼承的效果。本節內容為設計模式與開發實踐第一章筆記。動態類型語言編程語言按數據類型大體可以分為兩類：靜態類型語言與動態類型語言。靜態類型語言在編譯時已確定變量類型，動態類型語言的變量類型要到程序運行時，待變量被賦值后，才具有某種類型。而JavaScript是一門典型...

suxier 2019-08-21 10:44 評論0 收藏0