Object.defineProperty(js的问题)

简介: Object.defineProperty(js的问题)

定义

Object.defineProperty(obj, prop, descriptor)
 
/*
obj:需要定义属性的对象
prop:需要定义的属性
descriptor:属性的描述描述符
返回值:返回此对象
*/
var obj = {}
 
// 数据描述符
var descriptor = {
  // 能否delete删除,
  configurable: false,
  // 是否可写,默认false, 不能被赋值,只读
  writable: false,
  // 是否可枚举,即是否可以for...in访问属性,默认false
  enumerable: false,
  // 属性值,默认undefined
  value: 'hello',
 
  // 访问器描述符,不能与数据描述符同时使用
  // get: 读取,默认undefined
  // set: 设置,默认undefined
}
 
Object.defineProperty(obj, 'name', descriptor)
console.log(obj.name)

示例:数据响应式 vue

function defineReactive(obj, key, val) {
  // val,由于闭包的存在,不会被销毁
  Object.defineProperty(obj, key, {
    get() {
      console.log('get');
      return val;
    },
    set(newVal) {
      if (newVal != val) {
        console.log('set');
        val = newVal;
      }
    },
  });
}
 
 
var obj = {};
defineReactive(obj, 'foo', '123')
console.log(obj.foo); // get  123
 
obj.foo = '223' // set
console.log(obj.foo);  // get 223
相关文章
|
4月前
|
JavaScript 前端开发
【面试题】 JS手写ES6的Object.create方法
【面试题】 JS手写ES6的Object.create方法
|
12天前
|
存储 JavaScript 前端开发
JS篇(Array、Object)
JS篇(Array、Object)
9 1
|
21天前
|
JavaScript 前端开发 开发者
Vue.js 响应式变革来袭!结合热点技术,探索从 Object.defineProperty 到 Proxy 的奇妙之旅,触动你的心
【8月更文挑战第30天】在 Vue.js 中,响应式系统自动追踪并更新数据变化,极大提升了开发体验。早期通过 `Object.defineProperty` 实现,但存在对新旧属性处理及数组操作的局限。Vue 3.0 引入了 `Proxy`,克服了上述限制,提供了更强大的功能和更好的性能。实践中,可根据项目需求选择合适的技术方案,并优化数据操作,利用懒加载等方式提升性能。
28 0
|
2月前
|
JSON JavaScript API
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
35 0
|
4月前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
87 2
|
4月前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`'1.2,2,3,4,5'`)转换为对象数组。通过使用`split(',')`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
321 2
|
4月前
|
JavaScript
JS之Object.defineProperty方法
JS之Object.defineProperty方法
|
4月前
|
JavaScript 前端开发 Java
编程笔记 html5&css&js 073 JavaScript Object数据类型
编程笔记 html5&css&js 073 JavaScript Object数据类型
|
4月前
|
存储 JavaScript
JS中Map对象与object的区别
JS中Map对象与object的区别
|
4月前
|
JavaScript 前端开发
如何巧妙使用`Object.keys`方法将`JS`的一个对象的特定的值赋值给另外一个对象
如何巧妙使用`Object.keys`方法将`JS`的一个对象的特定的值赋值给另外一个对象
30 0