JavaScript對象

xavier 發布于2019-08-23 11:01 / 716人閱讀

摘要：對象的分類內置對象原生對象就是語言預定義的對象，在標準定義，有解釋器引擎提供具體實現宿主對象指的是運行環境提供的對象。不過類型是中所有類型的父級所有類型的對象都可以使用的屬性和方法，可以通過的構造函數來創建自定義對象。

對象

javaScript中的對象，和其它編程語言中的對象一樣，可以比照現實生活中的對象來理解。在JavaScript中，一個對象可以是一個多帶帶擁有屬性和類型的實體。和杯子做一下比較，一個杯子是一個對象，擁有屬性，杯子有顏色、圖案、重量等。同樣，JavaScript也有屬性來定義它的特征。
方法是關聯到某個對象的函數，或者簡單地說，一個方法是一個值為某個函數的對象屬性，定義方法就像定義普通的函數，除了它們必須被賦給對象的某個屬性。

對象的分類

內置對象/原生對象：就是JavaScript語言預定義的對象，在ECMAScript標準定義，有JavaScript解釋器/引擎提供具體實現

宿主對象：指的是javaScript運行環境提供的對象。一般是由瀏覽器廠商提供實現(目前也有獨立的JavaScript解釋器/引擎提供實現)，主要分為BOM和DOM

自定義對象：就是由開發人員自主創建的對象

Object對象

Object類型與Array、Math等一樣都是JavaScript的引用類型。不過Object類型是JavaScript中所有類型的父級(所有類型的對象都可以使用Object的屬性和方法)，JavaScript可以通過Object的構造函數來創建自定義對象。當以非構造函數形式被調用時，Object等同于new Object()
Object對象的方法分為自有方法和原型方法兩種：
自有方法
create():指定原型對象和屬性來創建一個新的對象
getOwnOropertyNames():返回一個數組，它包含了指定對象所有的可枚舉或不可枚舉的屬性名
keys():返回一個數組，包含指定對象的所有自有可遍歷屬性的名稱
原型方法
prototype.hasOwnProperty():返回一個布爾值，該值指示對象是否包含指定的屬性

創建對象

1.對象的初始化器創建方式
var 對象名={

屬性名:屬性值,
方法名:function(){
    方法體
}

}

var obj={
    name : "張三",
    age : 20,
    sayMe : function(){
        console.log("我是張三");
    }
}

2.對象的構造函數方式
利用所有引用類型創建對應的對象
利用Object作為構造函數創建對象
var 對象名 = new Object();
var 對象名 = Object();

var obj = new Object();
var obj1 = Object();

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

//創建一個空對象：var 對象名 = Object.create(null)
var obj=Object.create(null);
/*當前創建的新對象擁有與obj對象相同的屬性和方法：
  var 對象名 = Object.create(obj);
  obj表示另一個對象*/
var obj1=Object.create(obj2);

4.創建空對象

var obj={}

創建方式對比

Number、String和Boolean
字面量方式創建的是原始類型，構造函數方式創建是引用類型
Array和Object
無論是字面量方式還是構造函數方式創建的都是引用類型

變量、函數與對象

其實定義的變量就是某個對象的屬性，定義的函數就是某個對象的方法
JavaScript中具有一個全局對象(Global)，僅存在于概念
1.瀏覽器運行環境，BOM中Window(窗口)對象
2.Node.js運行環境

var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
}

調用對象的屬性

//1.對象名.屬性名：不適用于復雜命名的屬性名稱
console.log(obj.name);
//2.對象名[屬性名]：通用的調用方式，與數組類似，適用于復雜命名的屬性名稱
console.log(obj["name"]);
//訪問一個對象不存在的屬性，返回undefined
console.log(obj.age);//返回undefined

新增對象的屬性

//1.對象名.新的屬性名=屬性值
obj.age=18;
//2.對象名[新的屬性名]=屬性值
obj["name"]="張三";

修改對象的屬性

//1.對象名.已存在的屬性名=屬性值
obj.age=20;
2.對象名[已存在的屬性名]=屬性值
obj["name"]="李四";

刪除對象的屬性

1.delete 對象名.屬性名
delete obj.age;
2.delete 對象名[屬性名]
delete obj["name"];

檢測對象的屬性

1.判斷對象的屬性是否為undefined

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

2.判斷對象的屬性值，先轉換為Boolean類型

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

3.利用in關鍵字進行判斷

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

4.Object類型提供了hasOwnProperty()方法

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

遍歷對象的屬性

1.for...in語句

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

2.Object類型提供了keys()方法，只能遍歷可枚舉的屬性

//創建一個對象
var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
}
//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 obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
} 
//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:20,
    sayMe:function(){
        console.log("我是張三");
    }
}
//1.對象名.方法名()
obj.sayMe();
//2.對象名[方法名]()
obj["sayMe"]();

新增對象的方法

//創建一個新的對象
var obj={
    name:"李四",
    age:20,
    sayMe:function(){
        console.log("我是李四");
    }
}
//1.對象名.新的方法名=function(){}
obj.sayYou=function(){
    console.log("你是張三");
}
//2.對象名[新的方法名]=function(){}
obj[sayHe]=function(){
    console.log("他是大王");
}

修改對象的方法

//創建一個對象
var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
}
//1.對象名.方法名=function(){}
obj.sayMe=function(){
    console.log("你是李四");
}
//2.對象名[方法名]=function(){}
obj[sayMe]=function(){
    console.log("你是李四");
}

刪除對象的方法

//創建一個對象
var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
}
//1.delete 對象名.方法名
delete obj.sayMe;
//訪問對象中不存在的方法，報錯(TypeError: obj.sayMe is not a function)

//2.delete 對象名[方法名];
delete obj[sayMe];

GPU云服務器云服務器 javascript對象 javascript 面向對象 javascript對象方法 JavaScript對象進階

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96916.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