JS学习笔记 (三) 对象进阶

likepoems

发布于 2023-03-04 08:42:12

49600

代码可运行

文章被收录于专栏：学习笔记分享学习笔记分享

运行总次数：0

代码可运行

本文最后更新于 128 天前，其中的信息可能已经有所发展或是发生改变。

1、JS对象

1.1 JS对象特征

1、JS对象是基本数据数据类型之一，是一种复合值，可以看成若干属性的集合。

属性是名值对的形式（key:value）
属性名是字符串，因此可以把对象看成是字符串到值的映射

2、对象除了可以保持自有的属性，还可以从一个称为原型的对象继承属性。其中，原型链继承是JavaScript的核心特征。 3、对象是动态的，可以增加或删除属性。 4、除了字符串、数值、true、false、null和undefined，其它值都是对象。 5、对象最常见的用法是对其属性进行创建、设置、查找、删除、检测和枚举等操作。

属性值是任意JavaScript值，或者是一个getter或setter函数
每个属性还有一些与之相关的值，称为“属性特征。分别为：可写（writable attribute，表明是否可以设置属性的值）、可枚举（enumerable attribute，表明是否可以通过for/in结构返回该属性）和可配置（configurable attribute，表明是否可以删除或修改该属性）。

6、每个对象还拥有三个相关的对象特性。分别为：

对象的原型（prototype）指向另一个对象，该对象的属性会被当前对象继承）
对象的类（class）一个标识对象类型的字符串
对象的扩展标记（extensible flag）指明了是否可以向该对象添加新属性）。 7、对象分为内置对象、宿主对象、自定义对象。 8、属性分为自由属性和继承属性。

1.2 JS创建对象

1.2.1 通过字面量创建对象（key:value）

对象字面量是一个表达式，每次运算都会创建一个新的对象，其中的属性值也会重新计算。如：

let empty = {};
let point = { x: 0, y: 0 };
let book = {
    "first title": "JavaScript",
    "second-title": "HTML5 CSS3",
    for: "readers",  
    author: {
        firstname: "xiao",
        lastname: "ming",
    },
};

在这个例子里，先创建了一个空对象，没有任何属性，然后创建了point对象，赋予了它两种属性，分别是x和y，book对象，赋予了first title，second-title，for，author四个属性，属性名可以是字符串也可以是对象。若属性名有空格或特殊字符，必须用字符串表示。属性名可以是保留字，但尽量避免。当然，通过字面量创建还可以先给对象留空{}，通过对象名.属性名或对象名["属性名"]来进行对象的赋值，如：

let book = {}
book.author = {
    firstname: "xiao",
    lastname: "ming",
},
book.for = "readers"
book.salestate = "good"
book["first title"] = "JavaScript",
book["second-title"] = "HTML5 CSS3"

1.2.2 通过new创建对象

通过new调用构造函数来创建并初始化一个新对象，通过对象名.属性名或对象名["属性名"]来进行对象赋值。 JavaScript语言核心中的原始类型都包含内置构造函数，如Object()、Array()、Date()等，如：

let book = new Object()
book['author'] = {
    firstname: "xiao",
    lastname: "ming",
},
book.for = "readers"
book.salestate = "good"
book['first title'] = "JavaScript",
book['second-title'] = "HTML5 CSS3"
console.log(book);

1.2.3 通过Object.create()创建对象

对象也可以用Object.create(proto, [ propertiesObject ])方法创建，其中，proto指这个对象的原型对象，propertiesObject 可选参数，用以对对象的属性进行描述。该方法可以在创建对象时指定原型或若干属性的对象。如：

let obj1 = Object.create({ x: 1, y: 2 });
// obj1继承了属性x和y。   
let obj2 = Object.create(null);
//obj2不继承任何属性和方法。   
let obj3 = Object.create(Object.prototype);
//obj3是一个普通的空对象。

1.3 原型

1、每一个JavaScript对象（null除外）都和原型对象相关联。每一个对象都从原型继承属性。 2、所有通过对象字面量创建的对象都具有同一个原型对象，可通过Object.prototype获得原型对象的引用。 3、通过new和构造函数创建的对象的原型就是构造函数的prototype属性引用的对象。如：

let book = new Object()
book['author'] = {
    firstname: "xiao",
    lastname: "ming",
}
console.log(Object.prototype); // [Object: null prototype] {}
console.log(Object.getPrototypeOf(book)); // [Object: null prototype] {}
console.log(book.__proto__); // [Object: null prototype] {}

4、极少数的对象没有原型，如：Object.prototype，它不继承任何属性。 5、所有内置构造函数都具有一个继承自Object.prototype的原型。

Array.prototype的属性继承自Object.prototype
这种通过层级的原型继承形成的链接，称为“原型链”

示例：

let obj = { value: 100 };
Object.prototype.sex= "boy";
console.log(obj.sex); // boy
let arr = [1, 2, 3, 4];
console.log(arr.sex);  //  继承了Object新添加的sex属性，输出boy

1.4 对象的属性

1.4.1 对象中属性的访问方式

若存在一个对象person，里面有fullname，sex，age属性。要访问这些属性，可以通过person.sex等进行访问。也可以通过person[‘sex’]，如：

let person = Object.create({
    fullname:"小明",
    age: 12,
    sex: "男"
})
console.log(person.fullname); // 小明
console.log(person['age']); // 12
console.log(person['sex']); // 男

1.4.2 作为关联数组的对象

举个例子：

let result = {
    data1: {
        name: "Language",
        value: "Chinese",
    },
    data2: {
        name: "Country",
        value: "China",
    },
    data3: {
        name: "Gender",
        value: "Male",
    },
};
for (let i = 1; i < 4; i++) {
    let data = result["data" + i];
    console.log(`${data.name}-->${data.value}`);
}

输出结果： Language–>Chinese Country–>China Gender–>Male

1.4.3 对象中属性的继承（原型链继承）

原型链继承是将父类的实例作为子类的原型，继承后父类方法可以复用，但是父类的引用属性会被所有子类实例共享，并且子类构建实例时不能向父类传递参数。如：

function Parent() {
    this.parentName = '父级函数';
}
Parent.prototype.getParentName = function () {
    return this.parentName;
};
function Child() {
    this.childName = '子级函数';
}
// 继承 Parent
Child.prototype = new Parent();
Child.prototype.getChildName = function () {
    return this.childName;
};
let a = new Child();
console.log(a.getParentName());

运行结果：父级函数

1.4.4 属性访问错误

查询一个不存在的属性并不会报错，如果在对象o自身的属性或继承的属性中均未找到属性x，属性访问表达式o.x返回undefined。

但是，如果对象不存在，那么试图查询这个不存在的对象的属性就会报错。

null和undefined值都没有属性，因此查询这些值的属性会报错。举个例子：改变前：

let one = { two: { three: 3 } };
console.log(one.two.three);
if (one) {
    if (one.two) {
        if (one.two.three) console.log(one.two.three);
    }
}
console.log(one && one.two && one.two.three);
console.log(one?.two?.three); // Null传导运算符

输出： 3 3 3 3

改变后：

let one = {};
console.log(one.two.three);
if (one) {
    if (one.two) {
        if (one.two.three) console.log(one.two.three);
    }
}
console.log(one && one.two && one.two.three);
console.log(one?.two?.three); // Null传导运算符

输出结果： TypeError: Cannot read property ‘three’ of undefined

在以下场景下给对象o设置属性p会失败：

o中的属性p是只读的：不能给只读属性重新赋值(defineProperty()方法中有一个例外，可以对可配置的只读属性重新赋值)。
o中的属性p是继承属性，且它是只读的：不能通过同名自有属性覆盖只读的继承属性。
o中不存在自有属性p：o没有使用setter方法继承属性p，并且o的可扩展性(extensible attribute)是false。如果o中不存在p，而且没有setter方法可供调用，则p一定会添加至o中。但如果o不是可扩展的，那么在o中不能定义新属性。

1.4.5 删除属性方法

delete运算符可以删除对象的属性。

它的操作数应当是一个属性访问表达式
delete只是断开属性和宿主对象的联系，而不会去操作属性中的属性。
delete运算符只能删除自有属性，不能删除继承属性。若要删除继承属性必须从定义这个属性的原型对象上删除它，而且这会影响到所有继承自这个原型的对象。
delete不能删除那些可配置性为false的属性。某些内置对象的属性是不可配置的，比如通过变量声明和函数声明创建的全局对象的属性。

举个例子：

let book = new Object()
book['author'] = {
    firstname: "xiao",
    lastname: "ming",
}
book.name="致明天",
book.salenum=123456,
book.price=12
console.log("删除前：",book);
delete book.author;
delete book.toString()
console.log("删除后：",book);

运行结果：
 删除前： {
 author: { firstname: ‘xiao’, lastname: ‘ming’ },
 name: ‘致明天’,
 salenum: 123456,
 price: 12
 }
 删除后： { name: ‘致明天’, salenum: 123456, price: 12 }

1.4.6 检测属性方法

判断某个属性是否存在于某个对象中，可以通过in运算符、hasOwnPreperty()和propertyIsEnumerable()方法，甚至也可以仅通过属性查询。如：

let o = { x: 1 };
console.log("x" in o); // true
console.log("y" in o); // false
console.log("toString" in o); // true

console.log(o.hasOwnProperty("x")); // true
console.log(o.hasOwnProperty("y")); // false
console.log(o.hasOwnProperty("toString")); // false

console.log(o.propertyIsEnumerable("x")); // true
console.log(o.propertyIsEnumerable("y")); // false
console.log(o.propertyIsEnumerable("toString")); // false
console.log(Object.prototype.propertyIsEnumerable("toString")); // false

1.4.7 枚举属性方法

1、for/in循环可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承的属性)，把属性名称赋值给循环变量。注意：对象继承的内置方法不可枚举的，但在代码中给对象添加的属性都是可枚举的。

let obj = Object.create({ a: 10, b: 20 });
obj.c = 30;
for (let i in obj) {
    console.log(i, obj[i]);
}

输出结果： c 30 a 10 b 20

2、利用for/in循环，可以对两个对象进行各种形式的合并。 3、Object.keys()，它返回一个数组，这个数组由对象中可枚举的自有属性的名称组成。如：

let obj = Object.create({ a: 10, b: 20 });
obj.c = 30;
obj.d = 40;
console.log(Object.keys(obj));

输出结果： [ ‘c’, ‘d’ ]

4、Object.getOwnPropertyNames()，它和Ojbect.keys()类似，只是它返回对象的所有自有属性的名称，而不仅仅是可枚举的属性。如：

let obj = Object.create({ a: 10, b: 20 });
obj.c = 30;
obj.d = 40;
console.log(Object.getOwnPropertyNames(obj));

输出结果： [ ‘c’, ‘d’ ]

1.4.8 属性的getter和setter

对象属性是由名字、值和一组特性构成的。在es5中，属性值可以被getter和setter两种方法替换，由getter和setter定义的属性称为存储器属性，它不同于数据属性，数据属性只是简单的一个值。
当程序查询存取器属性的值时，JS调用getter方法(无参数)，这个方法的返回值就是属性存取表达式的值。
当程序设置一个存取器属性的值时，JS调用setter方法，将赋值表达式右侧的值当做参数传入setter。从某种意义上讲，这个方法负责“设置”属性值。可以忽略setter方法的返回值。

实例：

let circle = {
    r: 10,
    get round() {
        return 2 * this.r * Math.PI
    },
    set round(v) {
        this.r = v / 2 / Math.PI
    },
    get area() {
        return Math.PI * this.r ** 2
    }
}
console.log(circle.round, circle.area)
circle.round = 60
console.log(circle.r, circle.area)

let circle1 = Object.create(circle);
// 和数据属性一样，存取器属性是可以继承的。
circle1.r = 20;
console.log(circle1.round);
circle1.round = 500;
console.log(circle1.r, circle1.area);

输出结果： 62.83185307179586 314.1592653589793 9.549296585513721 286.47889756541167

125.66370614359172 79.57747154594767 19894.367886486918

1.4.9 属性的特性

1、除了包含名字和值之外，属性还包含一些标识它们可写、可枚举和可配置的特性。

可以通过这些API给原型对象添加方法，并将它们设置成不可枚举的，这让它们看起来更像内置方法。
可以通过这些API给对象定义不能修改或删除的属性，借此“锁定”这个对象。

2、数据属性的4个特性值(value)、可写性(writable)、可枚举性(enumerable)和可配置性(configurable)。

3、存取器属性不具有值(value)特性和可写性。

它们的可写性是由setter方法存在与否决定的。
因此存取器属性的4个特性是读取(get)、写入(set)、可枚举性和可配置性。

4、通过一个名为“属性描述符”(property descriptor)的对象实现属性特性的查询和设置操作。

这个对象代表那4个特性。
描述符对象的属性和它们所描述的属性特性是同名的。因此，数据属性的描述符对象的属性有value、writable、enumerable和configurable。
Object.getOwnPropertyDescriptor()可以获得某个对象特定属性的属性描述符。
对于继承属性和不存在的属性，返回undefined。

如：

let circle = {
    r: 10,
    get round() {
        return 2 * this.r * Math.PI
    },
    set round(v) {
        this.r = v / 2 / Math.PI
    },
    get area() {
        return Math.PI * this.r ** 2
    }
}

let circle1 = Object.create(circle);

console.log(Object.getOwnPropertyDescriptor(circle, "r"));
console.log(Object.getOwnPropertyDescriptor(circle1, "r"));

输出： { value: 10, writable: true, enumerable: true, configurable: true } undefined

5、要想设置属性的特性，或者想让新建属性具有某种特性，则需要调用Object.definePeoperty()，传入要修改的对象、要创建或修改的属性的名称以及属性描述符对象。传入Object.defineProperty()的属性描述符对象不必包含所有4个特性。如：

let o = {};
Object.defineProperty(o, "x", {
  value: 10,
  writable: true,
  enumerable: false,
  configurable: false,
});

console.log(o.x, Object.keys(o)); // 10 []

6、如果要同时修改或创建多个属性，使用Object.defineProperties()。第一个参数是要修改的对象，第二个参数是一个映射表，它包含要新建或修改的属性的名称，以及它们的属性描述符。如：

let p = Object.defineProperties(
    {},
    {
        x: { value: 1, writable: true, enumerable: true, configurable: true },
        y: { value: 1, writable: true, enumerable: true, configurable: true },
        r: {
            get: function () {
                return Math.hypot(this.x, this.y);
            },
            enumerable: true,
            configurable: true,
        },
    }
);

1.5 对象的特性和序列化对象

1.5.1 原型属性

原型属性是在实例对象创建之初就设置好的。

原型属性是在实例对象创建之初就设置好的

将对象作为参数传入Object.getPrototypeOf()可以查询它的原型

要想检测一个对象是否是另一个对象的原型(或处于原型链中)，使用isPrototypeOf()方法。（和instanceof运算符非常类似）如：

let o = { x: 1 };
let p = Object.create(o);
p.y = 2;
console.log(Object.getPrototypeOf(p)); // { x: 1 }
console.log(o.isPrototypeOf(p)); // true

1.5.2 可扩展性

对象的可扩展性用以表示是否可以给对象添加新属性。

所有内置对象和自定义对象都是显式可扩展的。
宿主对象的可扩展性是由JavaScript引擎定义的。

1.5.3 序列化对象

1、对象序列化是指将对象的状态转换为字符串，也可将字符串还原为对象。 2、ES5提供了内置函数JSON.stringify()和JSON.parse()用来序列化和反序列化JavaScript对象。 3、注意事项

函数、RegExp、Error对象和undefined值不能序列化和还原。
JSON.stringify()只能序列化对象可枚举的自有属性
对于一个不能序列化的属性来说，在序列化后的输出字符串中会将这个属性省略掉

1.6 Object 构造函数的方法

Object构造函数提供了如下方法：

方法	描述
Object.assign()	通过复制一个或多个对象来创建一个新的对象。
Object.create()	使用指定的原型对象和属性创建一个新对象。
Object.defineProperty()	给对象添加一个属性并指定该属性的配置。
Object.defineProperties()	给对象添加多个属性并分别指定它们的配置。
Object.entries()	返回给定对象自身可枚举属性的 [key, value] 数组。
Object.freeze()	冻结对象，其他代码不能删除或更改任何属性。
Object.getOwnPropertyDescriptor()	返回对象指定的属性配置。
Object.getOwnPropertyNames()	返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名
Object.getOwnPropertySymbols()	返回一个数组，它包含了指定对象自身所有的符号属性。
Object.getPrototypeOf()	返回指定对象的原型对象。
Object.is()	比较两个值是否相同。所有 NaN 值都相等（这与==和===不同）。
Object.isExtensible()	判断对象是否可扩展。
Object.isFrozen()	判断对象是否已经冻结。
Object.isSealed()	判断对象是否已经密封。
Object.keys()	返回一个包含所有给定对象自身可枚举属性名称的数组。
Object.preventExtensions()	防止对象的任何扩展。
Object.seal()	防止其他代码删除对象的属性。
Object.setPrototypeOf()	设置对象的原型（即内部 [[Prototype]] 属性）。
Object.values()	返回给定对象自身可枚举值的数组。