JavaScript defineProperty如何实现属性劫持

目录
  • 前言
  • 描述符
  • 细说get 和 set
  • 劫持对象的某个属性
  • 劫持对象的所有属性
  • 劫持对象的所有属性 - 包括对象类型的属性值
  • defineProperty的缺陷
  • defineProperty还可以挂载属性
  • defineProperty还能写日志
  • 总结

前言

defineProperty是vue实现数据劫持的核心,本文一点点的说明defineProperty怎么实现属性劫持的。

其实我们一般的操作对象属性的方式,增加或者修改属性,均可以使用Object.defineProperty。

let obj = {};
// 寻常操作:增加/修改 新属性
obj.a = 1;
// 等同于:
Object.defineProperty(o, "a", {
  value: 1,
  writable: true,
  configurable: true,
  enumerable: true
});

当然寻常的例子,我们是不会这么玩的,太啰嗦了。

但defineProperty可以更精确地添加或修改对象的属性。

描述符

先说个专有名词:描述符。

其实就是defineProperty的第三个参数,是个对象。这个对象的有以下属性:

  • configurable 属性:能不能修改描述符,就是能不能再次修改描述符的其他属性
  • enumerable 属性:能不能枚举该属性,就是 a 属性能不能被 for 到
  • writable 属性:能不能修改属性值,就是能不能这样修改obj.a = 1
  • value 属性:该属性的值
  • get 属性:是个函数,当访问该属性的时候,函数自动调用,函数返回值就是该属性的值
  • set 属性:是个函数,当修改该属性的时候,函数自动调用,函数有且只有一个参数,赋值的新值

注意!!!

  • 描述符里的value属性 writable属性 与 get属性 set属性是互斥的关系,只能存在一个
  • 另外的属性默认值都是false,不想false的话,记得配置哈,不细说(主要我也不怎么用)。

细说get 和 set

  • get 属性:是个函数,当访问该属性的时候,函数自动调用,函数返回值就是该属性的值
  • set 属性:是个函数,当修改该属性的时候,函数自动调用,函数有且只有一个参数,赋值的新值

默念三遍,背诵。

写个get 和 set 的例子辅助理解。

这个例子必须掌握,弄懂之后基本就掌握了数据劫持的精髓了

let obj = {};

let value = 1;
Object.defineProperty(obj, "b", {
  get() {
    console.log("读取b属性", value);
    return value;
  },
  set(newValue) {
    console.log("设置b属性", newValue);
    value = newValue;
  }
});
// 触发get函数,get的返回值就是属性值
// 1
console.log(obj.b);
// 触发set函数,value的值变成了2,注意!!!,此时内存里,属性值并没有改变
obj.b = 2;
// 但是,想要读取属性值的时候,就必然会触发get函数,属性值也自然就改变了,这个思想真的很赞
console.log(obj.b);

这里有个坑:get里是不能有读取的操作,不然一直死循环,所以使用到get set的地方,总需要借助一个变量

所以,这里,变量value的值就是属性的值,如果想要修改属性,修改 value 的值即可。

这个例子弄懂了,get,set 的精髓,我觉得也就差不多了。

劫持对象的某个属性

有了刚刚例子的基础,试着写写劫持对象的任意一个属性。

function observeKey(obj, key) {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      console.log("读取属性", value);
      return value;
    },
    set(newValue) {
      console.log("设置属性", newValue);
      value = newValue;
    }
  });
}
let obj = { a: 1 };
observeKey(obj, "a");
// 读取a,触发get函数
console.log(obj.a);
// 设置a,触发set函数
obj.a = 1;

劫持对象的所有属性

再试试劫持对象的所有属性

其实就是遍历:

function observeObj(obj) {
  for (let key in obj) {
    // 直接使用 obj.hasOwnProperty会提示不规范
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      observeKey(obj, key);
    }
  }
  return obj;
}
function observeKey(obj, key) {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      console.log("读取属性", value);
      return value;
    },
    set(newValue) {
      console.log("设置属性", newValue);
      value = newValue;
    }
  });
}

let obj = { a: 1, b: 2 };
observeObj(obj);
console.log(obj);
// 读取a,触发get函数
console.log(obj.a);
// 设置a,触发set函数
obj.a = 1;

劫持对象的所有属性 - 包括对象类型的属性值

上面的有个缺陷,就是当属性值也是对象的时候,不能劫持属性值,如{a:1,c:{b:1}}

简单,递归,补上就行。

function observeObj(obj) {
  // 加上参数限制,必须是对象才有劫持,也是递归的终止条件
  if (typeof obj !== "object" || obj == null) {
    return;
  }
  for (let key in obj) {
    // 直接使用 obj.hasOwnProperty会提示不规范
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      observeKey(obj, key);
      // 这里劫持该属性的属性值,如果不是对象直接返回,不影响
      observeObj(obj[key]);
    }
  }
  return obj;
}
function observeKey(obj, key) {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      console.log("读取属性", value);
      return value;
    },
    set(newValue) {
      console.log("设置属性", newValue);
      value = newValue;
    }
  });
}

let obj = { a: 1, b: 2, c: { name: "c" } };
observeObj(obj);
console.log(obj);
// 读取a,触发get函数
console.log(obj.a);
// 设置a,触发set函数
obj.a = 1;
// 触发set函数
obj.c.name = "d";

注意,observeObj这个函数,不能劫持对象的新增属性,只能劫持对象已有的属性。

defineProperty的缺陷

  • 不能监测对象增加属性
  • 不能监测对象删除属性
  • 不能劫持数组的修改

当然数组的修改可以通过别的方式监测到的,其是通过劫持改变数组方法实现的。

以上缺陷,也是vue里面为啥有$set/$delete以及对数组只能使用特定方法才能检测到。

let obj = { a: 1, b: [1, 2] };
observeObj(obj);
// 新增属性
obj.c = 3;
// 不会触发get函数
console.log(obj.c);
// 不会触发set函数
obj.b.push(3);

defineProperty还可以挂载属性

其实就是访问options.data.name 可以简写成 options.name,专业话术,将data上的属性挂载到options上

相当于,用defineProperty,在options上增加新属性:

// 先挂载单个属性
// options.data相当于source options相当于target
function proxyKey(target, source, key) {
  Object.defineProperty(target, key, {
    // 这里的source[key]相当于变量value,所以说最简单的那个例子是核心
    get() {
      return source[key];
    },
    set(newValue) {
      if (newValue === source[key]) {
        return;
      }
      source[key] = newValue;
    }
  });
}
// 遍历属性,挂载下
function proxyObj(target, source) {
  for (let key in source) {
    // 直接使用 obj.hasOwnProperty会提示不规范
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      proxyKey(target, source, key);
    }
  }
}
let options = {
  data: { name: 1 }
};
proxyObj(options, options.data);
// 1
console.log(options.name);

话说,vue的属性劫持和挂载属性,核心原理差不多就是上面这些。

defineProperty还能写日志

比如 obj 有个属性,此属性值经常变化,想要记录其所有变化的值,以此可以形成日志。

let obj = { a: 1 };

let log = [obj.a];

let value = obj.a;
Object.defineProperty(obj, "a", {
  get() {
    return value;
  },
  set(newValue) {
    if (newValue === value) {
      return;
    }
    value = newValue;
    log.push(newValue);
  }
});

obj.a = 2;
obj.a = 3;
obj.a = 4;
// [1,2,3,4]
console.log(log);

通用的可以抽离出一个类,专门记录某个值的变化

class Archiver {
  constructor() {
    let value = null;
    this.archive = [];
    Object.defineProperty(this, "a", {
      get() {
        return value;
      },
      set(newValue) {
        if (newValue === value) {
          return;
        }
        value = newValue;
        this.archive.push(newValue);
      }
    });
  }
}
let archiver = new Archiver();
archiver.a = 1;
archiver.a = 2;
// [1,2]
console.log(archiver.archive);

引用

MDN的defineProperty

总结

到此这篇关于JavaScript defineProperty如何实现属性劫持的文章就介绍到这了,更多相关defineProperty属性劫持内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-07-16

javascript动态创建对象的属性详解

面向对象的JavaScript在客户端编码时提供了极大的灵活性,Javascript对象上的属性有助于设置可在对象内使用以管理和使用数据的值. 我对JavaScript中属性的理解,在javascript中,可以通过在文字对象上定义变量来创建属性. 例如 var obj = { property1: '', property2: '' }; 现在可以通过使用来访问这些属性 obj.property1 = 'some value'; obj.property2 = 'some other valu

JavaScript 中 avalon绑定属性总结

avalon是前端MVVM框架,将所有前端代码彻底分成两部分,视图的处理通过绑定实现(angular有个更炫酷的名词叫指令),业务逻辑则集中在一个个叫VM的对象中处理.我们只要操作VM的数据,它就自然而然地神奇地同步到视图. $model(所有非$属性),$event(事件对象) 1.作用域圈定 ms-controller:按着就近原则自下而上扫描DOM树 ms-important:仅扫描本节点及之下作为扫描区 ms-skip:使绑定失效 2.ms-duplex双向绑定属性:除了绑定(VM同步数

javascript通过获取html标签属性class实现多选项卡的方法

本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生javascript通过获取html标签属性class实现多选项卡</title> <style type="text/css">

JavaScript动态改变div属性的实现方法

本文实例讲述了JavaScript动态改变div属性的实现方法.分享给大家供大家参考.具体如下: 这里可以通过JS动态改变div属性,样式等 <script type="text/javascript"> var oBox = document.getElementById('box'); var oDiv = document.getElementById('div1'); var aInput = document.getElementsByTagName('input

JavaScript中的全局属性与方法深入解析

今天来补充JavaScript中的最后一部分内容,JavaScript中的全局属性和方法(函数). 1.全局属性 // 属性 // Infinity 代表正的无穷大的数值. // 在Javascript中,超出 1.7976931348623157E+103088 的数值即为Infinity,小于 -1.7976931348623157E+103088 的数值为无穷小. var num1 = 1.7976931348623157E+103088; var num2 = -1.7976931348

每天一篇javascript学习小结(属性定义方法)

定义(Definition).定义属性需要使用相应的函数,比如: Object.defineProperty(obj, "prop", propDesc) 如果obj没有prop这个自身属性,则该函数的作用是给obj添加一个自身属性prop并赋值, 参数propDesc指定了该属性拥有的特性(可写性,可枚举性等). 如果obj已经有了prop这个自身属性,则该函数的作用是修改这个已有属性的特性,当然也包括它的属性值. 1.defineProperty var book = { _yea

JavaScript对象的property属性详解

JavaScript中对象的property有三个属性:1.writable.该property是否可写.2.enumerable.当使用for/in语句时,该property是否会被枚举.3.configurable.该property的属性是否可以修改,property是否可以删除. 在ECMAScript 3标准中,上面三个属性的值均为true且不可改:新建对象的property是可写的.可被枚举的.可删除的:而在ECMAScript 5标准中,可通过property的描述对象(prope

JavaScript正则表达式之multiline属性的应用

多行正则表达式是对象的只读布尔属性.它指定是否一个特定的正则表达式进行多行匹配,即,不管是否使用"m"属性创建. 语法 RegExpObject.multiline 下面是参数的详细信息: NA 返回值: 如果"m"修改被设置返回"TRUE",否则返回"FALSE". 例子: <html> <head> <title>JavaScript RegExp multiline Property&

JavaScript 正则表达式之RegExp属性、方法及应用分析

使用RegExp的显式构造函数,语法为:new RegExp("pattern"[,"flags"]). 使用RegExp的隐式构造函数,采用纯文本格式:/pattern/[flags]. pattern部分为要使用的正则表达式模式文本,是必须的.在第一种方式中,pattern部分以JavaScript字符串的形式存在,需要使用双引号或单引号括起来:在第二种方式中,pattern部分嵌套在两个"/"之间,不能使用引号. flags部分设置正则表达

JavaScript window.document的属性、方法和事件小结

javascript中window.document的属性.方法和事件的总结,有需要的朋友可参考一下本文章. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以DTD或XML模式给出的节点的定义(只读) Doctype 指定文档类型节点(只读) documentElement 返回文档的根元素(可读写) firstChild 返回当前节点的第一个子节点(只读) Implem