解析Object.defineProperty的作用

Posted yscode

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解析Object.defineProperty的作用相关的知识,希望对你有一定的参考价值。

vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截器。

接下来看一下Object.defineProperty使用方式:

Object.defineProperty(obj, prop, descriptor)
obj:必需。目标对象
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性
当修改或定义对象的某个属性的时候,给这个属性添加一些特性:

一、访问器属性

访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义。

var obj = { };

为obj定义一个名为 hello 的访问器属性

Object.defineProperty(obj, "hello", {

  get: function () {return sth},

  set: function (val) { do sth;}

})

 obj.hello 可以像普通属性一样读取访问器属性

访问器属性的"值"比较特殊,读取或设置访问器属性的值,实际上是调用其内部特性:get和set函数。

obj.hello 读取属性,就是调用get函数并返回get函数的返回值

obj.hello = "abc" 为属性赋值,就是调用set函数,赋值其实是传参

get 和 set 方法内部的 this 都指向 obj,这意味着 get 和 set 函数可以操作对象内部的值。另外,访问器属性的会"覆盖"同名的普通属性,因为访问器属性会被优先访问,与其同名的普通属性则会被忽略。

实例:

技术分享图片

html:<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
  <input type="text" id="input"/>
  <span id="binding"></span>

</body></html>

JS:

var obj = {};

Object.defineProperty(obj,‘hello‘,{
  set:function(val){
      document.getElementById(‘binding‘).innerHTML = val;
      document.getElementById(‘input‘).value = val;
  }
});
document.getElementById(‘input‘).oninput=function(e){
      obj.hello = e.target.value;
}
obj.hello = "";

 





















以上是关于解析Object.defineProperty的作用的主要内容,如果未能解决你的问题,请参考以下文章

解析 神奇的 Object.defineProperty

解析神奇的 Object.defineProperty

Vue响应式原理(Object.defineProperty)全过程解析

理解Object.defineProperty()

Object.defineProperty 方法

理解Object.defineProperty方法