JavaScript...對象...

xuxueli 發(fā)布于2019-08-23 11:01 / 3199人閱讀

摘要：對象對象是什么中的對象和其他編程語言中的對象一樣可以比照現(xiàn)實上活中的對象來理解它中對象的概念可以比照現(xiàn)實生活中實實在在的物體來理解在中一個對象可以是一個多帶帶的擁有屬性和類型的實體拿它和一個杯子做下類比一個杯子是一個對象擁有屬性杯子有顏色圖案

對象

對象是什么

JavaScript中的對象和其他編程語言中的對象一樣可以比照現(xiàn)實上活中的對象來理解它
JavaScript中對象的概念可以比照現(xiàn)實生活中實實在在的物體來理解
在JavaScript中一個對象可以是一個多帶帶的擁有屬性和類型的實體拿它和一個杯子做下類比一個杯子是一個對象擁有屬性杯子有顏色圖案重量等等同樣JavaScript對象也有屬性來定義它的特征

對象的分類

1.內(nèi)置對象/原生對象
就是JavaScript語言預定義的對象在ECMAScript標準定義由JavaScript解釋器/引擎提供具體實現(xiàn)
2.宿主對象
指的是JavaScript運行環(huán)境提供的對象一般是由瀏覽器廠商提供實現(xiàn)(目前也有獨立的JavaScript解釋器/引擎提供實現(xiàn))主要分為BOM和DOM
3.自定義對象
就是由開發(fā)人員自主創(chuàng)建的對象

Object對象

-Object對象是什么
Object類型與Array Math等一樣都是JavaScript的引用類型不過Object類型是JavaScript中所有類型的父級(所有類型的對象都可以使用Object的屬性和方法)
JavaScript可以通過Object的構造函數(shù)來創(chuàng)建自定義對象當以非構造函數(shù)形式被調(diào)用時 Object等同于new Object()0

創(chuàng)建對象

對象初始化器方式

使用對象初始化器也被稱作通過字面值創(chuàng)建對象

/*
    1. 對象的初始化器創(chuàng)建方式
      var 對象名 = {
         屬性名: 屬性值,
         方法名: function(){
             方法體
         }
     }
*/
var boj1 = {
    name : "xxx",
    age : 38 ,
    sayMe : function () {
        console.log("我是xxx")
    }
}

構造函數(shù)方式

1.通過JavaScript提供的預定義類型的構造函數(shù)來創(chuàng)建對象

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

2.通過JavaScript提供的Object類型的構造函數(shù)來創(chuàng)建自定義對象

var obj = new Object();//創(chuàng)建一個自定義對象

Object.create()方法

Object.create()方法創(chuàng)建一個擁有指定原型和若干個指定屬性的對象
var 對象名 = Object.create(null) - 創(chuàng)建一個空對象
var 對象名 = Object.create(obj)
obj - 表示另一個對象
特點 - 當前創(chuàng)建的新對象擁有與obj對象相同的屬性和方法

對象與變量

var obj = 100;
console.log(obj);//100

obj = {
    name : "xxx",
    sayMe : function () {
        console.log("這是xxx");
    }
};
//{ name: "xxx", sayMe: [Function: sayMe] }
console.log(obj);

對象的復制

var obj1 = {
    name : "xxx",
    sayMe : function () {
        console.log("這是xxx")
    }
}
console.log(obj1);

var obj2 = obj1;
console.log(obj2);

//修改obj1對象的name屬性
obj1.name = "yyy";
console.log(obj1);
console.log(obj2);

//循環(huán)遍歷對象 - for...in 語句
for(var attr in obj1){
    console.log(attr);
}

對象的屬性

調(diào)用對象的屬性

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

新增對象的屬性

var obj = {
    name : "xxx",
    sayMe : function () {
        console.log("我是xxx");
    }
}
/*
     1.對象名 .新的屬性名 = 屬性值
     2.對象名[新的屬性名] = 屬性值
*/
obj.age = 18;
console.log(obj);

/*
     空對象默認沒有自身屬性和方法(父級Object)
*/
var obj1 = {};
console.log(obj1);

obj1.name = "yyy";
console.log(obj1);

修改對象的屬性

var obj = {
    name : "xxx",
    sayMe : function(){
        console.log("我是xxx");
    }
}
/*
    1.對象名.已存在的屬性名 = 屬性值
    2.對象名[已存在的屬性名] = 屬性值
 */
obj.name = "yyy";
console.log(obj);

刪除對象的屬性

var obj = {
    name : "xxx",
    sayMe : function(){
        console.log("我是xxx");
    }
}
/*
    1.delete 對象名.屬性名
    2.delete 對象名[屬性名]
 */
delete obj.name;
console.log(obj.name);// undefined

檢測對象的屬性

可以使用下面四種方法檢測對象中是否存在指定屬性:

var obj = {
    name : "xxx",
    age : 18
}

console.log(obj.age);// undefined

// 1.判斷對象的屬性值是否為 undefined
if (obj.age !== undefined) {
    console.log("obj對象的age屬性存在...");
} else {
    console.log("請先定義obj對象的age屬性...");
}

// 2.判斷對象的屬性值 - 先轉(zhuǎn)換為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屬性不存在...")
}

遍歷對象的屬性

JavaScript屬性提供了三種原生方法用于遍歷或枚舉對象的屬性:
1.for..in循環(huán):該方法依次訪問一個對象及其原型鏈中所有可枚舉的屬性
2.Object.keys(object)方法:該方法返回一個對象 o 自身包含(不包括原型中)的所有屬性的名稱的數(shù)組
3.Object.getOwnPropertyNames(object)方法:該方法返回一個數(shù)組它包含了對象 o 所有擁有的屬性(無論是否可枚舉)的名稱

對象的方法

調(diào)用對象的方法

對象方法的調(diào)用類似于對象屬性的調(diào)用

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

新增對象的用法

var obj = {
    name : "xxx",
    age : 18,
    sayMe : function(){
        console.log("我是xxx");
    }
}
// 對象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log("你是yyy");
}
console.log(obj);

刪除對象的方法

var obj = {
    name : "xxx",
    age : 18,
    sayMe : function(){
        console.log("我是xxx");
    }
}
// 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();// 方法調(diào)用
    }
}
// 以上代碼可以優(yōu)化為以下代碼
if ("sayMe" in obj && obj.sayMe instanceof Function) {
    obj.sayMe();// 方法調(diào)用
}

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96913.html

JavaScript 闖關記

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

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

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

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

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

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

摘要：然后將構造函數(shù)的原型設為，便實現(xiàn)了對象繼承。首先，我們定義一個構造函數(shù)，并在其中定義一個局部變量。這里的是局部變量，其作用域仍然存在是閉包現(xiàn)象，而非對象屬性。 Javascript是動態(tài)的，弱類型的，解釋執(zhí)行的程序設計語言。 Javascript極其靈活，支持多種程序設計范式：面向?qū)ο蟆⒅噶钍健⒑瘮?shù)式。JavaSCript最初被用于瀏覽器腳本，現(xiàn)在已經(jīng)是所有主流瀏覽器的默認腳本語言。瀏...

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

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

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

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

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