摘要:通過對返回字符串切片第位到倒數(shù)第位即可獲得對象的類型。測試對象是的深拷貝是的子集,不能表示中所有值。序列化結(jié)果是,對象序列化結(jié)果是日期字符串不能表示函數(shù)對象和只能序列化對象自有的可枚舉屬性。
對象
對象是JavaScript的基本數(shù)據(jù)類型:屬性的無序集合。每個屬性key: value和屬性描述符descripter組成。
屬性名key:字符串或合法的變量標(biāo)識符;
屬性值value:可以是任意JavaScript值(number、string、boolean、null、undefined和數(shù)組、對象).
value可以是getter和setter。
屬性描述符descripter:每個屬性的三個相關(guān)特性writable、enumerable、configurable,其值都是布爾類型,默認(rèn)都為true
1 創(chuàng)建對象創(chuàng)建對象有三種方法:對象字面量{a: 1},new Constructor()、Object.create()
1.1 對象字面量var book = { "main title": "JavaScript", //有空格或其他非標(biāo)識符、關(guān)鍵字,必須使用雙引號 "sub-title": "The Definitive Guide", "for": "all audiences", author: { firstname: "David", lastname: "Flanagan" } }1.2 new操作符調(diào)用構(gòu)造函數(shù)
可以使用new操作符調(diào)用一個構(gòu)造器函數(shù)Constructor()創(chuàng)建一個對象。
var o = new String(); var d = new Date();1.3 Object.create()方法
原型:每個JS對象都有一個與之相關(guān)聯(lián)的原型對象prototype,對象其原型對象上繼承屬性。(當(dāng)前對象中的__proto__屬性是其原型對象的鏈接)
所有通過字面量創(chuàng)建的對象的原型都是Object.prototype,一個字面量對象{}相當(dāng)于調(diào)用new Object()。
Object.prototype的原型是null,所以null是原型的出口。
Object.create()是一個靜態(tài)函數(shù)(不是提供給對象調(diào)用的方法),用于創(chuàng)建對象:
第一個參數(shù):原型對象,創(chuàng)建的新對象以該參數(shù)為原型;
第二個參數(shù):可選,用于對對象屬性的描述
創(chuàng)建一個沒有原型的對象:Object.create(null);
創(chuàng)建一個普通空對象({}或new Object()):Object.create(Object.prototype);
2 對象三個特殊屬性每個對象都有與之相關(guān)的3個屬性:原型prototype、類屬性calss attribute、可擴(kuò)展性extensible attribute
2.1 原型每個JS對象都與另一個原型對象(prototype),利用原型可以實(shí)現(xiàn)繼承。
字面量的原型是:Object.prototype
new操作符創(chuàng)建的對象其原型:構(gòu)造器函數(shù)的原型(prototype屬性)
Object.create()創(chuàng)建的對象,其原型:第一個參數(shù)
查詢對象的原型ES5中定義了Object.getPrototypeOf()函數(shù),來查詢對象的原型
利用new創(chuàng)建的對象會繼承constructor屬性,指向創(chuàng)建該對的構(gòu)造器函數(shù),所有該對象的原型是:obj.constructor.prototype
字面量{}的constructor屬性指向Object()
使用isPrototypeOf()方法查看一個對象是否為另一個對象的原型(或處于原型鏈中)
Array.prototype.isPrototypeOf([]); // ==> true2.2 類屬性
對象的類屬性class attribute是一個字符串,用來表示對象的信息。ES3與ES5均為提供設(shè)置類屬性的API,只能通過繼承自Object.prototype的toString()方法來簡潔查詢。
{}.toString(); // ==> "[object Object]"
通過對返回字符串切片:第8位到倒數(shù)第2位即可獲得對象的類型。但是許多對象重寫了toString()方法,需要間接調(diào)用Function的call()方法
function classof(o) { if(o === null) {return "Null";} if(o === undefined) {return "Undefined"} return Object.prototype.toString.call(o).slice(8, -1); }
classof()方法可以返回傳遞給它的任意對象的類型,參數(shù)為number、string、boolean時,使用包裝類型將其轉(zhuǎn)化為對象,再進(jìn)行操作。
classof(null); // ==> "Null" classof(2); // ==> "Number" classof(false); // ==> "Boolean" classof(new Date()); // ==> "Date" classof(""); // ==> "String" classof({}); // ==> "Object" classof([]); // ==> "Array" classof(/./); // ==> "RegExp" classof(window); // ==> "Window",宿主對象 function F() {}; //自定義一個構(gòu)造器函數(shù) classof(new F()); // ==> "Object"2.3 可擴(kuò)展性extensible attribute
對象的課擴(kuò)展性用來描述對象是否可以添加新的屬性。所有的內(nèi)置對象和自定義對象都是可擴(kuò)展的,除非將其轉(zhuǎn)化為不可擴(kuò)展
Object.esExtensible()函數(shù)判斷傳入對象是否可以擴(kuò)展;
Object.preventExensible()函數(shù)將傳入的對象設(shè)置為不可擴(kuò)展,并且過程不可逆;只影響對象本身的可擴(kuò)展性
Object.seal()函數(shù)將對象設(shè)置為不可擴(kuò)展,屬性描述符configurable設(shè)置為false(不能添加新屬性,已有的屬性不能刪除或配置,但是對于writable: true時,可以修改屬性的值);過程不可逆
Object.isSealed()函數(shù)判斷一個對象是否封閉
Object.freeze()函數(shù)將對象設(shè)置為不可擴(kuò)展,屬性描述符configurable: false;,writable: false;只讀。value為accessor property含有setter函數(shù),不受影響
3 組成對象的屬性每個對象是無需的屬性集合,屬性名可以是合法的變量標(biāo)識符或字符串;變量值可以是任意JavaScript值;屬性由描述符descripter來控制特性;
3.1 屬性的查詢與設(shè)置屬性可以通過.和[]來訪問:
使用.訪問時,其右側(cè)必須是屬性名稱命名的簡單標(biāo)識符
使用[]訪問時,括號內(nèi)必須是計(jì)算結(jié)果為字符串的表達(dá)式,字符串是屬性的名字。變量名為關(guān)鍵字、含有空格或?qū)傩悦亲兞繒r,必須使用[]
var author = book.author; var name = author.surname; var title = book["main title"];
屬性的設(shè)置:與訪問相似,將其放在賦值表達(dá)式的左側(cè)
book.edtion = 6; book["main title"] = "ECMAScript";繼承與錯誤
在查詢一個對象是否存在時,先查看自身屬性,如果沒有;通過原型鏈逐層向上查找,直到原型鏈頂端null為止。
如果自身屬性與原型鏈中均為找到,屬性訪問返回undefined,不報(bào)錯
如果查詢不存在對象的屬性,會報(bào)錯
為null和undefined設(shè)置屬性會報(bào)錯
3.2 屬性刪除使用delete操作符,可以刪除對象的屬性(其描述符中configurable為true),并且只能刪除自有屬性,不能刪除繼承屬性
3.3 屬性檢測判斷某個屬性是否在某個對象中,JS有三種方法:in、hasOwnProperty()、propertyIsEnumerable()
in:如果對象自身屬性或繼承屬性中包含該屬性,返回true;
hasOwnProperty():只有對象自身屬性包含該屬性時,才返回true
propertyIsEnumerable():只有對象自身屬性包含該屬性,并且該屬性是可以枚舉(描述符中enumerable: true;)
var o = {a : 1}; "a" in o; // ==> true o.hasOwnProperty("a"); // ==> true o.propertyIsEnumerable("a"); // ==> true3.4 枚舉屬性
使用for-in循環(huán)可以遍歷對象中所有可枚舉的屬性(包括自身屬性與繼承屬性),把屬性名賦值給循環(huán)變量。ES5定義了Object.keys()和Object.getOwnPropertyNames()兩個函數(shù)用來枚舉屬性名稱。
Object.keys():返回對象中可枚舉的自有屬性名組成的數(shù)組
Object.getOwnPropertyNames():返回對象所有的自有屬性名組成的數(shù)組,包括不可枚舉的屬性
對象繼承的內(nèi)置方法都是不可枚舉的,給對象中增加的屬性都可以枚舉(除非設(shè)置其enumerable: false)
有許多使用工具庫為Object.prototype增加新的屬性,這些屬性可以被所有對象繼承使用,但是在ES5之前,不能將其設(shè)置為不可枚舉,所以在for-in循環(huán)時會被枚舉出來。
//過濾繼承的屬性 for(p in o) { if(!o.hasOwnProperty(p)) {continue;} } //跳過方法 for(p in o) { if(typeof p === "function") {continue;} }
操作對象屬性的工具函數(shù):
/** * 枚舉屬性的工具函數(shù) * 將對象p中可枚舉的屬性復(fù)制到對象o中,返回對象o; * 如果p和o含有同名的屬性,則覆蓋o中的屬性 * 不處理getter和setter以及復(fù)制屬性 */ function extend(o, p) { for(let prop in p) { o[prop] = p[prop]; } return o; } /** * 將對象p中可枚舉的屬性復(fù)制到對象o中,返回對象o; * 如果o和p有同名屬性,不影響o中的屬性 * 不處理getter和setter以及復(fù)制屬性 */ function merge(o, p) { for(let prop in p) { if(o.hasOwnProperty(prop)) { continue; } o[prop] = p[prop]; } return o; } /** * 如果o中的屬性在p中沒有同名屬性,從o中刪除這個屬性,并返回o */ function restrict(o, p) { for(let prop in o) { if(!(prop in p)) { delete o[prop]; } } return o; } /** * 如果o中的屬性在p中存在同名屬性,從o中刪除這個屬性,并返回o */ function substrict(o, p) { for(let prop in o) { if(prop in p) { delete o[prop]; } } return o; } /** * 返回一個數(shù)組,包含o中可枚舉的自有屬性的名字 */ function keys(o) { //o必須是對象 if(typeof o !== "object") { throw TypeError(); } var result = []; for(let prop in o) { if(o.hasOwnProperty(prop)) { result.push(prop); } } return result; }3.5 屬性setter和getter
屬性的組成:key、value、descripter。在ES5中,value可以用一個或兩個方法替代(getter和setter方法)
所有JavaScript的value叫做數(shù)據(jù)屬性data property
getter和setter定義的屬性叫做存取器屬性:accessor property
不同于data property,accessor property的讀寫屬性由getter和setter決定。
如果屬性同時有getter和setter,它是一個可讀寫的屬性;
如果屬性只有getter,它是一個只讀的屬性;
如果屬性只有setter,它是一個只寫的屬性;讀取只寫屬性總是返回undefined
getter和setter定義var o = { data_prop: value; //普通數(shù)據(jù)屬性 //存取器屬性是成對定義的函數(shù),函數(shù)名是該屬性名,沒有冒號分隔函數(shù)體以屬性名 get accessor_prop() {...}, set accessor_prop(value) {...} }
var p = { //x、y是普通可讀寫的數(shù)據(jù)屬性 x: 1.0, y: 1.0, //r是可讀寫的存取器屬性,具有g(shù)etter和setter //函數(shù)結(jié)束后要帶上逗號 get r() {return Math.sqrt(this.x * this.x + this.y * this.y)}, set r(newvalue) { var oldvalue = Math.sqrt(this.x * this.x + this.y * this.y); var ratio = newvalue / oldvalue; this.x *= ratio; this.y *= ratio; }, //theta是只讀存取器屬性,只有g(shù)etter方法 get theta() {return Math.atan2(this.y, this.x)} };
函數(shù)體內(nèi)的this指向表示這個點(diǎn)的對象
3.6 屬性的描述符descripter屬性除key、value,還有一組用于描述其特性的descripter,其中有writable、enumerable和configurable三個屬性,其值都為布爾類型,默認(rèn)為true
假設(shè)將setter和getter看做descripter,同理將屬性的value也看做descripter
data property的四個特性:value、writable、enumerable、configurable
accessory property的四個特性:getter、setter、enumerable、configurable
ES5提供操作descripter的API:
調(diào)用Object.getOwnPropertyDescripter()函數(shù),獲取某個對象中特定自有屬性的descirpter
調(diào)用Object.getPrototypeOf()函數(shù)可以獲取繼承屬性的descirpter
調(diào)用Object.defineProperty()函數(shù)可以設(shè)置屬性的特性,或者新建屬性,使其具有某種特性
//返回{ value: 1, writable: true, enumerable: true, configurable: true } Object.getOwnPropertyDescriptor({a: 1}, "a"); //繼承屬性和不存在的屬性,返回undefined Object.getOwnPropertyDescriptor({}); Object.getOwnPropertyDescriptor({}, "toString");
var o = {}; //創(chuàng)建空對象 //添加一個不可枚舉的屬性,其值為1 Object.defineProperty(o, "x", {value: 1, writable: true, enumerable: false, configurable: true}); o.x; //屬性存在,但不可枚舉, ==>1 Object.keys(o); // ==> [] //對x屬性進(jìn)行修改,使其變?yōu)橹蛔x Object.defineProperty(o, "x", {writable: false}); o.x = 2; //操作失敗,但不報(bào)錯;在嚴(yán)格模式下拋出類型錯誤 o.x; // ==> 1 //屬性的值可以配置 Object.defineProperty(o, "x", {value: 2}); o.x; // ==> 2 //將x從數(shù)據(jù)屬性修改為存取器屬性 Object.defineProperty(o, "x", {get function() {return 0;}}); o.x; //==> 04 序列化對象
序列化對象指將對象的狀態(tài)轉(zhuǎn)化為字符串,同時可以將JSON字符串轉(zhuǎn)化為對象。ES5內(nèi)置JSON對象的JSON.stringgify()和JSON.parse()可以完成序列化和解析。
var o = {x: 1, y: {z: [false, null, ""]}}; //測試對象 var s =JSON.stringify(o); // "{"x":1,"y":{"z":[false,null,""]}}" var p = JSON.parse(s); //p是s的深拷貝
JSON是JavaScript的子集,不能表示JavaScript中所有值。
可以表示:object、Array、string、number、boolean、null,可以序列化與還原。infinity、NaN序列化結(jié)果是null,Date對象序列化結(jié)果是日期字符串
不能表示:函數(shù)、RegExp、Error對象和undefined
JSON.stringify()只能序列化對象自有的可枚舉屬性。
5 Object.prototype對象的方法hasOwnProperty():檢測該屬性是否為對象自有屬性
propertyIsEnumerable():檢測該屬性是否是對象自有,并且可枚舉的屬性
isPrototypeOf:檢測某對象是否為另一個對象的原型
toString():無參數(shù),返回調(diào)用該方法對象值的字符串,由于功能有限,某些對象重寫了該方法:Array.toString()、Date.toString()、Function.toString()
toLoaclString():Object中的toLoaclString()只是調(diào)用toString(),只有Date和Number類對toLoaclString()定制,可以對數(shù)字、日期和時間進(jìn)行本地化處理
6 總結(jié)JS中對象是屬性的無序集合,每個對象有三個相關(guān)特性:原型prototype、類屬性class property、可擴(kuò)展性extensible
對象的創(chuàng)建三種方法:對象字面量、new調(diào)用構(gòu)造函數(shù)和Object.create()
每個屬性由三個部分組成:key、value和descripter
key只能是字符串或者值為字符串的變量標(biāo)識符
value可以是任意JavaScript值(數(shù)據(jù)屬性data property);可以是一個或兩個方法,getter和setter(控制區(qū)屬性accessor property)
descripter:writable、enumerable、configurable,其值都是布爾類型,默認(rèn)都為true。可以使用Object.defineProperty()操作描述符特性。
writable指該屬性是否可以寫入數(shù)據(jù);enumerable指該屬性是否可以枚舉,(使用for-in循環(huán)可以列出,ES5提供Object.keys()和Object.getOwnPropertyNames());configurable指該屬性是否可以用delete操作符刪除和配置。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/81811.html
摘要:對象數(shù)組初始化表達(dá)式,闖關(guān)記之上文檔對象模型是針對和文檔的一個。闖關(guān)記之?dāng)?shù)組數(shù)組是值的有序集合。數(shù)組是動態(tài)的,根闖關(guān)記之語法的語法大量借鑒了及其他類語言如和的語法。 《JavaScript 闖關(guān)記》之 DOM(下) Element 類型 除了 Document 類型之外,Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現(xiàn) XML 或 HTML 元素...
摘要:理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型,雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及,但是只要善于運(yùn)用,其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對方法,包括,,。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。 怎樣使用 this 因?yàn)楸救藢儆趥吻岸?,因此文中只看懂?8 成左右,希望能夠給大家?guī)韼椭?...(據(jù)說是阿里的前端妹子寫的) this 的值到底...
摘要:對象在中,除了數(shù)字字符串布爾值這幾個簡單類型外,其他的都是對象。那么在函數(shù)對象中,這兩個屬性的有什么區(qū)別呢表示該函數(shù)對象的原型表示使用來執(zhí)行該函數(shù)時這種函數(shù)一般成為構(gòu)造函數(shù),后面會講解,新創(chuàng)建的對象的原型。這時的函數(shù)通常稱為構(gòu)造函數(shù)。。 本文原發(fā)于我的個人博客,經(jīng)多次修改后發(fā)到sf上。本文仍在不斷修改中,最新版請?jiān)L問個人博客。 最近工作一直在用nodejs做開發(fā),有了nodejs,...
摘要:然后將構(gòu)造函數(shù)的原型設(shè)為,便實(shí)現(xiàn)了對象繼承。首先,我們定義一個構(gòu)造函數(shù),并在其中定義一個局部變量。這里的是局部變量,其作用域仍然存在是閉包現(xiàn)象,而非對象屬性。 Javascript是動態(tài)的,弱類型的,解釋執(zhí)行的程序設(shè)計(jì)語言。 Javascript極其靈活,支持多種程序設(shè)計(jì)范式:面向?qū)ο蟆⒅噶钍?、函?shù)式。JavaSCript最初被用于瀏覽器腳本,現(xiàn)在已經(jīng)是所有主流瀏覽器的默認(rèn)腳本語言。瀏...
摘要:可嵌入動態(tài)文本于頁面,對瀏覽器事件作出響應(yīng),讀寫元素,控制等。年月,發(fā)布了一款面向普通用戶的新一代的瀏覽器版,市場份額一舉超過。網(wǎng)景將這門語言作為標(biāo)準(zhǔn)提交給了歐洲計(jì)算機(jī)制造協(xié)會。線程和的并發(fā)執(zhí)行都是線程安全的。后面會詳細(xì)講解對象類型的轉(zhuǎn)換。 本文由云+社區(qū)發(fā)表作者:殷源,專注移動客戶端開發(fā),微軟Imagine Cup中國區(qū)特等獎獲得者 JavaScript越來越多地出現(xiàn)在我們客戶端開...
摘要:在中,并沒有對抽象類和接口的支持。例如,當(dāng)對象需要對象的能力時,可以有選擇地把對象的構(gòu)造器的原型指向?qū)ο?,從而達(dá)到繼承的效果。本節(jié)內(nèi)容為設(shè)計(jì)模式與開發(fā)實(shí)踐第一章筆記。 動態(tài)類型語言 編程語言按數(shù)據(jù)類型大體可以分為兩類:靜態(tài)類型語言與動態(tài)類型語言。 靜態(tài)類型語言在編譯時已確定變量類型,動態(tài)類型語言的變量類型要到程序運(yùn)行時,待變量被賦值后,才具有某種類型。 而JavaScript是一門典型...
閱讀 858·2021-10-25 09:48
閱讀 619·2021-08-23 09:45
閱讀 2510·2019-08-30 15:53
閱讀 1766·2019-08-30 12:45
閱讀 617·2019-08-29 17:21
閱讀 3429·2019-08-27 10:56
閱讀 2560·2019-08-26 13:48
閱讀 705·2019-08-26 12:24