js数据劫持 Object.defineProperty() 作用
原生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() 作用的更多相关文章
- 数据代理Object.defineProperty()
数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写) 数据代理 Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个 ...
- js中的Object.defineProperty()和defineProperties()详解
ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...
- Js中的Object.defineProperty
通过Object.defineProperty为对象设置属性,并同时规定属性的属性(可见性,可配置性,可枚举性等) 备注:如果通过var obj = {} obj.age = 18这种方式设置的属性, ...
- 直播课(1)如何通过数据劫持实现Vue(mvvm)框架
19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
- ES6入门:数据劫持、Proxy、Reflect
什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...
- vue双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...
- 手写vue observe数据劫持
实现代码: class Vue { constructor(options) { //缓存参数 this.$options = options; //需要监听的数据 this.$data = opti ...
- JS apply的巧妙用法以及扩展到Object.defineProperty的使用
Math.max 实现得到数组中最大的一项 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(ma ...
随机推荐
- CentOS7编译和安装GCC7.5
CentOS7编译和安装GCC7.5 一. 环境介绍: CentOS7 虚拟机连上了互联网(为什么要强调这点呢,因为CentOS7每次进入系统,都需要手动点击右上角的Connect,才能连上互联 ...
- HttpPoolUtils 连接池管理的GET POST请求
package com.nextjoy.projects.usercenter.util.http; import org.apache.http.Consts; import org.apache. ...
- Redis学习笔记(十) 客户端
Redis服务器是典型的一对多服务器程序:一个服务器可以与多个客户端建立网络连接,每个客户端可以向服务器发送命令请求,而服务器则接收并处理客户端发送的命令请求,并向客户端返回命令回复. 通过使用由I/ ...
- 视口viewport
一.viewport 1. 何为视口? 视口是浏览器显示网页的矩形区域. 2. 默认视口:模拟一个大约1000像素宽的视口. 理想视口:因设备.操作系统.浏览器而异,一般而言,手机宽带大约在300-5 ...
- P3366【模板】最小生成树
P3366[模板]最小生成树 Kruskal #include <bits/stdc++.h> using namespace std; typedef long long ll; ; ; ...
- ionic + asp.net core webapi + keycloak实现前后端用户认证和自动生成客户端代码
概述 本文使用ionic/angular开发网页前台,asp.net core webapi开发restful service,使用keycloak保护前台页面和后台服务,并且利用open api自动 ...
- 00008 - layui 表单验证,需要验证,但非必输
当使用layui的验证规则,比如 手机, <input type="text" name="userName" lay-verify="phon ...
- MySQL(9)— 规范数据库设计
九.规范数据库设计 9-1.为什么要设计? 当数据库比较复杂时,我们就需要设计了! 糟糕的数据库设计: 数据冗余,浪费大量存储空间 使用物理外键,大量的增删改操作麻烦,异常 查询效率低下 良好的数据库 ...
- C盘清理.bat
将以下代码复制到.txt文件中并改为.bat文件运行即可. @echo offecho 正在清除系统垃圾文件,请稍等......del /f /s /q %systemdrive%\*.tmpdel ...
- Ubuntu 18.04上交叉编译华硕路由器RT-AC88U的梅林384.15版本
研究了半天官方wiki上的文档,最后却找到这个一键脚本.手动试了一下,丝般顺滑,成功编译出RT-AC88U的梅林固件384.15版本.也可以编译其他路由器型号的固件. 不过这个脚本比较暴力,上来就把/ ...











