defineProperty 与 proxy 详解

2024-04-12 19:36
文章标签 详解 proxy defineproperty

本文主要是介绍defineProperty 与 proxy 详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

前言

definePropety

Setters 和 Getters

watch API

proxy

watch API 优化

Vue3.0 里为什么要用 Proxy 替代 defineProperty ?

Proxy 和 Object.defineProperty 的区别？

前言

我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？

definePropety

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

语法

Object.defineProperty(obj, prop, descriptor)

  • obj: 要在其上定义属性的对象
  • prop:  要定义或修改的属性的名称
  • descriptor: 将被定义或修改的属性的描述符

举个例子：

var obj = {};
Object.defineProperty(obj, "num", {value : 1,writable : true,enumerable : true,configurable : true
});
//  对象 obj 拥有属性 num，值为 1

虽然我们可以直接添加属性和值，但是使用这种方式，我们能进行更多的配置。

函数的第三个参数 descriptor 所表示的属性描述符有两种形式：数据描述符和存取描述符。

两者均具有以下两种键值：

  • configurable：当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，也能够被删除。默认为 false。
  • enumerable：当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值：

  • value：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined
  • writable：当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值：

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

值得注意的是：

属性描述符必须是数据描述符或者存取描述符两种形式之一，不能同时是两者。

这就意味着你可以：

Object.defineProperty({}, "num", {value: 1,writable: true,enumerable: true,configurable: true
});

也可以：

var value = 1;
Object.defineProperty({}, "num", {get : function(){return value;},set : function(newValue){value = newValue;},enumerable : true,configurable : true
});

但是不可以：

// 报错
Object.defineProperty({}, "num", {value: 1,get: function() {return 1;}
});

此外，所有的属性描述符都是非必须的，但是 descriptor 这个字段是必须的，如果不进行任何配置，你可以这样：

var obj = Object.defineProperty({}, "num", {});
console.log(obj.num); // undefined

Setters 和 Getters

之所以讲到 defineProperty，是因为我们要使用存取描述符中的 get 和 set，这两个方法又被称为 getter 和 setter。由 getter 和 setter 定义的属性称做”存取器属性“。

当程序查询存取器属性的值时，JavaScript 调用 getter方法。这个方法的返回值就是属性存取表达式的值；当程序设置一个存取器属性的值时，JavaScript 调用 setter 方法，将赋值表达式右侧的值当做参数传入 setter。从某种意义上讲，这个方法负责“设置”属性值。可以忽略 setter 方法的返回值。

举个例子：

var obj = {}, value = null;
Object.defineProperty(obj, "num", {get: function(){console.log('执行了 get 操作')return value;},set: function(newValue) {console.log('执行了 set 操作')value = newValue;}
})
// 执行了 set 操作
obj.num = 1
// 执行了 get 操作
console.log(obj.num); 
// 输出 1

这不就是我们要的监控数据改变的方法吗？我们再来封装一下：

function Archiver() {var value = null;// archive n. 档案var archive = [];Object.defineProperty(this, 'num', {get: function() {console.log('执行了 get 操作')return value;},set: function(value) {console.log('执行了 set 操作')value = value;archive.push({ val: value });}});this.getArchive = function() { return archive; };
}var arc = new Archiver();
// 执行了 get 操作
arc.num; 
// 执行了 set 操作
arc.num = 11;
// 执行了 set 操作 
arc.num = 13; 
console.log(arc.getArchive()); 
// [{ val: 11 }, { val: 13 }]

watch API

既然可以监控数据的改变，那我可以这样设想，即当数据改变的时候，自动进行渲染工作。举个例子：

HTML 中有个 span 标签和 button 标签

<span id="container">1</span>
<button id="button">点击加 1</button>

当点击按钮的时候，span 标签里的值加 1。

传统的做法是：

document.getElementById('button').addEventListener("click", function(){var container = document.getElementById("container");container.innerHTML = Number(container.innerHTML) + 1;
});

如果使用了 defineProperty：

var obj = {value: 1
}// 储存 obj.value 的值
var value = 1;Object.defineProperty(obj, "value", {get: function() {return value;},set: function(newValue) {value = newValue;document.getElementById('container').innerHTML = newValue;}
});document.getElementById('button').addEventListener("click", function() {obj.value += 1;
});

代码看似增多了，但是当我们需要改变 span 标签里的值的时候，直接修改 obj.value 的值就可以了。

然而，现在的写法，我们还需要单独声明一个变量存储 obj.value 的值，因为如果你在 set 中直接 obj.value = newValue 就会陷入无限的循环中。此外，我们可能需要监控很多属性值的改变，要是一个一个写，也很累呐，所以我们简单写个 watch 函数。使用效果如下：

var obj = {value: 1
}watch(obj, "value", function(newvalue){document.getElementById('container').innerHTML = newvalue;
})document.getElementById('button').addEventListener("click", function(){obj.value += 1
});

我们来写下这个 watch 函数：

(function(){var root = this;function watch(obj, name, func){var value = obj[name];Object.defineProperty(obj, name, {get: function() {return value;},set: function(newValue) {value = newValue;func(value)}});if (value) obj[name] = value}this.watch = watch;
})()

现在我们已经可以监控对象属性值的改变，并且可以根据属性值的改变，添加回调函数

proxy

使用 defineProperty 只能重定义属性的读取（get）和设置（set）行为，到了 ES6，提供了 Proxy，可以重定义更多的行为，比如 in、delete、函数调用等更多行为。

Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。我们来看看它的语法：

var proxy = new Proxy(target, handler);

proxy 对象的所有用法，都是上面这种形式，不同的只是 handler 参数的写法。

  • target 参数表示所要拦截的目标对象
  • handler 参数也是一个对象，用来定制拦截行为
var proxy = new Proxy({}, {get: function(obj, prop) {console.log('设置 get 操作')return obj[prop];},set: function(obj, prop, value) {console.log('设置 set 操作')obj[prop] = value;}
});// 设置 set 操作
proxy.time = 35; 
// 设置 get 操作
console.log(proxy.time);  
// 35

除了 get 和 set 之外，proxy 可以拦截多达 13 种操作，比如 has(target, propKey)，可以拦截 propKey in proxy 的操作，返回一个布尔值。

// 使用 has 方法隐藏某些属性，不被 in 运算符发现
var handler = {has (target, key) {if (key[0] === '_') {return false;}return key in target;}
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
console.log('_prop' in proxy); 
// false

又比如说 apply 方法拦截函数的调用、call 和 apply 操作。

apply 方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组，不过这里我们简单演示一下：

var target = function () { return 'I am the target'; };
var handler = {apply: function () {return 'I am the proxy';}
};var p = new Proxy(target, handler);p();
// "I am the proxy"

又比如说 ownKeys 方法可以拦截对象自身属性的读取操作。具体来说，拦截以下操作：

  • Object.getOwnPropertyNames()

  • Object.getOwnPropertySymbols()

  • Object.keys()

下面的例子是拦截第一个字符为下划线的属性名，不让它被 for of 遍历到。

let target = {_bar: 'foo',_prop: 'bar',prop: 'baz'
};let handler = {ownKeys (target) {return Reflect.ownKeys(target).filter(key => key[0] !== '_');}
};let proxy = new Proxy(target, handler);
for (let key of Object.keys(proxy)) {console.log(target[key]);
}
// "baz"

值得注意的是，proxy 的最大问题在于浏览器支持度不够，而且很多效果无法使用 polyfill 来弥补。

watch API 优化

我们使用 proxy 再来写一下 watch 函数。使用效果如下：

(function() {var root = this;function watch(target, func) {var proxy = new Proxy(target, {get: function(target, prop) {return target[prop];},set: function(target, prop, value) {target[prop] = value;func(prop, value);}});return proxy;}this.watch = watch;
})()var obj = {value: 1
}var newObj = watch(obj, function(key, newvalue) {if (key == 'value') {document.getElementById('container').innerHTML = newvalue;}
})document.getElementById('button').addEventListener("click", function() {newObj.value += 1
});

我们也可以发现，使用 defineProperty 和 proxy 的区别，当使用 defineProperty，我们修改原来的 obj 对象就可以触发拦截，而使用 proxy，就必须修改代理对象，即 Proxy 的实例才可以触发拦截。

Vue3.0 里为什么要用 Proxy 替代 defineProperty ?

主要是从性能方面考量 

defineProperty：该 API 存在一些局限性，比如对于数组的拦截有问题，为此 Vue 需要专门为数组响应式做一套实现。另外不能拦截那些新增、删除属性。最后 defineProperty 方案在初始化时需要深度递归遍历待处理的对象才能对它进行完全拦截，明显增加了初始化的时间。

以上两点在 Proxy 出现之后迎刃而解。

Proxy：不仅可以对数组实现拦截，还能对 Map、Set 实现拦截。另外 Proxy 的拦截也是懒处理行为。如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占用都改善了。

Vue的代理也是最开始只代理最外层的对象，在访问的时候去判断是否为一个 object，然后再去用 proxy 包裹

当然 Proxy 是有兼容性问题的，IE 完全不支持，所以如果需要 IE 兼容就不合适 

Proxy 和 Object.defineProperty 的区别？

都可以用来实现 JavaScript 对象的响应式，但是它们有一些区别：

① 实现方式

  • Proxy 是 ES6 新增的一种特性，使用了一种代理机制来实现响应式。
  • Object.defineProperty 是在 ES5 中引入的，使用了 getter 和 setter 方法来实现。

② 作用对象

  • Proxy 可以代理整个对象，包括对象的所有属性、数组的所有元素以及类似数组对象的所有元素。
  • Object.defineProperty 只能代理对象上定义的属性。

③ 监听属性

  • Proxy 可以监听到新增属性和删除属性的操作
  • Object.defineProperty 只能监听到已经定义的属性的变化。

④ 性能

由于 Proxy 是 ES6 新增特性，其内部实现采用了更加高效的算法，相对于 Object.defineProperty来说在性能方面有一定的优势。

综上所述，虽然 Object.defineProperty 在 Vue.js 2.x 中用来实现响应式，但是在 Vue.js 3.0 中已经采用了 Proxy 来替代。

这是因为 Proxy 相对于 Object.defineProperty 拥有更优异的性能和更强大的能力。

这篇关于defineProperty 与 proxy 详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/898042。

相关文章

Java中注解与元数据示例详解

Java中注解与元数据示例详解

《Java中注解与元数据示例详解》Java注解和元数据是编程中重要的概念,用于描述程序元素的属性和用途,：本文主要介绍Java中注解与元数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参... 目录一、引言二、元数据的概念2.1 定义2.2 作用三、Java 注解的基础3.1 注解的定义3.2 内
阅读更多...
JavaScript中的isTrusted属性及其应用场景详解

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为
阅读更多...
使用Python实现操作mongodb详解

使用Python实现操作mongodb详解

《使用Python实现操作mongodb详解》这篇文章主要为大家详细介绍了使用Python实现操作mongodb的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、示例二、常用指令三、遇到的问题一、示例from pymongo import MongoClientf
阅读更多...
一文详解Python中数据清洗与处理的常用方法

一文详解Python中数据清洗与处理的常用方法

《一文详解Python中数据清洗与处理的常用方法》在数据处理与分析过程中,缺失值、重复值、异常值等问题是常见的挑战,本文总结了多种数据清洗与处理方法,文中的示例代码简洁易懂,有需要的小伙伴可以参考下... 目录缺失值处理重复值处理异常值处理数据类型转换文本清洗数据分组统计数据分箱数据标准化在数据处理与分析过
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...
详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...
SQL注入漏洞扫描之sqlmap详解

SQL注入漏洞扫描之sqlmap详解

《SQL注入漏洞扫描之sqlmap详解》SQLMap是一款自动执行SQL注入的审计工具,支持多种SQL注入技术,包括布尔型盲注、时间型盲注、报错型注入、联合查询注入和堆叠查询注入... 目录what支持类型how---less-1为例1.检测网站是否存在sql注入漏洞的注入点2.列举可用数据库3.列举数据库
阅读更多...
Linux之软件包管理器yum详解

Linux之软件包管理器yum详解

《Linux之软件包管理器yum详解》文章介绍了现代类Unix操作系统中软件包管理和包存储库的工作原理,以及如何使用包管理器如yum来安装、更新和卸载软件,文章还介绍了如何配置yum源,更新系统软件包... 目录软件包yumyum语法yum常用命令yum源配置文件介绍更新yum源查看已经安装软件的方法总结软
阅读更多...
java图像识别工具类(ImageRecognitionUtils)使用实例详解

java图像识别工具类(ImageRecognitionUtils)使用实例详解

《java图像识别工具类(ImageRecognitionUtils)使用实例详解》：本文主要介绍如何在Java中使用OpenCV进行图像识别,包括图像加载、预处理、分类、人脸检测和特征提取等步骤... 目录前言1. 图像识别的背景与作用2. 设计目标3. 项目依赖4. 设计与实现 ImageRecogni
阅读更多...
Java访问修饰符public、private、protected及默认访问权限详解

Java访问修饰符public、private、protected及默认访问权限详解

《Java访问修饰符public、private、protected及默认访问权限详解》：本文主要介绍Java访问修饰符public、private、protected及默认访问权限的相关资料,每... 目录前言1. public 访问修饰符特点：示例：适用场景：2. private 访问修饰符特点：示例：
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2