深入浅出Object.defineProperty()/new Proxy()---js对象的底层

muzidigbig

已于 2023-03-28 13:13:11 修改

阅读量1.4k

点赞数

分类专栏： JavaScript--基础文章标签： Object.defineProperty() set get Proxy

于 2019-03-21 16:42:02 首次发布

本文链接：https://blog.csdn.net/muzidigbig/article/details/88706182

版权

JavaScript--基础专栏收录该内容

33 篇文章 5 订阅

订阅专栏

Object.defineProperty() 和 Proxy 对象，都可以用来对数据的劫持操作。何为数据劫持呢？就是在我们访问或者修改某个对象的某个属性的时候，通过一段代码进行拦截行为，然后进行额外的操作，然后返回结果。那么vue中双向数据绑定就是一个典型的应用。

Vue2.x 是使用 Object.defineProperty()，来进行对对象的监听的。
Vue3.x 版本之后就改用Proxy进行实现的。
下面我们先来理解下Object.defineProperty作用。

<script type="text/javascript">
    // 方式一
    var person = new Object();
    person.name = "muzidigbig";
    person.age = "23";
    person.say = function() {
        console.log("我爱"+this.name)
    }
    person.say();
    // 方式二
    var person2 = {
        name:"muzidigbig",
        age:"23",
        say:function() {
            console.log("我爱"+this.name)
        }
    }
    person2.say()
</script>

这个例子中的person对象与person2对象是一样的，都有相同的属性和方法。这些属性在创建时都带有一些特征值（characteristic），JavaScript通过这些特征值来定义它们的行为。

对象的定义与赋值

经常使用的定义与赋值方法obj.prop =value或者obj['prop']=value

在定义只有内部才用的特性（attribute）时，描述了属性（property）的各种特性。定义这些特性是为了实现JavaScript引擎用的，因此在JavaScript中不能直接访问他们。为了表示特性是内部值，该规范把他们放在了两对方括号中。例如[[Enumerable]].

ECMAScript中有两种属性：数据属性和访问属性

[[Enumerable]] 声明设个属性是否具有可枚举性，默认：true 可枚举

不可枚举的意思是在枚举的时候不对键枚举，相当于循环的时候跳过这个键，在for in、Object.keys，JSON.stringify时会用到。可枚举就是循环的时候不跳过。

Object.defineProperty()语法说明

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineProperty(obj, prop, desc)

obj 需要定义属性的当前对象
prop 当前需要定义的属性名
desc 属性描述符对象

一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

属性的特性以及内部属性

javacript 有三种类型的属性

命名数据属性：拥有一个确定的值的属性。这也是最常见的属性
命名访问器属性：通过getter和setter进行读取和赋值的属性
内部属性：由JavaScript引擎内部使用的属性，不能通过JavaScript代码直接访问到，不过可以通过一些方法间接的读取和设置。比如，每个对象都有一个内部属性[[Prototype]]，你不能直接访问这个属性，但可以通过Object.getPrototypeOf()方法间接的读取到它的值。虽然内部属性通常用一个双吕括号包围的名称来表示，但实际上这并不是它们的名字，它们是一种抽象操作，是不可见的，根本没有上面两种属性有的那种字符串类型的属性

属性描述符

通过Object.defineProperty()为对象定义属性，有两种形式，且不能混合使用，分别为数据描述符，存取描述符，下面分别描述下两者的区别：

数据描述符 --特有的两个属性（value,writable）

let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'muzidigbig',
   writable: true // 是否可以改变
})

注意，如果使用Object.defineProperty()这个特性来描述属性特性描述符中的某些属性被省略，会使用以下默认规则：

访问器/存取描述符 --是由一对 getter、setter 函数功能来描述的属性

get：一个给属性提供getter的方法，如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
set：一个给属性提供setter的方法，如果没有setter则为undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认值为undefined。

    let Person = {}
    let temp = null
    Object.defineProperty(Person, 'name', {
      get: function () {
        return temp
      },
      set: function (val) {
        temp = val
      }
    })
    //需要为这个属性赋值
    Person.name = "muzidigbig";
    console.log(Person.name);//muzidigbig
    console.log(temp);//muzidigbig

数据描述符和存取描述均具有以下描述符

configrable 描述属性是否配置，以及可否删除
enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中，是否具有可枚举性

configrable 代码片段分析：

    function test() {
        "use strict"
        let Person = {}
        Object.defineProperty(Person, 'name', {
            name: 'muzidigbig',
            configurable:false,
            writable:true,
        })
        //严格模式下会报错
        delete Person.name; //Cannot delete property 'name' of #<Object>
    }
    test()

当前一个configurable:true时后面回报Cannot redefine property: name错误

    function test() {
        "use strict"
        let Person = {}
        Object.defineProperty(Person, 'name', {
            name: 'muzidigbig',
            configurable:false,
        })
        Object.defineProperty(Person, 'name', {//Cannot redefine property: name
            name: 'muzidigbig666',
            configurable:true,
            writable:true,
        })
        
    }
    test()

value:"值"，能修改属性值

    function test() {
        "use strict"
        let Person = {}
        Object.defineProperty(Person, 'name', {
            value: 'muzidigbig',
            configurable:true,
            writable:true,
        })
        Object.defineProperty(Person, 'name', {
            value: 'muzidigbig66',
        })
        //通过属性定义的形式修改name的值
        console.log(Person.name);//muzidigbig66
    }
    test()

configurable:true，能删除属性

    function test() {
        "use strict"
        let Person = {}
        Object.defineProperty(Person, 'name', {
            value: 'muzidigbig',
            configurable:true,
            writable:true,
        })
        Object.defineProperty(Person, 'name', {
            value: 'muzidigbig66',
        })

        delete Person.name;//undefined
        console.log(Person.name);//muzidigbig66
    }
    test()

writable:false，不能通过赋值（Person.name = "muzidigbig88"）的方式修改性值

writable:true，时两种方式都可以修改属性值

    function test() {
        let Person = {}
        Object.defineProperty(Person, 'name', {
            value: 'muzidigbig',
            configurable:true,
            writable:false,
        })
        Object.defineProperty(Person,'name',{
            value:'muzidigbig666'
        })
        //通过属性定义的形式可以修改name的属性值
        console.log(Person.name);//muzidigbig666

        //通过赋值的形式，不能修改；因为writable为false
        Person.name = 'muzidigbig88';
        console.log(Person.name);//muzidigbig666
    }
    test()

从以上代码运行结果分析总结可知：

configurable: false 时，不能删除当前属性，且不能重新配置当前属性的描述符(有一个小小的意外：可以把writable的状态由true改为false,但是无法由false改为true),但是在writable: true的情况下，可以改变value的值
configurable: true时，可以删除当前属性，可以配置当前属性所有描述符。

enumerable 代码片段分析

注意：以下二种区别

定义多个属性

由于为对象定义多个属性的而可能性很大，ECMAScript5又定义了一个Object.definePropertied()方法。利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个对象参数：第一个对象是要添加和修改其属性的对象，第二个对象属性与第一个对象中要添加或修改的属性一一对应。例如：

    var book = {};
    Object.defineProperties(book,{
        name:{
            value:"JavaScript高级编程",
        },
        age:{
            value:23,
            writable:true
        },
        sex:{
            value:"男",
            configurable:true
        },
        lover:{
            get:function(){
                return this.newLover
            },
            set:function(newLover){
                this.newLover = newLover+'88'
            }
        }
    })
    //在使用get set的时候要为这个属性赋值
    book.lover = "muzidigbig";
    console.log(book.lover);//muzidigbig88

    var book = {};
    Object.defineProperties(book,{
        name:{
            value:"JavaScript高级编程",
        },
        age:{
            value:23,
            writable:true
        },
        sex:{
            value:"男",
            configurable:true
        },
        lover:{
            get:function(){
                return this.newLover
            },
            set:function(newLover){
                this.newLover = newLover+'88'
            }
        }
    })
    //在使用get set的时候要为这个属性赋值
    book.lover = "muzidigbig";

    //读取属性的特性值
    var descriptor = Object.getOwnPropertyDescriptor(book,"sex");
    console.log(descriptor);//{value: "男", writable: false, enumerable: false, configurable: true}

不变性

对象常量
结合writable: false 和 configurable: false 就可以创建一个真正的常量属性（不可修改，不可重新定义或者删除）

对象常量

禁止扩展

如果你想禁止一个对象不可扩展, 即不可以新增属性或方法, 但可以修改/删除，就可以使用Object.preventExtensions(...)

在非严格模式下，创建属性gender会静默失败，在严格模式下，将会抛出异常。

3.密封

Object.seal()会创建一个密封的对象，这个对象不可扩展, 即不可以新增属性或方法, 对象不可删除属性, 但可以修改，这个方法实际上会在一个现有对象上调用object.preventExtensions(...)并把所有现有属性标记为configurable:false。

所以，密封之后不仅不能添加新属性，也不能重新配置或者删除任何现有属性（虽然可以改属性的值）

4.冻结

Object.freeze()会创建一个冻结对象，这个方法实际上会在一个现有对象上调用Object.seal(),不可以新增属性或方法, 对象不可删除属性, 不可修改，对象所有属性只读，并把所有现有属性标记为writable: false,这样就无法修改它们的值。

这个方法是你可以应用在对象上级别最高的不可变性，它会禁止对于对象本身及其任意直接属性的修改（但是这个对象引用的其他对象是不受影响的）
你可以深度冻结一个对象，具体方法为，首先这个对象上调用Object.freeze()然后遍历它引用的所有对象，并在这些对象上调用Object.freeze()。但是一定要小心，因为这么做有可能会无意中冻结其他共享对象。

属性定义和属性赋值

最后一小节，总结一下上述内容

属性定义,通过Object.defineProperty()形式

如果Obj没有名为Prop的自身属性的话：如果Obj是可扩展的话，则创建Prop这个自身属性，否则拒绝
如果Obj已经有了名为Prop的自身属性：则按照下面的步骤重新配置这个属性
如果这个已有的属性是不可配置的，则进行下面的操作会被拒绝

1: 将一个数据属性转换成访问器属性，反之变然
2: 改变`[[Configurable]]`或`[[Enumerable]]`
3: 改变[[Writable]]由false变为true
4: 在`[[Writable]]`为`false`时改变`[[Value]]`
5: 改变[[Get]]或[[Set]]

否则这个已有的属性可以被重新配置

属性赋值,通过obj.prop = ''prop"形式

如果在原型链上存在一个名为P的只读属性（只读的数据属性或者没有setter的访问器属性），则拒绝
如果在原型链上存在一个名为P的且拥有setter的访问器属性，则调用这个setter
如果没有名为P的自身属性，则如果这个对象是可扩展的，就创建一个新属性，否则，如果这个对象是不可扩展的，则拒绝
如果已经存在一个可写的名为P的自身属性，则调用Object.defineProperty(),该操作只会更改P属性的值，其他的特性（比如可枚举性）都不会改变

案例：

使用 Object.defineProperty 来实现一个简单双向绑定的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="demo" />
    <div id="xxx">{{name}}</div>
</body>
<script>
    var obj = {};
    //Object.defineProperty();对数据劫持操作
    Object.defineProperty(obj,"name",{
        set:function(value){
            document.getElementById('xxx').innerHTML = value;
            document.getElementById('demo').value = value;
        }
    })
    document.querySelector('#demo').oninput = function(e) {
        obj.name = e.target.value;
    }
    obj.name = '';
</script>
</html>

JS Proxy(代理)

前言

Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。
想了解更多请参考官方文档

语法

let p = new Proxy(target, handler);

参数

target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）即代理对象。
handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。具体的handler相关函数请查阅官网

下面是使用示例，一个简单的代理:

  let test = {
    name: "小红"
  };
  test = new Proxy(test, {
    get(target, key) {
      console.log('获取了getter属性');
      return target[key];
    }
  });
  console.log(test.name);

上方的案例，我们首先创建了一个test对象，里面有name属性，然后我们使用Proxy将其包装起来，再返回给test，此时的test已经成为了一个Proxy实例，我们对其的操作，都会被Proxy拦截。
Proxy有两个参数，第一个是target,也就是我们传入的test对象,另一个则是handler，也就是我们传入的第二个参数，一个匿名对象。在handler中定义了一个名叫get的函数，当我们获取 test的属性时，则会触发此函数。
咱们再来试试使用set来拦截一些操作，并将get返回值更改

  let xiaohong = {
    name: "小红",
    age: 15
  };
  xiaohong = new Proxy(xiaohong, {
    /**
    *    target    被代理的对象
    *    key    读取的属性
    *    receiver    代理对象
    */
    // get 用来指定读取数据的行为，它的返回值就是最终读取到的值
    get(target, key, receiver) {
      let result = target[key];
      //如果是获取 年龄 属性，则添加 岁字
      if (key === "age") result += "岁";
      return result;
    },

  
    // set 会在通过代理修改对象时调用
    set(target, key, value, receiver) {
      if (key === "age" && typeof value !== "number") {
        throw Error("age字段必须为Number类型");
      }
      return Reflect.set(target, key, value);
    }
  });
  console.log(`我叫${xiaohong.name}  我今年${xiaohong.age}了`);
  xiaohong.age = "aa";

上方案例中定义了 xiaohong 对象，其中有 age 和 name 两个字段,我们在Proxy中的 get 拦截函数中添加了一个判断，如果是取 age 属性的值，则在后面添加岁。在 set 拦截函数中判断了如果是更改 age 属性时，类型不是 Number则抛出错误。最后,正确的输出了我们想要的结果!
关于return Reflect.set(target, key, value); 这句代码，可以用其他方式替换，例如 :

  let xiaohong = {
    name: "小红",
    age: 15
  };
  xiaohong = new Proxy(xiaohong, {
    get(target, key) {
      let result = target[key];
      //如果是获取 年龄 属性，则添加 岁字
      if (key === "age") result += "岁";
      return result;
    },
    set(target, key, value) {
      if (key === "age" && typeof value !== "number") {
        throw Error("age字段必须为Number类型");
      }
      target[key] = value;
      // return Reflect.set(target, key, value);
    }
  });
  console.log(`我叫${xiaohong.name}  我今年${xiaohong.age}了`);
  xiaohong.age = 12;

此时会抛出一个错误，因为set函数必须返回一个boolean值，只有返回值为true时才表示修改成功，我们没有手动return，函数会自动返回undefined,undefined != true,所以报错是正常的，只需要手动在最后添加一句 return true即可！
但是，既然JS为我们提供了 Reflect ，那我们肯定是使用它啦，毕竟它和Proxy本来就是一起玩的,Proxy有的函数它都有！具体的参考官方链接
这只是最基础的应用，其他的大家可以自行摸索，都是一样的用法！

总结：

a. defineProperty API 的局限性最大原因是它只能针对单例属性做监听。 Vue2.x 中的响应式实现正是基于 defineProperty 中的 descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因，在 Vue 中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到 setter 监听的，这是 defineProperty 的局限性。

b. Proxy API 的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

c. 响应式是惰性的

在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

参考文献：深入浅出Object.defineProperty() - 简书

muzidigbig

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
深入浅出Object.defineProperty()/new Proxy()---js对象的底层

Object.defineProperty() 和 Proxy 对象，都可以用来对数据的劫持操作。何为数据劫持呢？就是在我们访问或者修改某个对象的某个属性的时候，通过一段代码进行拦截行为，然后进行额外的操作，然后返回结果。那么vue中双向数据绑定就是一个典型的应用。Vue2.x 是使用 Object.defindProperty()，来进行对对象的监听的。Vue3.x 版本之后就改用Prox...
复制链接

扫一扫