木灵鱼儿

木灵鱼儿

阅读:191

最后更新:2022/11/27/ 22:57:08

属性描述符

简介

在 ES5 之前,JavaScript 语言本身并没有提供可以直接检测属性特性的方法,比如判断属性是否是只读。

但是从 ES5 开始,所有的属性都具备了属性描述符。

var myObject = {
    a: 2
};

Object.getOwnPropertyDescriptor(myObject, "a");
// {
// value: 2,
// writable: true,
// enumerable: true,
// configurable: true
// }

输出的这个对象被称为属性描述符,我们可以通过Object.defineProperty方法去添加或者修改属性。

属性描述符有以下属性:

configurable

configurable 默认为true,表示该属性描述符是可修改的,且该描述符对应的属性是可以被删除的,configurable属性的修改是单向操作,当改为false时,就无法被再次修改了。

在严格模式下,去修改或者删除configurable为false的属性或者描述符对象,会产生 TypeError 的错误。

要注意有一个小小的例外:即便属性是 configurable:false,我们还是可以把 writable 的状态由 true 改为 false,但是无法由 false 改为 true。

enumerable

enumerable默认为true,表示该属性可枚举,比如一个键值对对象的for...in循环中,如果enumerable为false,那么这个属性就不会出现在该循环中,当我们使用Object.keys去获取key数组时,不可枚举的属性也不会被获取到。

如果你不希望某些特殊属性出现在枚举中,那就把它设置成 enumerable:false

如果判断这个属性是否可枚举呢?

ES5提供了propertyIsEnumerable方法用来判断属性是否可枚举,它返回一个布尔值,该方法挂载在最顶层的Object原型中。

var myObject = {};

Object.defineProperty(myObject,
    "b", {
        enumerable: false, // 让 b 不可枚举
        value: 3
    }
);

myObject.propertyIsEnumerable("b"); //false 

由于该方法存在于原型链中,那就可能会不安全,所以常见做法会通过借用的方式来使用:

Object.prototype.propertyIsEnumerable.call(myObject, "b");  //false

writable

writable默认为true,表示该属性是可以被修改的。

var myObject = {};

Object.defineProperty(myObject, "a", {
    value: 2,
    writable: false, // 不可写!
    configurable: true,
    enumerable: true
});

myObject.a = 3;
myObject.a; // 2

如你所见,我们对于属性值的修改静默失败(silently failed)了。如果在严格模式下,这种方法会出错:

"use strict";

var myObject = {};

Object.defineProperty(myObject, "a", {
    value: 2,
    writable: false, // 不可写!
    configurable: true,
    enumerable: true
});

myObject.a = 3; // TypeError

TypeError 错误表示我们无法修改一个不可写的属性。

value

value默认为undefined,是属性对应的值。

还有一些高阶属性,后面再说。

不变性

有时候我们希望属性或者对象是不可改变的,我们可以通过es5的多种方法来实现。

对象常量

结合 writable:false 和 configurable:false 就可以创建一个真正的常量属性(不可修改、重定义或者删除)

var myObject = {};
Object.defineProperty(myObject, "FAVORITE_NUMBER", {
    value: 42,
    writable: false,
    configurable: false
});

禁止扩展

如果你想禁止一个对象添加新属性并且保留已有属性,可以使用 Object.preventExtensions()

var myObject = {
    a: 2
};
Object.preventExtensions(myObject);

myObject.b = 3;
myObject.b; // undefined

在非严格模式下,创建属性 b 会静默失败。在严格模式下,将会抛出 TypeError 错误。

注意,一般来说,不可扩展对象的属性可能仍然可被删除。

Object.preventExtensions()仅阻止添加自身的属性。但其对象类型的原型依然可以添加新的属性。

该方法使得目标对象的 prototype 不可变;任何重新赋值 prototype 操作都会抛出 TypeError 。这种行为只针对内部的 prototype 属性,目标对象的其它属性将保持可变。

我们还可以通过Object.isExtensible()方法来判断是否禁止扩展。

密封

Object.seal() 会创建一个“密封”的对象,这个方法实际上会在一个现有对象上调用Object.preventExtensions(..) 并把所有现有属性标记为 configurable:false。

所以,密封之后不仅不能添加新属性,也不能重新配置或者删除任何现有属性(虽然可以修改属性的值)。

冻结

Object.freeze() 会创建一个冻结对象,这个方法实际上会在一个现有对象上调用Object.seal() 并把所有“数据访问”属性标记为 writable:false,这样就无法修改它们的值。

这个方法是你可以应用在对象上的级别最高的不可变性,它会禁止对于对象本身及其任意直接属性的修改(不过就像我们之前说过的,这个对象引用的其他对象是不受影响的)

你可以“深度冻结”一个对象,具体方法为,首先在这个对象上调用 Object.freeze(..),然后遍历它引用的所有对象并在这些对象上调用 Object.freeze(..)。但是一定要小心,因为这样做有可能会在无意中冻结其他(共享)对象。

高阶属性

get

var myObject = {
    a: 2
};

myObject.a; // 2

当我们从myObject对象上获取a属性时,从代码上看,好像仅仅就是在myObject对象本身上去查找,但是实际上并不是这样的,要知道我们可是有原型链的。

在语言规范中,myObject.a实际上就是触发了get操作,有点像是函数调用,对象默认的内置 Get 操作首先在对象中查找是否有名称相同的属性,如果找到就会返回这个属性的值,如果没有找到,就会通过原型链向上查找,直到找到对应的属性,否则返回undefined。

get没有找到对应的属性,都会返回undefined值。

注意,这种方法和访问变量时是不一样的。如果你引用了一个当前词法作用域中不存在的变量,并不会像对象属性一样返回 undefined,而是会抛出一个 ReferenceError 异常。

我们再看一个代码:

var myObject = {
    a: undefined
};

myObject.a; // undefined
myObject.b; // undefined

由于get没有找到会返回undefined,所以从返回值的角度来看,我们无法通过返回值来判断这个属性是否存在。

所以,es5提供了hasOwnProperty原型方法,存在于对象的原型中,一般都在最顶层的Object上,所以我们可以通过该方法来进行判断属性是否存在。(使用in方法也是可以的)

("a" in myObject); // true
("b" in myObject); // false

myObject.hasOwnProperty("a"); // true
myObject.hasOwnProperty("b"); // false

需要注意的是:in操作符会检查属性是否在对象及其原型链中,而hasOwnProperty则只会检测属性是否在myObject对象中,不会去检测原型链。

由于hasOwnProperty存在于原型链中,那么它就会有不安全性,所以在一些常见的用法上会通过借用的方式来保证结果的准确性。

Object.prototype.hasOwnProperty.call(myObject, "a");

put

既然有get获取属性的操作,就一定会有对应的put操作。

你可能会认为给对象的属性赋值会触发 Put 来设置或者创建这个属性。但是实际情况并不完全是这样。

Put被触发时,实际的行为取决于许多因素,包括对象中是否已经存在这个属性(这是最重要的因素)。

如果已经存在这个属性,Put 算法大致会检查下面这些内容

  1. 属性是否是有访问描述符?如果是并且存在 setter 就调用 setter。
  2. 属性的描述符中 writable 是否是 false ?如果是,在非严格模式下静默失败,严格模式下抛出 TypeError 异常。
  3. 如果都不是,将该值设置为属性的值

如果对象中不存在这个属性,Put 操作会更加复杂。后续再说。

上述流程不是单条单条,它是一个连贯的流程。

getter和setter

对象默认的 Put 和 Get 操作分别可以控制属性值的设置和获取。

在 ES5 中可以使用 getter 和 setter 部分改写默认操作,但是只能应用在单个属性上,无法应用在整个对象上。getter 是一个隐藏函数,会在获取属性值时调用。setter 也是一个隐藏函数,会在设置属性值时调用。

当你给一个属性定义 getter、setter 或者两者都有时,这个属性会被定义为“访问描述符”(和“数据描述符”相对)。对于访问描述符来说,JavaScript 会忽略它们的 value 和writable 特性,取而代之的是关心 set 和 get(还有 configurable 和 enumerable)特性。

var myObject = {
    // 给 a 定义一个 getter
    get a() {
        return 2;
    },
};

Object.defineProperty(
    myObject, // 目标对象
    "b", // 属性名
    // 描述符
    {
        // 给 b 设置一个 getter
        get: function() {
            return this.a * 2;
        },
        // 确保 b 会出现在对象的属性列表中
        enumerable: true,
    }
);

myObject.a; // 2
myObject.b; // 4

不管是对象文字语法中的 get a() { .. },还是 defineProperty(..) 中的显式定义,二者都会在对象中创建一个不包含值的属性,对于这个属性的访问会自动调用一个隐藏函数,它的返回值会被当作属性访问的返回值。

const myObject = {
    name: "a",
    get myName() {
        return this.name;
    },
};

myObject.myName = "b";
console.log(myObject.myName); //a

由于我们只定义了myName的getter,所以对它的赋值操作会被忽略,不会抛出错误。

为了让属性更加合理,还应当定义setter,setter操作会覆盖单个属性默认的 Put 操作,通常来说,说 getter 和 setter 是成对出现的(只定义一个的话通常会产生意料之外的行为)。

var myObject = {
    // 给 a 定义一个 getter
    get a() {
        return this._a_;
    },
    // 给 a 定义一个 setter
    set a(val) {
        this._a_ = val * 2;
    }
};

myObject.a = 2;
myObject.a; //

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 191

相关文章