JavaScript之对象(一)

简介: JavaScript之对象(一)
看红宝书+查资料,重新梳理JavaScript的知识。

对象的属性

数据属性

数据属性有四个特性。通过特性,可以设置属性。如通过[[Enumerable]]false就能不让该属性被枚举。另外,为了区别是不是特殊的属性,规范会用两个中括号将特性的名称括起来,如[[Writable]]

  • [[Configurable]]: 表示属性是否可以被设置。如被delete,以及能否修改特性等。
  • [[Enumerable]]: 表示属性是不是可被枚举的。
  • [[Writable]]: 表示属性的值是否能被修改
  • [[Value]]: 表示属性实际值

如果我们直接使用字面量的形式将属性显示添加到对象之后,[[Configurable]][[Enumerable]][[Writable]]会被设置为true,而[[Value]]特性则会被设置为指定的值。

let person = {
    name: 'clz'
}

设置成不可修改、不可定义的时候,修改、删除属性都不会报错,不过也不会成功,会被忽略,相当于什么都没干

Object.defineProperty(person, "name", {
    writable: false,        // 默认值为false,所以去掉也是一样的结果
    configurable: false,    // 默认值为false,所以去掉也是一样的结果
    value: "clz",
});
​
console.log(person);
​
person.name = "czh";
console.log(person);
​
delete person.name
console.log(person);

image-20220423172621243

如果去掉上面注释的两行,也能得到一样的结果,因为默认值就是false

如果设置为true,则结果大不相同,因为此时能够修改属性,也能够设置属性了。

let person = {};
​
Object.defineProperty(person, "name", {
    writable: true,
    configurable: true,
    value: "clz",
});
​
console.log(person);
​
person.name = "czh";
console.log(person);
​
delete person.name
console.log(person);

image-20220423172933796

上面我们可以发现,当我们设置成不可修改时,修改只是不会生效,并不会报错。所以如果我们想要修改设置为不可修改的属性的话,可以使用严格模式,此时还强行修改的话,就会报错。

能反复调用Object.defineProperty,但是如果那四个特性有修改就会报错,不知道有啥意义

let person = {};
​
Object.defineProperty(person, "name", {
  value: "clz",
});
console.log(person);
​
Object.defineProperty(person, "name", {
  value: "czh",
});
console.log(person);

image-20220423170434625

访问器属性

  • [[Configurable]]
  • [[Enumerable]]
  • [[Get]]: 获取函数,在读取属性时调用,默认值为 undefined
  • [[Set]]: 设置函数,在写入函数是调用,默认值是undefined

访问器属性和数据属性中不重合的特性不能同时使用,比如,如果使用settergetter,那再使用writablevalue就会报错。至于为什么会报错,就是因为会有冲突,比如既设置了valuegetter,那么这个时候应该怎么获取数据呢?所以多一事不如少一事,数据属性和访问器属性不重合的特性不能同时使用。(后半部分是猜想)

let person = {
  name_: "clz",
};
​
Object.defineProperty(person, "name", {
  // writable: false,        // 互不相容,如果添加这个则会导致报错
  get() {
    console.log("getter");
    return this.name_;
  },
  set(newValue) {
    console.log("setter");
    this.name_ = newValue;
  },
});
​
console.log(person);
console.log(person.name);
​
console.log("%c%s", "color: red;font-size:24px;", "===============");
​
person.name = "czh";
console.log(person);
console.log(person.name);

image-20220423171002134

通过观察上面的例子,不难发现,在我们获取数据或者修改数据时,会进入到getset属性中,所以通过这两个属性就能实现数据的劫持。

定义多个属性

使用Object.defineProperty只能定义一个属性的特殊属性。我们可以通过Object.defineProperties定义多个属性。

let person = {};
​
Object.defineProperties(person, {
    name_: {
        value: "clz",
    },
    name: {
        get() {
            console.log("getter");
            return this.name_;
        },
        set(newValue) {
            console.log("setter");
            this.name_ = newValue;
        },
    },
});
​
console.log(person);
console.log(person.name);
​
console.log("%c%s", "color: red;font-size:24px;", "===============");
​
person.name = "czh";
console.log(person);
console.log(person.name);

image-20220423171726675

读取属性的特性

在上面我们已经知道怎样定义属性,以设置属性的特性了,有没有什么方法可以读取属性的特性呢?

通过Object.getOwnPropertyDescriptor就可以读取属性的特性,其中第一个参数是对象,第二个参数是要读取特性的属性。

let person = {};
Object.defineProperties(person, {
    name_: {
        value: "clz",
    },
    name: {
        get: function () {
            return this.name_;
        },
        set: function (newValue) {
            this.name_ = newValue;
        },
    },
});
​
let descriptor = Object.getOwnPropertyDescriptor(person, "name_");
console.log(descriptor);
​
descriptor = Object.getOwnPropertyDescriptor(person, "name");
console.log(descriptor);

image-20220423191037056

通过Object.getOwnPropertyDescriptors(person)可以获取所有属性的特性(对象形式)

let person = {};
Object.defineProperties(person, {
    name_: {
        value: "clz",
    },
    name: {
        get: function () {
            return this.name_;
        },
        set: function (newValue) {
            this.name_ = newValue;
        },
    },
});
​
let descriptors = Object.getOwnPropertyDescriptors(person);
console.log(descriptors);

image-20220423191225329

目录
相关文章
|
18天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
21 3
|
21天前
|
JavaScript 前端开发 开发者
JavaScript的`Math`对象
【4月更文挑战第21天】JavaScript的`Math`对象
18 3
|
1天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
7 1
|
1天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
5天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
14 1
|
5天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
10 1
|
12天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
12天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
12天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
12天前
|
JavaScript 前端开发
JavaScript 日期对象
JavaScript 日期对象