js对象可扩展性和属性的四个特性(下)

简介: js对象可扩展性和属性的四个特性(下)

一、前言

  • 再次花时间回顾一下基础,毕竟要想楼建的好,地基就要牢固,嘻嘻!
  • 在开始之前需要具备对prototype、__proto__、constructor有一定得了解,可以看看我之前写的一篇文章=>通道
  • 之前的用户管理系统已经差不多了,顺便加了个socket聊天的,但是由于做java后台的哪个朋友节奏跟不上来,所以即时聊天的后台就是node+socket-io写的,由于用户列表也涉及比较多的用户隐私问题,所以我设置了页面权限和接口权限,然后下面开放的几个账号就只能看到几个页面而已,哈哈。=>通道
  • 体验账号1:账号:“123456”。密码:“123456”
  • 体验账号2:账号:“123123”。密码:“123123”

二、目录

  • 对象属性的四个特性
  • 对象的可扩展性
  • 删除属性
  • 检测属性
  • 枚举属性
  • 属性的getter和setter

三、删除属性

1、用指定对象作为原型创建对象
Object.create()

说明:

  • 第一个参数是新建对象的原型
  • 第二个参数也就是属性和特性描述的集合
    const log = console.log;
    //返回数据数据的描述
    var aa = Object.create({ x: 1 }, {
        y: {
            value: 1,
            writable: false,
            enumerable: false,
            configurable: true
        }
 
    })
    log(aa)
    log(Object.getOwnPropertyDescriptor(aa,'y'))
2、删除对象属性
delete

说明:

  • delete只是断开属性和宿主对象的联系,而不会去操作属性中的属性。
  • delete只能删除自有属性,不能删除继承属性。
  • delete不能删除可配置为false的属性
    const log = console.log;
    //返回数据数据的描述
    var aa = {y:2}
    Object.defineProperty(aa, 'x', {
            value: 1,
            writable: true,
            enumerable: true,
            configurable: false
        })
    log(aa);
    log(delete aa.x);
    log(delete aa.y);
    log(aa)

四、检测属性

1、检测对象是否拥有某个属性
in

说明:

  • in运算符不仅仅回检测对象自有属性,还会检测继承属性
    const log = console.log;
    var aa={x:1};
    log('x' in aa);
    log('y' in aa);
    log('toString' in aa)
2、检测对象是否拥有某个属性
hasOwnProperty()

说明:

  • hasOwnProperty只会检测对对象自有属性,不会检测继承属性
    const log = console.log;
    var aa={x:1};
    log(aa.hasOwnProperty('x'));
    log(aa.hasOwnProperty('y'));
    log(aa.hasOwnProperty('toString'))
3、检测对象是否拥有某个属性
propertyIsEnumerable()

说明:

  • propertyIsEnumerable属性只检测自有属性的可枚举属性
    const log = console.log;
    var aa = { x: 1 };
    Object.defineProperty(aa, 'y', {
        value: 1,
        writable: true,
        enumerable: false,
        configurable: true
    })
    log(aa)
    log(aa.propertyIsEnumerable('x'));
    log(aa.propertyIsEnumerable('y'));
    log(aa.propertyIsEnumerable('toString'))

五、枚举属性

1、枚举对象中的属性

Object.keys()
    const log = console.log;
    var aa = { x: 1 ,y:2};
    Object.defineProperty(aa, 'z', {
        value: 3,
        writable: true,
        enumerable: false,
        configurable: true
    })
    log(aa)
    log(Object.keys(aa))

2、枚举对象中的属性

Object.getOwnPropertyNames()
    const log = console.log;
    var aa = { x: 1 ,y:2};
    Object.defineProperty(aa, 'z', {
        value: 3,
        writable: true,
        enumerable: false,
        configurable: true
    })
    log(aa)
    log(Object.getOwnPropertyNames(aa))

六、属性的getter和setter

说明:

  • 由get和set定义的属性叫做存取器属性
  • 不同于普通属性它不是一个具体的值,而是由两个方法构成
    const log = console.log;
    var aa = { x: 1 ,
    get y(){
        return 1000;
    },
    set y(value){
        this.x+=value;
    }
    };
    log(aa)
    aa.y=1;
    log(aa)



相关文章
|
8月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
3月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
112 23
|
8月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
149 1
|
8月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
6月前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
107 11
|
8月前
|
自然语言处理 JavaScript 前端开发
ECMAScript 6 的出现为 JavaScript 带来了许多新的特性和改进
这些只是ES6的一些主要特性,它们极大地增强了JavaScript的功能和表现力,使得JavaScript在大型应用开发、前端框架等领域能够更加高效地编写复杂的应用程序。
|
8月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
147 56
|
8月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
85 1
JavaScript中对象的数据拷贝
|
8月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
225 4
|
8月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
107 5