网站首页 » 前端开发 » JavaScript » JavaScript 中的可枚举属性与继承的可枚举属性解密
上一篇:
下一篇:

JavaScript 中的可枚举属性与继承的可枚举属性解密

前言

这篇文章主要是分享一下什么是可枚举属性和继承属性,可枚举属性和继承属性这两个词估计你已经在网上看到无数次了,但网上对于这两个东西的解释很多都不是很详细,一笔带过的居多,特别是继承属性的介绍。基本都是只见【继承属性】这四个字眼,却极少看到有关这个名词的相关介绍,所以才有了这篇文章。

可枚举属性

什么才算是可枚举属性?我们不妨回想一下,在平时的开发中我们是如何定义一个对象的,可能会像下面这样:

const obj = {
     name:'云库网',
     domain:'http://yunkus.com',
     age:'3年2月19日'
}

像这样定义的这个对象,对象里的所有属性都是可枚举的,我们可以通过比如下面的遍历方法遍历它:

for(let key in obj){
    console.log(key,obj[key]);
}

那什么是不可枚举属性呢?

我们可以在给对象设置属性时指定此属性是否可被枚举。于是定义对象的属性时,写法就有些不同了,我们可以通过 Object.defineProperty() 方法来给对象定义属性:

Object.defineProperty(obj, prop, descriptor)

参数说明:

  • obj 目标对象
  • prop 属性名
  • descriptor 属性自定义特性

descriptor 里可设置属性为:

  • value 属性对应的值,默认为 undefined
  • writable 属性的值是否可以被重写,默认为 false
  • enumerable 是否可被枚举,默认为 false
  • configurable 是否可配置,默认为 false
Object.defineProperty(obj, 'type' ,{
    value:"前端技术"
});

for(let key in obj){
    console.log(key,obj[key]);
}

Object.defineProperty() 方法的第三个参数是一个对象对应目标属性的相关特性(如:是否可枚举)

所以我们可以通过修改第三个参数来控制给对象设置的属性是否可枚举

Object.defineProperty(obj, 'type' ,{
    value:"前端技术",
    enumerable:true
});

这里如果设置了属性为可枚举的话,我们就没有必需用 Object.defineProperty() 方法了,而是用上面的常规写法就可以。

继承的可枚举属性

接下来,介绍下继承的可枚举属性

我们不妨把这个词拆开两部分来看,继承和可枚举,如果这样一分,其实我们就只需要看一个就可以了,因为可枚举前面我们已经介绍过了,所以只说继承。

说到继承,我们得先了解了解下 Object.create(prototype, descriptors) 方法。

  • prototype 必需。 要用作原型的对象。 可以为 null
  • descriptors 属性自定义特性,同 Object.defineProperty() 方法上的 descriptors 属性

Object.create() 方法返回一个具有指定的内部原型且包含指定的属性(如果有)的新对象。

在这里我们不妨把继承看作是 JavaScript 中的原型链,父类为原型。

于是我们就可以通过 Object.create() 方法 来创建一个子对象并继承原型对象。

const obj = {
    name:'云库网',
    domain:'http://yunkus.com',
   age:'3年2月19日'
};
const subObj = Object.create(obj,{
     type:{
         value: "前端技术",
         enumerable: true
     },
     owner:{
         value: "朝夕熊",
         enumerable: true
     }
 });
for(let key in subObj){
    console.log(key,subObj[key]);
}
// 结果:
// type 前端技术
// owner 朝夕熊
// name 云库网
// domain http://yunkus.com
// age 3年2月19日

上面的 for in 循环就把继承的可枚举属性也遍历出来了。其实上面所说的枚举属性一般都对于类似于 for in 或者 for of 循环来说的,类似的这些循环在遍历对象的时候它们的行为是有差异的。并且我们得牢记这些细微差异。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-enumerable-property-and-inherit-enumerable-property/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END