解读Object.defineProperty()

wangbjun 发布于2019-08-22 16:49 / 1099人阅读

摘要：默认情况下，使用添加的属性是不可变的。是读取属性时调用，一般要返回，是写入属性时调用，不用返回。和访问器不是对象的属性，而是属性的特性，特性只有在内部才会使用，也就是接口不会暴露。只定义，则属性是只读。

Object.defineProperty()解读

第一个栗子：实现js双向数据绑定(借用网上的例子)

首先，将结构先搭建好

方式一：使用最基础的写法

document.addEventListener("keyup", function (e) {
    var str = e.target.value||"";
    document.getElementById("txt1").value = str;
    document.getElementById("txt2").value = str;
})

该方法使用主动赋值的方式同步数据

方式二：Object.defineProperty()
将所有的监听和响应操作交给Object的自定义存取器属性，先看实现的代码，稍后具体解读2333333

/* 只要给obj.dataBind赋值，就会触发set方法，只要访问ob.dataBind，就会触发get方法 */
var obj = {};
Object.defineProperty(obj, "dataBind", {
    get: function () {
        return this.newValue;
    },
    set: function (newValue) {
        this.newValue = newValue || "";
        document.getElementById("txt1").value = this.newValue;
        document.getElementById("txt2").value = this.newValue;
    }
})
document.addEventListener("keyup", function (e) {
    obj.dataBind = e.target.value;  /*这步操作是调用obj.dataBind.set(e.target.value)*/
})

这里的dataBind属性是会替换obj的默认的dataBind，如果有设置的话。

运行

第二个栗子：实现阶乘

代码：

/*
*使用get/set特性实现阶乘功能
*/ 
var obj = {};
Object.defineProperty(obj,"factorial",{
    get:function(){
        return this.result;
    },
    set:function(num){
        this.result = 1;
        for(var i=1;i<=num;i++){
            this.result *= i;
        }
    }
})

document.addEventListener("keydown",function(e){
    var even = e||event;
    if(even.keyCode==13){
        obj.factorial = document.getElementById("factorial").value;
        document.getElementsByTagName("p")[0].innerText = "阶乘的结果是："+obj.factorial;
    }
})

运行

要改变属性的get/set特性，有两种方式：

设置单个属性：Object.defineProperty()
该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
默认情况下，使用Object.defineProperty添加的属性是不可变的。
语法：Object.defineProperty(obj,prop,descriptor)

obj:需要定义属性的对象

prop：需要定义或修改的属性名

descriptor：被定义或修改的属性描述

设置多个属性Object.defineProperties()
语法: Object.defineProperties(obj, props)

get/set

get和set属性称为“存取器属性”，当属性被定义为存取器属性时，js会忽略赋值的属性，直接使用定义的get或set的值。

get是读取属性时调用，一般要返回，set是写入属性时调用，不用返回。

get和set访问器不是对象的属性，而是属性的特性，特性只有在内部才会使用，也就是接口不会暴露。

get和set访问器可以不用定义，不定义也可以读写属性值。只定义get，则属性是只读。只定义set，则属性是只写。

最后

我是参考网上很多例子，按照自己的思路整理出来的，可能也会有很多疏漏，先这样吧
竟然学会了用gif图演示，哈哈哈

GPU云服务器云服务器报告解读解读源码解读解读3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94693.html

javascript对象定义set和get的方式解读！~

摘要：方式使用原始的和标记设置方式使用原型方法进行设置使用和进行设置 /** * 方式1：使用原始的set 和 get标记设置 * @type {Object} */ var obj1 = { name: shaanxi, get nameGet() { return this.name; ...

godlong_X 2019-08-20 15:42 评论0 收藏0
【Vue 2.0】核心源码解读 -- 不定期更新

摘要：观察员由模板解析指令创建的观察员负责模板中的更新视图操作。观察员种类目前了解情况来看主要分三类视图指令的计算属性的用户自定义的介绍关于 Vue.js 的原理一直以来都是一个话题。经过几天的源码学习和资料介绍，我将一些个人理解的经验给写下来，希望能够与大家共勉。附上GITHUB源码地址, 如果有任何不解可以在文章下面提出或者写下issue, 方便大家回答和学习, 有兴趣可以St...

sunsmell 2019-08-21 16:51 评论0 收藏0
【用故事解读 MobX 源码（四）】装饰器和 Enhancer

摘要：所以这是一篇插队的文章，用于去理解中的装饰器和概念。因此，该的作用就是根据入参返回具体的描述符。其次局部来看，装饰器具体应用表达式是，其函数签名和是一模一样。等装饰器语法，是和直接使用是等效等价的。 ================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式讲解源码；本系列文章：《【用故事解...

maybe_009 2019-08-22 18:30 评论0 收藏0
深入 JavaScript 原型继承原理——babel 编译码解读

摘要：目录无继承简单的字段声明无继承简单的方法声明简单继承一层继承字段覆盖无继承静态函数无继承静态变量神秘的类无继承简单的字段声明先来看个最简单的例子，我们仅仅使用了关键字并定义了一个变量最后编译出来的代码如下。无继承静态变量还有个小例子。在[上一篇文章][]中，我们提到 ES6 的 class 语法糖是个近乎完美的方案，并且讲解了实现继承的许多内部机制，如 prototype/__pro...

stdying 2019-08-23 12:35 评论0 收藏0
Mobx 源码阅读简记

摘要：源码简记整体会写得比较乱，同时也比较简单，和读书笔记差不多，基本是边读边写。见谅主要三大部分的原子类，能够被观察和通知变化，继承于。同时里面有几个比较重要的属性与方法。 Mobx 源码简记整体会写得比较乱，同时也比较简单，和读书笔记差不多，基本是边读边写。见谅~ 主要三大部分Atom、Observable、Derivation Atom Mobx的原子类，能够被观察和通知变化，obs...

paulli3 2019-08-23 15:34 评论0 收藏0