1.對象屬性

常規屬性

• 鍵為字符串的屬性
• 根據創建時的順序排序

const obj = {};obj.p1 = "p1"; obj.p6 = "p6"; obj.p2 = "p2";for (const p in obj) {console.log("property:", p); }

執行結果：

排序屬性

• 屬性鍵值為數字或者數字字符串的屬性
• 按照索引值大小升序排序

const obj = {};obj[1] = "p1"; obj[6] = "p6"; obj[2] = "p2"; //obj["1"] = "p1"; //obj["6"] = "p6"; //obj["2"] = "p2";for (const p in obj) {console.log("property:", p); }

執行結果：

同時存在先輸出排序屬性

const obj = {};obj.p1 = "str1"; obj.p6 = "str6"; obj.p2 = "str2";obj[1] = "num1"; obj[6] = "num6"; obj[2] = "num2";for (let p in obj) {console.log("property:", obj[p]); }

執行結果：

為什么要設計常規屬性和排序屬性

• 使用兩種線性結構保存（elements、properties），提升V8引擎屬性的訪問速度

2.屬性來源

• 靜態屬性，例如: Object.assign
• 原型屬性，例如: Object.prototype.toString
• 實例屬性，例如: function Person (name){ this.name = name }

// 1.函數作為構造實例 function Person(name, age) {this.name = name;this.age = age;this.getName = function () {return name;}; }Person.prototype.getAge = function () {return this.age; };const person = new Person();// 2.class 實例對象 class Person {constructor(name, age) {this.name = name;this.age = age;}getName = () => {return this.name;};getAge() {return this.age;} }const hasOwn = Object.hasOwnProperty; const print = console.log;const person = new Person(); print("getName:", hasOwn.call(person, "getName")); // 實例屬性 print("getAge:", hasOwn.call(person, "getAge")); // 原型屬性// 3.Object.defineProperty const obj = {}; Object.defineProperty(obj, "name", {value: "云牧", });console.log("name:", obj.name);// 云牧

3.屬性描述符

• Object.defineProperty 、 Object.defineProperties 設置屬性信息
• Object.getOwnPropertyDescriptor 、Object.getOwnPropertyDescriptors 獲取屬性描述信息* configurable：可配置（屬性能不能被刪除和重新通過 defineProperty 設置，但是當設置 writable 和 value 從 true 到 false 則是允許的）* enumerable：是否可枚舉* value：值* writable：是否可被更改* set：訪問器函數* get：訪問器函數
• 數據屬性: value + writable + configurable + enumerable
• 訪問器屬性：get + set + configurable + enumerable

默認 defineProperty 不傳第三個描述符

const obj = {};Object.defineProperty(obj, "name", {});console.log(obj.name); // undefined 且不能被改寫console.log(Object.getOwnPropertyDescriptor(obj, "name"));

執行結果如下：

Object.defineProperty的缺點

• 無法監聽數組變化
• 只能劫持對象的屬性，因此我們需要對對象的每個屬性進行遍歷。如果屬性也是對象，還得進行遞歸

4.對象限制

1.對象可擴展-Object.preventExtensions

• Object.preventExtensions：對象變的不可擴展，也就是永遠不能再添加新的屬性
• Object.isExtensible：判斷一個對象是否是可擴展

const obj = { name: "張三" };Object.preventExtensions(obj);// 不可以添加新屬性 obj.age = 2;console.log("obj：", obj); // obj： { name: '張三' } console.log(Object.isExtensible(obj)); // false

2.對象的封閉-Object.seal

• Object.seal：阻止添加新屬性＋屬性標記為不可配置
• Object.isSealed：檢查一個對象是否被密封

//2. Object.seal const object1 = {prop1: 11, };Object.seal(object1);// 不可以 添加屬性 object1.prop2 = 22; console.log(object1.prop2); // undefined// 不可以 刪除屬性 delete object1.prop1; console.log(object1.prop1); // 11

3.對象的凍結- Object.freeze

• Object.freeze：不加新屬性＋不可配置＋不能修改值
• Object.isFrozen：檢查一個對象是否被凍結

const obj = {prop1: 11, };Object.freeze(obj);// 添加 obj.prop2 = "prop2"; // 修改值 obj.prop1 = 33; // 刪除 delete obj.prop1;Object.defineProperty(obj, "prop1", {value: 10, });console.log(obj.prop1); console.log(obj.prop2); console.log(Object.isFrozen(obj));

4.總結

方法新增屬性修改描述符刪除屬性更改屬性值

Object.preventExtensions	x	√	√	√
Object.seal	x	x（修改 writable 為 false 可以）	x	√
Object.freeze	x	x（修改 writable 為 false 可以）	x	x

5.訪問對象原型

1.prototype

• prototype是一個對象
• 原型會形成原型鏈，原型鏈上查找屬性比較耗時，訪問不存在的屬性會訪問整個原型鏈

2._proto_

• 構造函數的原型
• null以外的對象均有 _proto_ 屬性
• Function 、class的實例有 prototype 以及 _proto_ 屬性
• 普通函數，祖上第三代上必為null

// 普通函數 function a() {} console.log(a.__proto__.__proto__.__proto__); // null// 作為構造函數 function Person() {} const person = new Person(); console.log(person.__proto__.__proto__.__proto__); // null// 普通對象 兩代 const obj = {}; console.log(obj.__proto__.__proto__); // null

3.instanceof

• 檢測構造函數（右側）的prototype屬性是否出現在某個實例對象（左側）的原型鏈上
• Object instanceof Function 、 Function instanceof Object

手寫instanceof

function instanceOf(instance, cclass) {let proto = instance.__proto__;let prototype = cclass.prototype;while (proto) {if (proto === prototype) return true;proto = proto.__proto__;}return false; }class Parent {} class Child extends Parent {} class CChild extends Child {} class Luren {} const cchild = new CChild();console.log(instanceOf(cchild, Parent)); // true console.log(instanceOf(cchild, Child)); // true console.log(instanceOf(cchild, CChild)); // true console.log(instanceOf(cchild, Object)); // true console.log(instanceOf(cchild, Date)); // false console.log(instanceOf(cchild, Luren)); // false

4.getPrototypeOf

• Object.getPrototypeof() 、 Reflect.getPrototypeOf()* 返回對象的原型
• 內部先toObject轉換，注意null和undefined沒有原型

5.setPrototypeOf

• Object.setPrototypeof() ， Reflect.setPrototypeOf()* 指定對象的原型
• 原型的盡頭是null

const obj = { a: 1 }; console.log(obj.toString());Object.setPrototypeOf(obj, null); // 設置原型為null console.log(obj.toString()); // obj.toString is not a function

6.isPrototypeOf

• Object.isPrototypeof 、 Object.prototype.isPrototypeof 、 Reflect.isPrototypeOf 、 Function.isPrototypeOf* 一個對象是否存在于另一個對象的原型鏈上

const print = console.log;print(Object.isPrototypeOf({})); // false print(Object.prototype.isPrototypeOf({})); // true期望左操作數是一個原型 print(Reflect.isPrototypeOf({})); // false print(Function.isPrototypeOf({})); // false

7.Object.create

• 使用現有的對象來提供新創建的對象的 __proto__
• 使用 Object.create(null) 可以創建一個沒有原型的純凈對象

6.對象屬性的遍歷

屬性分類：

• 普通屬性
• 原型屬性
• Symbol屬性
• 不可枚舉的屬性

遍歷方法：

方法名普通屬性不可枚舉屬性Symbol屬性原型屬性

for in	√	x	x	√
Obiect.keys	√	x	x	x
Object.getOwnPropertyNames	√	√	x	x
Object.getOwnPropertySymbols	x	√	√	x
Reflect.ownKeys	√	√	√	x

1.獲取非原型屬性

• Reflect.ownKeys = Object.getOwnPropertyNames + Object.getOwnPropertySymbols

const symbolSay = Symbol.for("say1");class Person {static flag = "人";static getFlag() {return Person.flag;}static [Symbol.for("symbolPro")]() {return "symbolPro";}constructor(name) {this.name = name;this[symbolSay] = "haha";}getName() {return this.name;}getAge = () => {return 15;}; }function getOwnPropertyStatics(_obj) {const KNOWN_STATICS = {name: true,length: true,prototype: true,caller: true,callee: true,arguments: true,arity: true,};let result = [];let keys = Object.getOwnPropertyNames(_obj);keys = keys.concat(Object.getOwnPropertySymbols(_obj));// const keys = Reflect.ownKeys(_obj)for (let i = 0; i < keys.length; ++i) {const key = keys[i];if (!KNOWN_STATICS[key]) {result.push(key);}}return result; }const staticProps = getOwnPropertyStatics(Person); console.log("非原型屬性:", staticProps); // 非原型屬性: [ 'getFlag', 'flag', Symbol(symbolPro) ]

2.獲取原型上所有屬性

• Reflect.ownKeys + 遞歸原型鏈

class Grand {gName = "Grand";gGetName() {return this.gName;} } Grand.prototype[Symbol.for("gAge")] = "G-12";class Parent extends Grand {pName = "123";pGetName() {return this.pName;} } Parent.prototype[Symbol.for("pAge")] = "G-11";class Child extends Parent {cName = "123";cGetName() {return this.cName;} }const child = new Child();let result = []; function logAllProperties(instance) {if (instance == null) return;let proto = instance.__proto__;while (proto) {result.push(...Reflect.ownKeys(proto));proto = proto.__proto__;} } logAllProperties(child); console.log("result：", result);

執行結果如下：

3.獲取所有不可枚舉的屬性

const symbolSalary = Symbol.for("ins_symbol_attr_salary");function Person(age, name) {this.ins_in_attr_age = age;this.ins_in_attr_name = name; }const person = new Person(100, "程序員");//Symbol 屬性 person[symbolSalary] = 6000; person["ins_no_enumerable_attr_sex"] = "男";// sex 不可枚舉 Object.defineProperty(person, "ins_no_enumerable_attr_sex", {enumerable: false, });Object.defineProperty(person, symbolSalary, {enumerable: false,value: 999, });// function getNoEnumerable(_obj) {//獲取原型對象const keys = Reflect.ownKeys(_obj);// const result = keys.filter(key=> {// return !Object.getOwnPropertyDescriptor(_obj, key).enumerable// })// return result;const result = keys.filter((key) => {return !Object.prototype.propertyIsEnumerable.call(_obj, key);});return result; }console.log(getNoEnumerable(person));

執行結果如下：

7.對象隱式轉換和注意事項

1.顯示轉換

• 通過 JS 轉換方法進行轉換、
• 比如 String 、 Number 、 parselnt/parseFloat 等

2.隱式轉換

• 編譯器自動完成類型轉換的方式就稱為隱式轉換，往往預期和傳入不一致往往就會發生* 二元 + 運算符（類型不一樣的相加）* 關系運算符 >、<、 >=、<=、==* 邏輯! 、if/while ，三目條件* 屬性鍵的遍歷、for in等* 模板字符串

3.對象隱式轉換規則

涉及到三個方法

• Symbol.toPrimitive* Object.prototype.valueOf* Object.prototype.toString* 如果[Symbol.toPrimitive](hint)方法存在，優先調用，無視valueOf和toSting方法* 否則，如果期望是"string" ——先調用obj.toString()如果返回不是原始值，繼續調用obj.valueOf()* 否則，如果期望是"number"或"default" 先調用 obj.valueOf() 如果返回不是原始值，繼續調用obj.toString()如果未定義[Symbol.toPrimitive](hint)，期望string，此時toString()和valueOf()都沒有返回原始值會拋出異常

const obj = {value: 10,valueOf() {return this;},toString() {return this;}, };console.log(10 + obj); // 報錯

4.Symbol.toPrimitive(hint)

• hint - “string”
• hint - “number”
• hint - “default”

hint - “string”

• window.alert(obj)
• 模板字符串`${obj}
• test[obj]=123

const obj = {[Symbol.toPrimitive](hint) {if (hint == "number") {return 10;}if (hint == "string") {return "hello";}return true;}, }; // alert, 瀏覽器 // window.alert(obj); // ${} console.log(`${obj}`); // 屬性鍵 obj[obj] = 123; console.log(Object.keys(obj));

執行結果：

hint - “number”

• 一元+，位移
• -、*、/ 等關系運算符
• Math.pow、String、prototype.slice 等很多內部方法

const obj = {[Symbol.toPrimitive](hint) {if (hint == "number") {return 10;}if (hint == "string") {return "hello";}return true;}, };// 一元+ console.log("一元+:", +obj);// 位移運算符 console.log("位移運算符", obj >> 0);// 除減算法, 沒有 + 法，之前已經單獨說過轉換規則 console.log("減法:", 5 - obj); console.log("乘法:", 5 * obj); console.log("除法:", 5 / obj);// 邏輯 大于，小于，大于等于, 沒有等于， 有自己的一套規則 console.log("大于:", 5 > obj); console.log("大于等于:", 5 >= obj);// 其他期望是整數的方法 console.log("Math.pow:", Math.pow(2, obj));

執行結果如下：

hint - “default”

• 二元＋
• == 、!=

const obj = {[Symbol.toPrimitive](hint) {if (hint == "number") {return 10;}if (hint == "string") {return "hello";}return true;}, };console.log("相加:", 5 + obj); // 相加: 6 console.log("等等與:", 5 == obj); // 等等與: false console.log("不等于:", 5 != obj); // 不等于: true

5.ValueOf 和 toString

來幾個小練習大家自己想想

const user = {name: "John",age: 10,toString() {return this.name;},valueOf() {return this.age;}, };console.log("user:", +user); // user: 10 console.log("user:", `${user}`); // user: John const user = {name: "John",age: 10,toString() {return this.name;},valueOf() {return this;}, };console.log("user:", +user); // NaN // 相當于 console.log(+"John"); // NaN const user = {name: "John",age: 10,toString() {return this;},valueOf() {return this.age;}, };Object.prototype.toString = undefined;console.log("user:", `${user}`); // user: 10 const obj = {value: 10,toString: function () {return this.value + 10;},valueOf: function () {return this.value;}, };obj[obj] = obj.value;console.log("keys:", Object.keys(obj)); // keys: [ '20', 'value', 'toString', 'valueOf' ] console.log("${obj}:", `${obj}`); // ${obj}: 20 console.log("obj + 1:", obj + 1); // obj + 1: 11 console.log('obj + "":', obj + ""); // obj + "": 10

特殊Date

• hint是default ，是優先調用toString，然后調用valueOf

const date = new Date();console.log("date toString:", date.toString()); console.log("date valueOf:", date.valueOf());console.log(`date str:`, `${date}`); console.log(`date number:`, +date);console.log(`date +:`, date + 1);

執行結果如下：

8.JSON和toJSON

• 嚴格意義上JSON對象是不合理，JSON是文本協議
• 全局作用域下JSON，名為JSON，是Object對象
• JSON是一種輕量級的、基于文本的、與語言無關的語法，用于定義數據交換格式
• 它來源于ECMAScript編程語言，但是獨立于編程語言

JSON特征

• JSON就是一串字符串，使用特定的符號標注* {}雙括號表示對象* []中括號表示數組* ""雙引號內是屬性鍵或值?### 屬性鍵

• 只能是字符串

• 必須雙引號包裹

JSON值

• object
• array
• number（只能十進制）
• string
• true
• false
• null

合格JSON

`["你", "我", "她"]``{ "name": "云牧", "age": 18 }``{ "IDS": ["123", "456"] }``{ "name": null }``{}` `[]`

不合格JSON

` {"name":"云牧",[Symbol.for("sex")]: 1 }`` { name: "云牧", 'age': 32} `` {"name": "云牧","age": undefined }``[-10, 0xDDFF]` ` { "name": "云牧","created": new Date(),"price": 18"getPrice": function() { return this.price;} }`` { "name":"云牧", "age": 32, } `

JSON.stringify()

• 語法:JSON.stringify(value[, replacer [, space]])
• 第二個參數replacer：過濾屬性或者處理值* 如果該參數是一個數組：則只有包含在這個數組中的屬性名才會被序列化到最終的JSON字符串中* 如果該參數是一個函數︰則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理* 如果該參數為null或者未提供:，則對象所有的屬性都會被序列化
• 第三個參數space：美化輸出格式

const person1 = {name: "云牧",age: 18,birth: "2002-01-01", };//replacer 數組 console.log(JSON.stringify(person1, ["name", "age"])); // {"name":"云牧","age":18}const person2 = {name: "云牧",age: 18,birth: "2002-01-01", };//replacer 方法 const jsonString = JSON.stringify(person2, function (key, value) {if (typeof value === "string") {return undefined;}return value; });console.log(jsonString); // {"age":18}// space 美化格式 const person3 = {name: "云牧",age: 18,birth: "2002-01-01", }; const a = JSON.stringify(person3); console.log(a); // {"name":"云牧","age":18,"birth":"2002-01-01"}const person4 = {name: "云牧",age: 18,birth: "2002-01-01", }; const c = JSON.stringify(person4, null, "\t"); console.log(c); // { // "name": "云牧", // "age": 18, // "birth": "2002-01-01" // }

序列化undefined、任意的函數、symbol

• 作為對象屬性值，自動忽略
• 作為數組，序列化返回null
• 單獨序列化時，返回undefined

其他規則

• Date返回 ISO 字符串
• 循環引用報錯
• NaN、Infinity、null都會作為null
• Biglnt報錯
• Map、Set、WeakMap等對象，僅序列化可枚舉屬性

// 自動忽略 const data1 = {a: "test1",b: undefined,c: Symbol("test2"),fn: function () {return true;}, }; console.log(JSON.stringify(data1)); // {"a":"test1"}//數組返回null const data2 = ["test1",undefined,function aa() {return true;},Symbol("test2"), ]; console.log(JSON.stringify(data2)); // ["test1",null,null,null]//返回undefined const a1 = JSON.stringify(function a() {console.log("test1"); }); console.log("a1：", a1); // a1： undefined const a2 = JSON.stringify(undefined); console.log("a2：", a2); // a2： undefined const a3 = JSON.stringify(Symbol("test2")); console.log("a3：", a3); // a3： undefined// Date console.log(JSON.stringify({ now: new Date() })); // {"now":"2022-09-12T00:17:54.812Z"}// NaN 和 Infinity 以及null console.log(JSON.stringify(NaN)); // null console.log(JSON.stringify(Infinity)); // null console.log(JSON.stringify(null)); // null//轉換為對應的原始值。 console.log(JSON.stringify([new Number(2), new String("test"), new Boolean(false)])); // [2,"test",false]//僅序列化可枚舉屬性 const a = JSON.stringify(Object.create(null, {test1: { value: "test1", enumerable: false },test2: { value: "test2", enumerable: true },}) ); console.log(a); // {"test2":"test2"}// BigInt 報錯 // const c = { // test: 1n, // }; // console.log(JSON.stringify(c));

JSON.parse()

• 注意:第二個參數函數reviver ( k, v )* k代表屬性鍵，v代表屬性值，如果返回undefined則會從當前的屬性刪除

const jsonStr = `{ "name": "帥哥", "age":18, "isFans": true,"IDCard": "xxxxxxxxxxxxxxxxxx" } `; // 保密身份證 const obj = JSON.parse(jsonStr, function (key, value) {if (key == "IDCard") {return undefined;} else {return value;} });console.log(obj); // { name: '帥哥', age: 18, isFans: true }

注意:遍歷順序

const jsonStr = `{"name": "牙膏","count": 10, "orderDetail": {"createTime": 1632996519781,"orderId": 8632996519781,"more": {"desc": "描述"}} }`;JSON.parse(jsonStr, function (k, v) {console.log("key:", k);return v; });

執行結果如下：

注意:this

const jsonStr = `{"name": "云牧","orderDetail": {"createTime": 1632996519781} }`;JSON.parse(jsonStr, function (k, v) {console.log("key:", k, ",this:", this);return v; });

執行結果如下：

toJSON

• 對象擁有toJSON方法，toJSON會覆蓋對象默認的序列化行為

const product = {name: "牙膏",orderDetail: {createTime: 1632996519781,},toJSON() {return {name: "云牧",};}, };console.log(JSON.stringify(product)); // '{"name":"云牧"}'

使用場景

• 請求接口發送數據，接收數據
• 本地存儲
• 深克隆對象

9.學習自檢

題目一

const obj = {},objA = { propertyA: "A" },objB = { propertyB: "B" };obj[objA] = "objectA"; obj[objB] = "ObjectB";for (let [p, v] of Object.entries(obj)) {console.log("p:", p, ", v:", v); }

執行結果：

• Object.entires :迭代器，能獲取鍵值對
• 對象鍵的特性∶本質上是字符串，如果是數字，轉換字符串
• 隱式轉換︰對象的隱式轉換，Symbol.toPrimitive，valueOf，toString()

const obj = {},objA = {propertyA: "A",toString() {return "objA";},},objB = {propertyB: "B",valueOf() {return "objB";},};obj[objA] = "objectA"; obj[objB] = "ObjectB";for (let [p, v] of Object.entries(obj)) {console.log("p:", p, ", v:", v); // 優先調用toString // p: objA , v: objectA // p: [object Object] , v: ObjectB }

題目二

const person = {name: "二哈", }; const person2 = Object.create(person); delete person2.name;console.log(person2.name);

執行結果：

題目三

const val = (+{} + [])[+[]]; console.log(val);/*(+{} + [])[+[]] // +{}=> NaN (NaN + [])[+[]] // [] 隱式轉換 '' (NaN + '')[+[]] // NaN + '' => 'NaN' ('NaN')[+[]] // +[] => 0 ('NaN')[0] // 'N'*/

題目四

const proto = {name: "原型",arr: [1, 2], }; const person = Object.create(proto); person.name = "實例"; person.arr.push(3);console.log(person.name); console.log(proto.name);console.log(person.arr); console.log(proto.arr);

執行結果：

題目五

const toString = Object.prototype.toString; function getObjectType(obj) {return toString.call(obj).slice(8, -1); } const obj = String.prototype; console.log(typeof obj); console.log(getObjectType(obj));

執行結果：

題目六

let a = { n: 1 }; a.x = a = { n: 2 };// 求a.x console.log(a.x);

執行結果：

題目七

const proto = {name: "p_parent",type: "p_object",[Symbol.for("p_address")]: "地球", };const ins = Object.create(proto); Object.defineProperty(ins, "age", {value: 18, }); ins.sex = 1; ins[Symbol.for("say")] = function () {console.log("say"); };const inKeys = []; for (let p in ins) {inKeys.push(p); }console.log(inKeys); console.log(Reflect.ownKeys(ins));

執行結果：

最后

整理了一套《前端大廠面試寶典》，包含了HTML、CSS、JavaScript、HTTP、TCP協議、瀏覽器、VUE、React、數據結構和算法，一共201道面試題，并對每個問題作出了回答和解析。

有需要的小伙伴，可以點擊文末卡片領取這份文檔，無償分享

部分文檔展示：

文章篇幅有限，后面的內容就不一一展示了

有需要的小伙伴，可以點下方卡片免費領取

總結

以上是生活随笔為你收集整理的对象认知全提升，成为 JS 高手的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。