JavaScript对象之get/set方法

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js对象的set和get 以及关于控制台打印的几种快捷效果title>
    head>
    <body>
        <script type="text/javascript">
            // JavaScript对象之get/set方法
            let obj = {
                name: 'bob',
                job: '程序员',
                set age(val) {
                    console.log(new Date().getFullYear(), val, 'val') // 2021 30 "val"
                },
                get age() {
                    return new Date().getFullYear() - 1993
                }
            }

            // 对象初始化之后添加属性 方式一
            obj.__defineGetter__('sex', function() {
                return sex
            });
            obj.__defineSetter__('sex', function(val) {
                sex = val
            });

            // 对象初始化之后添加属性 方式二 Object.defineProperty定义的属性默认是不可配置的,即 writable=false,configuarble=false
            // 解决方法是给当前对象定义一个可配置的属性 {writable:true, configuarble:true, enumerable:true, value: xxx}
            // 对象的四个特性
            // 值(value):对象可以通过.访问其属性值
            // 可写性(writable):控制值(value)是否可修改,默认是true可修改的
            // 可枚举性(enumerable):控制是否可用for in遍历到默认是true,即使不能for in,用"."也能访问 【控制台灰色的标识不可枚举加上此属性即可变为可枚举】
            // 可配置性(configurable):控制是否可以修改其他特性,是否可以删除属性,修改不可逆转默认是true;
            Object.defineProperty(obj, 'desc', {
                enumerable: true,
                set: function(val) {
                    console.log('desc被赋值:', val);
                    desc = val
                },
                get: function() {
                    console.log('desc被取出:', desc)
                    return desc
                }
            })

            // 如果有set 和 get 就会覆盖 writable 但是依旧可以使用 configurable 和 enumerable
            Object.defineProperty(obj, 'info', {
                writable: true,
                configuarble: true,
                enumerable: true,
                value: '描述信息'
            })
            console.log(obj.age) // 28
            obj.sex = 'man'
            obj.desc = '新增属性'
            obj.age = 30
            console.log(obj.age) // 28 
            console.log(obj.desc)
            console.log(obj)
            console.log(obj.info, '更改前') // 描述信息 更改前
            obj.info = '更改描述信息成功'
            console.log(obj.info, '更改后') // 更改描述信息成功 更改后
            console.info({ ...obj })

            // 关于打印
            let arr = [{
                id: 1,
                name: 'bob'
            }, {
                id: 2,
                name: 'lala'
            }, {
                id: 3,
                name: 'coco'
            }]
            console.log(1) //
            console.info(1) // 信息
            console.debug(1) // 调试信息
            console.warn(1) // 警告信息
            console.dir(obj) // 以列表形式输出一个对象的所有属性
            console.table(obj)
            console.table(arr) // 以表格形式展示数组
            console.table(arr, ['id']) // 只看id那一列
        script>
    body>
html>

自己整理,请勿随意转载!!!!

Original: https://www.cnblogs.com/lhl66/p/14487841.html
Author: 蓝色帅-橙子哥
Title: JavaScript对象之get/set方法

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/536026/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • JavaScript中的CSS属性对照表

    盒子标签和属性对照 CSS 语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom bord…

    JavaScript 2023年5月29日
    054
  • 给一个数字,输出人民币组合(JavaScript算法)

    题目: 人民币由100元,50元,20元10元,5元1元,5毛,1毛面额组合。写一个方法随便传入一个数字参数,就输出人民币组合。比如传入1526.5就显示1526.5元由人民币10…

    JavaScript 2023年5月29日
    083
  • JavaScript Table行定位效果

    近来有客户要求用table显示一大串数据,由于滚动后就看不到表头,很不方便,所以想到这个效果。上次做table排序对table有了一些了解,这次更是深入了解了一番,发现table原…

    JavaScript 2023年5月29日
    059
  • 十个JavaScript中易犯的小错误,你中了几枪?

    序言 在今天,JavaScript已经成为了网页编辑的核心。尤其是过去的几年,互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。 如果初次打交道,很多人会觉得js很简…

    JavaScript 2023年5月29日
    086
  • JavaScript ?? 双问号(空值合并运算符)

    空值合并运算符 name ?? ‘Tom’ 它是 ES2020 的一个新特性, 只会在左侧表达式是 null 或 undefined 时返回右侧的表达式 不同于逻辑或,空值合并运算…

    JavaScript 2023年5月29日
    053
  • javascript call与apply关键字的作用

    apply接受两个参数。第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合。 call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参…

    JavaScript 2023年5月29日
    073
  • javaScript系列 [51]-Rollup 打包器

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    JavaScript 2023年5月29日
    094
  • JavaScript统计数据处理(5)- 类的封装和继承

    JavaScript是一种广泛使用网页编程语言,在浏览器中运用JavaScript技术处理统计数据具有最佳的推广传播效果 类是具有共同属性和方法的集合。JS是一门面向对象语言,其对…

    JavaScript 2023年5月29日
    058
  • 【转】JavaScript函数柯里化的一些思考

    原文地址:https://www.cnblogs.com/pengchen/p/5434705.html 1. 高阶函数的坑 在学习柯里化之前,我们首先来看下面一段代码: 很多同学…

    JavaScript 2023年5月29日
    065
  • 一道JavaScript面试题(setTimeout)

    下面的代码,多久之后会弹出’end’? 为什么? 这是以前在想有没办法实现阻塞javascript线程的时候(即实现sleep方法),想过的一种实现。 很简…

    JavaScript 2023年5月29日
    083
  • [代码质量] 代码质量管控 — 复杂度检测 (JavaScript)

    代码的复杂度是评估一个项目的重要标准之一。较低的复杂度既能减少项目的维护成本,又能避免一些不可控问题的出现。然而在日常的开发中却没有一个明确的标准去衡量代码结构的复杂程度,大家只能…

    JavaScript 2023年5月29日
    055
  • javascript SDK开发之webpack打包支持对象展开运算符…

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    JavaScript 2023年5月29日
    051
  • javascript中判断数据类型

    编写javascript代码的时候常常要判断变量,字面量的类型,可以用typeof,instanceof,Array.isArray(),等方法,究竟哪一种最方便,最实用,最省心呢…

    JavaScript 2023年5月29日
    055
  • JavaScript 图片滑动切换效果

    序一(08/07/06) 看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。由于有了做图片滑动展示效果的经验,做这个就容易得多了。 …

    JavaScript 2023年5月29日
    067
  • javascript算法-插入排序

    原理跟java那篇文章一样,只是语言不同而已 var InsertSort = function( _n ){ this.maxSize = _n; this.arr = []; …

    JavaScript 2023年5月29日
    094
  • javascript 闭包最简单理解

    首先说3点与闭包有关系的东西。 一、变量的作用域 变量的作用域不难理解。 1.函数内部可以访问函数外部的变量,而函数外部不能访问函数内部的变量。 2.如果在函数内定义变量的时候,不…

    JavaScript 2023年5月29日
    071
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球