原生js Object.defineProperty() 作用

假设我们有一个obj对象,我们要给他设置一个name属性会这么做

Object.defineProperty()也可以设置对象属性

这个方法有3项值

项1:需要加属性的对象

项2:需要改变的属性

项3:对加的属性值有什么要求

以上为例,用Object.defineProperty()给它设置一个name属性

没错,value就是name要改变的值,项3除了value属性还有writable enumerable configurable属性,那么它们几个分别又有什么作用呢?我们一起来看看

writable enumerable configurable 这三个接受的都是Boolean类型的值

writable

可以看到重新改变obj的name属性值,并没有发生任何改变,那我们把writable的值改为true试一下

这就证明了,writable属性的作用:是否可以重新被赋值,true--可以,false--不可以

enumerable

我们获取对象的所有属性是这样做的

接下来我们添加enumerable属性 值为false 试下

再改成true试下

可以发现,enumerable属性的作用:是否被遍历(枚举)出来,true--是,false--否

configurable

这个作用是:是否可以被删除

注:删除对象方法 => delete 要删除的对象

添加configurable属性 值为false,并删除obj.name属性

并没有删掉,那么将configurable值改为true试下

这样就删掉了,configurable作用:是否可以被删掉,true--可以,false--不可以

项3除了以上4个属性,其实还有get和set方法,但不能和以上4个属性同时出现,否则会报错

get和set方法的作用:一个是取值时触发(get),一个是设置值时触发(set)

一起看下效果
我先点击取值按钮

再点击设置值按钮

js数据劫持 Object.defineProperty() 作用的更多相关文章

  1. 数据代理Object.defineProperty()

    数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写) 数据代理 Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个 ...

  2. js中的Object.defineProperty()和defineProperties()详解

    ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...

  3. Js中的Object.defineProperty

    通过Object.defineProperty为对象设置属性,并同时规定属性的属性(可见性,可配置性,可枚举性等) 备注:如果通过var obj = {} obj.age = 18这种方式设置的属性, ...

  4. 直播课(1)如何通过数据劫持实现Vue(mvvm)框架

    19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...

  5. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

  6. ES6入门:数据劫持、Proxy、Reflect

    什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...

  7. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  8. 手写vue observe数据劫持

    实现代码: class Vue { constructor(options) { //缓存参数 this.$options = options; //需要监听的数据 this.$data = opti ...

  9. JS apply的巧妙用法以及扩展到Object.defineProperty的使用

    Math.max 实现得到数组中最大的一项 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(ma ...

随机推荐

  1. java ->会话技术Cookie&Session

    会话技术Cookie&Session 会话技术简介 存储客户端的状态 由一个问题引出今天的内容,例如网站的购物系统,用户将购买的商品信息存储到哪里?因为Http协议是无状态的,也就是说每个客户 ...

  2. c++离散化处理大范围和重复数据

    关于离散化 有些新手可能会问:离散化是什么?离散化就是将无限空间中有限的个体映射到有限的空间里去. 上面的定义肯定会有人看不懂(其实我刚开始学的时候也看不懂) 用我自己的话来说,就是在不改变数据的相对 ...

  3. 对background: url("~assets/img/common/collect.svg") 0 0/14px 14px 的理解

    需求:给收藏数字前面通过::before伪元素添加图标 相关代码: .goods-info .collect { position: relative; } .goods-info .collect: ...

  4. JVM系列(2)-GC

    1.什么是GC? 大白话说就是垃圾回收机制,内存空间是有限的,你创建的每个对象和变量都会占据内存,gc做的就是对象清除将内存释放出来,这就是GC要做的事. 2.需要GC的区域 说起垃圾回收的场所,了解 ...

  5. 推荐一款Python神器,5 行 Python 代码 实现一键批量扣图

    今天给大家分享一款Python装逼实用神器. 在日常生活或者工作中,经常会遇到想将某张照片中的人物抠出来,然后拼接到其他图片上去.专业点的人可以使用 PhotoShop 的"魔棒" ...

  6. Docker 部署Spring Boot 项目并连接mysql、redis容器(记录过程)

    Spring Boot 项目配置 将写好的Spring Boot 项目通过maven 进行package打包获得可执行Jar 再src/main/docker(放哪都行)下编写创建Dockerfile ...

  7. Python 图像处理 OpenCV (4):图像算数运算以及修改颜色空间

    前文传送门: 「Python 图像处理 OpenCV (1):入门」 「Python 图像处理 OpenCV (2):像素处理与 Numpy 操作以及 Matplotlib 显示图像」 「Python ...

  8. Floyd's Triangle

    Floyd's Triangle Floyd's triangle is a right-angled triangular array of natural numbers. Floyd's tri ...

  9. Word使用技巧——持续更新

    Q1:word 2007 打开后默认显示缩略图而不是文档结构图? A1:三步曲 1)打开word,关闭缩略图,保存并关闭文档 2)重新打开word(此时应该没有显示缩略图),勾选上“文档结构图”,保存 ...

  10. 项目中 SimpleDateFormat 的正确使用

    项目中 SimpleDateFormat 的正确使用 日常开发中,我们经常需要使用时间相关类,说到时间相关类,想必大家对 SimpleDateFormat 并不陌生.主要是用它进行时间的格式化输出和解 ...