首頁 > 易卦

JavaScript中object物件方法總結介紹 create assign values

作者:由 小焱2018 發表于 易卦日期:2023-01-14

呼叫方法物件名怎麼找

JavaScript中object物件方法總結介紹 create assign values

物件 (object)

Object 是 JavaScript 的一種 資料型別 。它用於儲存各種鍵值集合和更復雜的實體。Objects 可以透過 Object() 建構函式或者使用 物件字面量 的方式建立

JavaScript中object物件方法總結介紹 create assign values

描述

在JavaScript中,幾乎所有的物件都是

Object

型別的例項,它們都會從

Object。prototype

繼承屬性和方法,雖然大部分屬性都會被覆蓋(shadowed)或者說被重寫了(overridden)。 除此之外,

Object

還可以被故意的建立,但是這個物件並不是一個“真正的物件”(例如:透過

Object。create(null)

),或者透過一些手段改變物件,使其不再是一個“真正的物件”(比如說:

Object。setPrototypeOf

)。

透過原型鏈,所有的

object

都能觀察到 Object 原型物件(Object prototype object)的改變,除非這些受到改變影響的屬性和方法沿著原型鏈被進一步地重寫。儘管有潛在的危險,但這為覆蓋或擴充套件物件的行為提供了一個非常強大的機制。

Object

建構函式為給定的引數建立一個包裝類物件(object wrapper),具體有以下情況:

如果給定值是

null

undefined

,將會建立並返回一個空物件

如果傳進去的是一個基本型別的值,則會構造其包裝型別的物件

如果傳進去的是引用型別的值,仍然會返回這個值,經他們複製的變數保有和源物件相同的引用地址

當以非建構函式形式被呼叫時,

Object

的行為等同於

new Object()

建構函式

Object()

建立一個新的

Object

物件。該物件將會包裹(wrapper)傳入的引數

靜態方法

Object。assign()

透過複製一個或多個物件來建立一個新的物件。

Object。create()

使用指定的原型物件和屬性建立一個新物件。

Object。defineProperty()

defineProperty)

給物件新增一個屬性並指定該屬性的配置。

Object。defineProperties()

defineProperties)

給物件新增多個屬性並分別指定它們的配置。

Object。entries()

返回給定物件自身可列舉屬性的

[key, value]

陣列。

Object。freeze()

凍結物件:其他程式碼不能刪除或更改任何屬性。

Object。getOwnPropertyDescriptor()

Object/getOwnPropertyDescriptor)

返回物件指定的屬性配置。

Object。getOwnPropertyNames()

getOwnPropertyNames)

返回一個數組,它包含了指定物件所有的可列舉或不可列舉的屬性名。

Object。getOwnPropertySymbols()

Object/getOwnPropertySymbols)

返回一個數組,它包含了指定物件自身所有的符號屬性。

Object。getPrototypeOf()

GetPrototypeOf)

返回指定物件的原型物件。

Object。is()

比較兩個值是否相同。所有 NaN 值都相等(這與==和===不同)。

Object。isExtensible()

isExtensible)

判斷物件是否可擴充套件。

Object。isFrozen()

判斷物件是否已經被凍結。

Object。isSealed()

判斷物件是否已經密封。

Object。keys()

返回一個包含所有給定物件

自身

可列舉屬性名稱的陣列。

Object。preventExtensions()

preventExtensions)

防止物件的任何擴充套件。

Object。seal()

防止其他程式碼刪除物件的屬性。

Object。setPrototypeOf()

setPrototypeOf)

設定物件的原型(即內部

[[Prototype]]

屬性)。

Object。values()

返回給定物件自身可列舉值的陣列。

例項屬性

Object。prototype。constructor

constructor)

一個引用值,指向 Object 建構函式

Object。prototype。__proto__

proto)

指向一個物件,當是一個 object 例項化時,使用該物件作為例項化物件的原型

例項方法

Object。prototype。__defineGetter__()

Object/

defineGetter

將一個屬性與一個函式相關聯,當該屬性被訪問時,執行該函式,並且返回該函式的返回值。

Object。prototype。__defineSetter__()

Object/

defineSetter

將一個屬性與一個函式相關聯,當該屬性被設定時,執行該函式,執行該函式去修改某個屬性。

Object。prototype。__lookupGetter__()

Object/

lookupGetter

返回一個函式,該函式透過給定屬性的

Object。prototype。__defineGetter__()

得出。

Object。prototype。__lookupSetter__()

Object/

lookupSetter

返回一個函式,該函式透過給定屬性的

Object。prototype。__defineSetter__()

得出。

Object。prototype。hasOwnProperty()

Object/hasOwnProperty)

返回一個布林值,用於表示一個物件自身是否包含指定的屬性,該方法並不會查詢原型鏈上繼承來的屬性。

Object。prototype。isPrototypeOf()

Object/isPrototypeOf)

返回一個布林值,用於表示該方法所呼叫的物件是否在指定物件的原型鏈中。

Object。prototype。propertyIsEnumerable()

Global_Objects/Object/propertyIsEnumerable)

返回個布林值,用於表示內部屬性 [ECMAScript [[Enumerable]] attribute

Object。prototype。toLocaleString()

Object/toLocaleString)

呼叫

toString()。

Object。prototype。toString()

toString)

返回一個代表該物件的字串。

Object。prototype。valueOf()

valueOf)

返回指定物件的原始值。

示例

給定undefined和null型別使用Object

下面的例子將一個空的

Object

物件存到

o

中:

var o = new Object();var o = new Object(undefined);var o = new Object(null);

使用Object生成布林物件object生成布林物件

下面例子將[

Boolean``o

中:

// 等價於 o = new Boolean(true);var o = new Object(true);// 等價於 o = new Boolean(false);var o = new Object(Boolean());

create 建立一個物件

const obj = Object。create({a:1}, {b: {value: 2}})// 第一個引數為物件,物件為函式呼叫之後返回新物件的原型物件,第二個引數為物件本身的例項方法(預設不能修改,不能列舉)obj。__proto__。a === 1 // true obj。b = 3;console。log(obj。b) // 2//建立一個可寫的,可列舉的,可配置的屬性pobj2 = Object。create({}, { p: { value: 2, // 屬性值 writable: true, // 是否可以重寫值 enumerable: true, //是否可列舉 configurable: true //是否可以修改以上幾項配置 }});obj2。p = 3;console。log(obj2。p) // 3/* 注意: enumerable 會影響以下for…in 遍歷包括物件原型上屬性 */Object。keys() //只能遍歷自身屬性JSON。stringify //只能序列化自身屬性

defineProperty

Object。defineProperty(object, prop, descriptor)定義物件屬性

// 新增資料屬性var obj = {};// 1。新增一個數據屬性Object。defineProperty(obj, “newDataProperty”, { value: 101, writable: true, enumerable: true, configurable: true});obj。newDataProperty // 101// 2。修改資料屬性Object。defineProperty(obj, “newDataProperty”, { writable:false});//新增訪問器屬性var obj = {};Object。defineProperty(obj, “newAccessorProperty”, { set: function (x) { this。otherProperty = x; }, get: function () { return this。otherProperty; }, enumerable: true, configurable: true});

注意: 1。第一個引數必須為物件 2。descriptor 不能同時具有 (value 或 writable 特性)(get 或 set 特性)。 3。configurable 為false 時,不能重新修改裝飾器

defineProperties

Object。defineProperties(object, {prop1 : descriptor1, prop2 : descriptor2, 。。。)

var obj = {};Object。defineProperties(obj, { ‘property1’: { value: true, writable: true }, ‘property2’: { value: ‘Hello’, writable: false } // etc。 etc。});

keys

遍歷可列舉的屬性,只包含物件本身可列舉屬性,不包含原型鏈可列舉屬性

let arr = [“a”, “b”, “c”];let obj = { foo: “bar”, baz: 42 };let ArrayLike = { 0 : “a”, 1 : “b”, 2 : “c”};Object。keys(arr) // [‘0’, ‘1’, ‘2’]Object。keys(obj) // [“foo”,“baz”]Object。keys(ArrayLike) // [‘0’, ‘1’, ‘2’]

values

遍歷可列舉的屬性值,只包含物件本身可列舉屬性值,不包含原型鏈可列舉屬性值

let arr = [“a”, “b”, “c”];let obj = { foo: “bar”, baz: 42 };let ArrayLike = { 0 : “a”, 1 : “b”, 2 : “c”};Object。values(arr) // [“a”, “b”, “c”]Object。values(obj) // [“bar”,42]Object。values(ArrayLike) // [“a”, “b”, “c”]

assign

Object。assign( target, source, source1 ) 方法用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目標物件(target)。複製的屬性是有限制的,只複製源物件的自身屬性(不複製繼承屬性),也不複製不可列舉的屬性(enumerable: false)

const target = { a: 1, b: 1 };const source1 = { b: 2, c: 2 };const source2 = { c: 3 };Object。assign(target, source1, source2); target // {a:1, b:2, c:3}// 特殊情況:let obj = {a: 1};Object。assign(obj, undefined) === obj // trueObject。assign(obj, null) === obj // trueObject。assign([1, 2, 3], [4, 5]) // [4, 5, 3]Object。assign //方法實行的是淺複製,而不是深複製。const obj1 = {a: {b: 1}};const obj2 = Object。assign({}, obj1);obj1。a。b = 2;console。log(obj2。a。b) //2obj2。a。b = 3console。log(obj1。a。b) //3

getPrototypeOf

獲取指定物件的原型(內部[[Prototype]]屬性的值)

const prototype1 = {};const object1 = Object。create(prototype1);console。log(Object。getPrototypeOf(object1) === prototype1); // true// 注意:Object。getPrototypeOf(Object) 不是 Object。prototype Object。getPrototypeOf( Object ) === Function。prototype; // true

setPrototypeOf

設定一個指定的物件的原型

const obj = {a: 1}, proto = {b:2}Object。setPrototypeOf(obj, proto)obj。__proto__ === proto //true

getOwnPropertyNames

與keys相似,但包含遍歷包含不可列舉屬性

var my_obj = Object。create({}, { getFoo: { value: function() { return this。foo; }, enumerable: false }});my_obj。foo = 1;Object。getOwnPropertyNames(my_obj)。sort() // [“foo”, “getFoo”]

getOwnPropertyDescriptor

獲取該屬性的描述物件

let obj = { foo: 123 };Object。getOwnPropertyDescriptor(obj, ‘foo’)// { value: 123, writable: true, enumerable: true, configurable: true }

getOwnPropertyDescriptors

返回指定物件所有自身屬性(非繼承屬性)的描述物件

// Object。getOwnPropertyDescriptors 方法,返回指定物件所有自身屬性(非繼承屬性)的描述物件。const obj = { foo: 123, get bar() { return ‘abc’ }}; console。dir(Object。getOwnPropertyDescriptors(obj))// { foo:{ value: 123,// writable: true,// enumerable: true,// configurable: true },// bar:{ get: [Function: bar],// set: undefined,// enumerable: true,// configurable: true } // }

使用場景: Object。assign() 方法只能複製源物件的可列舉的自身屬性,同時複製時無法複製屬性的特性,而且訪問器屬性會被轉換成資料屬性,也無法複製源物件的原型

Object。create() 方法可以實現上面說的這些,配合getPrototypeOf,以及getOwnPropertyDescriptors實現全面淺複製

Object。create( Object。getPrototypeOf(obj), Object。getOwnPropertyDescriptors(obj) );

entries

分割物件

const obj = { foo: ‘bar’, baz: 42 };console。log(Object。entries(obj)); // [ [‘foo’, ‘bar’], [‘baz’, 42] ]// array like objectconst obj = { 0: ‘a’, 1: ‘b’, 2: ‘c’ };console。log(Object。entries(obj)); // [ [‘0’, ‘a’], [‘1’, ‘b’], [‘2’, ‘c’] ]// stringObject。entries(‘abc’) // [[‘0’, ‘a’], [‘1’, ‘b’], [‘2’, ‘c’]]Object。entries(100) // []

is

它用來比較兩個值是否嚴格相等,與嚴格比較運算子(===)的行為基本一致

Object。is(‘foo’, ‘foo’) // trueObject。is({}, {}) // false// 不同於 === 之處+0 === -0 //trueNaN === NaN // falseObject。is(+0, -0) // falseObject。is(NaN, NaN) // true

preventExtensions

讓一個物件變的不可擴充套件,也就是永遠不能再新增新的屬性&isExtensible 判斷一個物件是否可擴充套件

let empty = {}Object。isExtensible(empty) //trueempty。a = 1 //新增成功//將物件變為不可拓展Object。preventExtensions(empty)Object。isExtensible(empty) //falseempty。b = 2 //靜默失敗,不丟擲錯誤empty。a = 5 //修改a屬性值為5 修改成功

總結: 1。preventExtensions 可以讓這個物件變的不可擴充套件,也就是不能再有新的屬性。 2。需要注意的是不可擴充套件的物件的屬性通常仍然可以被刪除。 3。嘗試給一個不可擴充套件物件新增新屬性的操作將會失敗,不過可能是靜默失敗,也可能會丟擲 TypeError 異常(嚴格模式)。 4。Object。preventExtensions 只能阻止一個物件不能再新增新的自身屬性,仍然可以為該物件的原型新增屬性。

seal

將一個物件密封 isSealed 判斷一個物件是否為密封的

密封物件是指那些不能新增新的屬性,不能刪除已有屬性,以及不能修改已有屬性的可列舉性、可配置性、可寫性,但可能可以修改已有屬性的值的物件。

先講seal 方法:

var o2 = {b: 1}o2。d = 2 //新增成功var obj2 = Object。seal(o2);obj2 === o2 //true 方法返回原物件,棧指標指向同一塊記憶體Object。isSealed(o2) // trueo2。b = 111 //修改b屬性值成功o2。f = 222 //靜默失敗,屬性f沒有成功新增delete o2。b //靜默失敗,屬性b沒有成功刪除

講isSealed 方法:

let o = {};Object。isSealed(o) //false// 之後透過Object。preventExtensions方法將空物件設定為不可擴充套件。Object。preventExtensions(o);Object。isSealed(o) // true//但是如果為非空物件呢?let o2 = {a: 1}Object。preventExtensions(o2);Object。isSealed(o2) // false//因為屬性 a 是可配置的(configurable為true),所以不是密封的物件,修改方法如下:let o2 = {a: 1}Object。preventExtensions(o2);Object。defineProperty(o2, “a”, { configurable: false });Object。isSealed(o2) //true

總結: 1。密封一個物件會讓這個物件變的不能新增新屬性,且所有已有屬性會變的不可配置。 2。屬性不可配置的效果就是屬性變的不可刪除,以及一個數據屬性不能被重新定義成為訪問器屬性,或者反之。 3。但屬性的值仍然可以修改。 4。嘗試刪除一個密封物件的屬性或者將某個密封物件的屬性從資料屬性轉換成訪問器屬性,結果會靜默失敗或丟擲TypeError 異常(嚴格模式)。

freeze

凍結一個物件&isFrozen 判斷一個物件是否已經被凍結

凍結物件是指那些不能新增新的屬性,不能修改已有屬性的值,不能刪除已有屬性,以及不能修改已有屬性的可列舉性、可配置性、可寫性的物件。也就是說,這個物件永遠是不可變的。

1。先講freeze 方法:

let o3 = {a: 1}o3。b = 2 //新增屬性b成功Object。freeze(o3)Object。isFrozen(o3) //true 物件已被凍結o3。a = 2 //修改屬性a值失敗o3。c = 5 //新增屬性c失敗delete o3。b //刪除屬性b失敗

2。再講isfrozen 方法:

let o4 = {a: 1}o4。b = 2 // 新增屬性b成功Object。priventExtensions(o4)Object。defineProperties(o4, { a: {configurable: false, writable: false}, b: {configurable: false, writable: false}})Object。isFrozen(o4) //true o4 已經被凍結

hasOwnProperty

方法會返回一個布林值,指示物件自身屬性中是否具有指定的屬性let o = {a: 1 }o。hasOwnProperty(‘a’) //trueo。hasOwnProperty(‘b’) //false 物件自身沒有屬性bo。hasOwnProperty(‘toString’); //false 不能檢測物件原型鏈上的屬性如何遍歷一個物件的所有自身屬性,例子:var buz = { fog: ‘stack’};for (var name in buz) { if (buz。hasOwnProperty(name)) { console。log(“this is fog (” + name + “) for sure。 Value: ” + buz[name]); } else { console。log(name); // toString or something else }}

isPrototypeOf

// isPrototypeOf方法用於測試一個物件是否存在於另一個物件的原型鏈上function Foo() {}function Bar() {}function Baz() {}Bar。prototype = Object。create(Foo。prototype);Baz。prototype = Object。create(Bar。prototype);var baz = new Baz();console。log(Baz。prototype。isPrototypeOf(baz)); // trueconsole。log(Bar。prototype。isPrototypeOf(baz)); // trueconsole。log(Foo。prototype。isPrototypeOf(baz)); // trueconsole。log(Object。prototype。isPrototypeOf(baz)); // true

propertyIsEnumerable

指定的屬性是否可列舉

obj。propertyIsEnumerable(prop) prop為被測試的屬性名// 1。 一般情況下var o = {};var a = [];o。prop = ‘is enumerable’;a[0] = ‘is enumerable’;o。propertyIsEnumerable(‘prop’); // 返回 truea。propertyIsEnumerable(0); // 返回 true// 2。 瀏覽器內建物件var a = [‘is enumerable’];a。propertyIsEnumerable(0); // 返回 truea。propertyIsEnumerable(‘length’); // 返回 falseMath。propertyIsEnumerable(‘random’); // 返回 falsethis。propertyIsEnumerable(‘Math’); // 返回 false//3。 自身屬性和繼承屬性(原型鏈上propertyIsEnumerable不被考慮)var fn = function(){ this。prop = ‘123’;}fn。prototype = { prototypeProp: true}var o = new fn()o。propertyIsEnumerable(‘prop’) // trueo。propertyIsEnumerable(‘prototypeProp’) // false

caller

返回當前函式的呼叫者

function test(){ if(test。caller == null){ alert(“JavaScript頂層作用域呼叫了test()函式”); }else{ alert( test。caller + “函式呼叫了test()函式”); }};test(); // JavaScript頂層作用域呼叫了test()函式function callTest(){ test();}callTest(); // function callTest(){ test(); }函式呼叫了test()函式function callTest2(){ // setTimeout()或setInterval()中定時執行的函式也屬於頂層作用域呼叫 setTimeout(test, 5000); // JavaScript頂層作用域呼叫了test()函式}callTest2();

valueOf

需要返回物件的原始值

備註:js物件中的valueOf()方法和toString()方法非常類似,但是,當需要返回物件的原始值而非字串的時候才呼叫它,尤其是轉換為數字的時候。如果在需要使用原始值的上下文中使用了物件,JavaScript就會自動呼叫valueOf()方法。

const o = {a: 1, valueOf: function(){ return 123123 } }Number(o) //123123// 給大家出一個題const o2 = { x: 1, valueOf: function(){ return this。x++ }}if(o2 == 1 && o2 == 2 && o2 == 3){ console。log(‘down’) console。log(o2。x)}else{ console。log(‘faild’)}// Array:返回陣列物件本身var array = [“CodePlayer”, true, 12, -5];array。valueOf() === array; // true// Date:當前時間距1970年1月1日午夜的毫秒數var date = new Date(2013, 7, 18, 23, 11, 59, 230);date。valueOf() // 1376838719230// Number:返回數字值var num = 15。26540;num。valueOf() // 15。2654// 布林:返回布林值true或falsevar bool = true;bool。valueOf() === bool // true// new一個Boolean物件var newBool = new Boolean(true);// valueOf()返回的是true,兩者的值相等newBool。valueOf() == newBool // true// 但是不全等,兩者型別不相等,前者是boolean型別,後者是object型別newBool。valueOf() === newBool // false// Function:返回函式本身function foo(){ }foo。valueOf() === foo // truevar foo2 = new Function(“x”, “y”, “return x + y;”);foo2。valueOf() === foo2 // true// Object:返回物件本身var obj = {name: “張三”, age: 18};obj。valueOf() === obj // true// String:返回字串值var str = “http://www。365mini。com”;str。valueOf() === str // true// new一個字串物件var str2 = new String(“http://www。365mini。com”);// 兩者的值相等,但不全等,因為型別不同,前者為string型別,後者為object型別str2。valueOf() === str2 // false

getOwnPropertySymbols

在給定物件自身上找到的所有 Symbol 屬性的陣列。

var obj = {};var a = Symbol(“a”);var b = Symbol。for(“b”);obj[a] = “localSymbol”;obj[b] = “globalSymbol”;var objectSymbols = Object。getOwnPropertySymbols(obj);console。log(objectSymbols。length); // 2console。log(objectSymbols) // [Symbol(a), Symbol(b)]console。log(objectSymbols[0]) // Symbol(a)

toString toLocalString

toString 方法不做過多介紹

區別:

當被轉化的值是個時間物件時,toLocaleString會將轉化的結果以本地表示。

(new Date)。toString(); //“Mon Nov 06 2017 13:02:46 GMT+0800 (China Standard Time)”(new Date)。toLocaleString(); //“2017/11/6 下午1:03:12”

另外當被轉化的值是個時間戳時,toLocaleString會把時間戳每三位新增一個逗號,程式碼如下。

(Date。parse(new Date()))。toLocaleString() //“1,509,944,637,000”(Date。parse(new Date()))。toString() //“1509944643000”call apply bind 大家自己回去研究

length

Object。length //1

name

Object。name //“Object”