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