原生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. 【漫画】读写锁ReadWriteLock还是不够快?再试试StampedLock！

    本文来源于公众号[胖滚猪学编程] 转载请注明出处! 在互斥锁ReentrantLock不好用?试试读写锁ReadWriteLock一文中,我们对比了互斥锁ReentrantLock和读写锁ReadWr ...

  2. 「雕爷学编程」Arduino动手做（38）——joystick双轴摇杆模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  3. select 后台获取text 并根据text 设置value选中项

    -------获取select 的text string orderNo = this.orderNo.Items[this.orderNo.SelectedIndex].Text; -----根据t ...

  4. unity-消息的注册，监听，回调

    最近在空闲时间准备做个小游戏,先把一些基本框架搭建好,本次记录的是消息的注册,监听和回调等 其实这些就是基于C#的委托(delegate) 第一步:定义一些委托 namespace Common.Me ...

  5. 让SpringBoot自动化配置不再神秘

    本文若有任何纰漏.错误,还请不吝指出! 注:本文提到的Spring容器或者Bean容器,或者Spring Bean容器,都是指同一个事情,那就是代指BeanFactory.关于BeanFactory, ...

  6. python基本数据类型：字符串及其方法（一）

    大小写转换类 方法一:capitalize()首字母大写字符串 name='hatusne miku' name1=name.capitalize() print(name,name1) 方法二:ti ...

  7. k3s-安装

    k3s介绍 K3S是一个轻量级的K8S集群,它是Rancher Lab开发的一个新的产品, 目的是在资源有限的设备上面跑K8S.它的最大特点就是小,二进制包只有40MB,只需要512MB的内存就能跑起 ...

  8. Pyqt5_Python运用过程中一些问题和技巧

    安装python3&pyqt5 1.         网下载python3.7安装包,安装时选择自定义安装,勾选上PIP 直接去官网上下载,一路下一步就可以了,然后将D:\Python37.D ...

  9. java-五大内存图

    jrm—Java虚拟机在进行程序运行时会向cpu申请一个内存约为10%左右,该内存被jrm分为5大区域 一:栈内存(stack)用来存储变量 当栈消失时,变量也随之消失.二:堆内存(heap)在Jav ...

  10. 一,初次接触html+css需要注意的小问题

    不足之处请不吝赐教,在评论区帮忙补充 html最基础的,入门学习的是标签,常用的标签有<a>      定义锚.<b>      定义粗体字.<br>      单 ...