博客
关于我
JS基礎:Object.DefineProperty
阅读量:337 次
发布时间:2019-03-04

本文共 2734 字,大约阅读时间需要 9 分钟。

Object.defineProperty

文章目录

簡介

Vue, React 等多數前端框架在做動態綁定的時候都用到了觀察者模式以及數據劫持方法,本篇就從 Object.defineProperty 方法的角度切入,悉數 JS 對象的屬性到底都隱含了哪些特徵,讓我們能對 JS 對象屬性的訪問控制有更深刻的了解。

參考

MDN web docs
Property Descriptor

正文

語法

Object.defineProperty(obj, prop, descriptor)

參數說明

  • obj:被定義的對象
  • prop:要定義或修改的 key(鍵或稱為屬性)
  • descriptor:屬性描述

查詢屬性描述

Object.getgetOwnPropertyDescriptor(obj, key)

可檢視對象中指定屬性的描述

Property Descriptor 屬性描述

defineProperty 中第三個參數的各個屬性詳解

configurable 可配置性

定義數據是否可被刪除(delete)或修改其他屬性,只可以透過 defineProperty 將 writable 從 true 改成 false。

默認值為 true

Sample

let obj = {    id: 3, name: 'John' }Object.defineProperty(obj, 'name', {     configurable: false})delete obj.name // 嚴格模式下報錯console.log(obj) // obj: { id: 3, name: 'John' }, 屬性未被刪除

enumerable 可枚舉性

決定對象的某個屬性是否可被枚舉,即影響到 for in, Object.keys, JSON.stringify。

  • 默認值:
    • 用戶自訂義的屬性為 true
    • 原形繼承的屬性為 false
    • 透過 defineProperty 新增的屬性為 false

Sample

function printKeysInThreeWays(obj) {     for (let key in obj) {       console.log(key)  }  console.log(Object.keys(obj))  console.log(JSON.stringify(obj))}let obj = {    id: 3, name: 'john' }printKeysInThreeWays(obj)// id// name// [ 'id', 'name' ]Object.defineProperty(obj, 'name', {     enumerable: false})printKeysInThreeWays(obj)// id// [ 'id' ]// {"id":3}

value 值

定義屬性的值,未設置時默認為 undefined

默認值為 undefined

Sample

let obj = {    id: 3, name: 'john' }Object.defineProperty(obj, 'age', {     value: 3})console.log(obj)// { id: 3, name: 'john' }console.log(Object.getOwnPropertyDescriptor(obj, 'age'))// { value: 3, writable: false, enumerable: false, configurable: false }Object.defineProperty(obj, 'name', {     enumerable: true})console.log(obj)// { id: 3, name: 'john', company: undefined }

writable 可修改性

設定一個屬性的可修改性,簡單來說就是 set 方法的開關

默認值為 true

Sample

let obj = {    id: 3, name: 'john' }obj.name = 'Sandy'Object.defineProperty(obj, 'name', {     writable: false})obj.name = 'Bob'console.log(obj)// { id: 3, name: 'Sandy' }

Accessor Properties 屬性訪問器(getter/setter)

顯示定義屬性的訪問和設置函數(getter/setter),不可與 value 屬性同時出現,綁定變量時類似閉包的表現。

默認值 不存在,不可與 value 同時出現

Sample

let _name = 'John'let obj = {    age: 18 }Object.defineProperty(obj, 'id', {     value: 0,  enumerable: true})Object.defineProperty(obj, 'name', {     enumerable: true,  get: function () {       return _name  },  set: function (name) {       _name = name  }})let val = obj.ageObject.defineProperty(obj, 'age', {     get: function () {       console.log(`get age`)    return val  },  set: function (newVal) {       console.log(`set age = ${     newVal}`)    val = newVal  }})console.log(obj)// { age: 100, id: 0, name: "John" }console.log(obj.name)// Johnconsole.log(obj.age)// get age// 18obj.age = 100// set age = 100

結語

本篇簡單介紹 JS Object 的各個屬性描述符的作用,同時隱隱約約能看出數據劫持的端倪,後面會更進階的介紹透過一些 Object 的方法操作屬性描述符、Vue2 使用的數據劫持原理等。

转载地址:http://tkhh.baihongyu.com/

你可能感兴趣的文章
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>
multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
查看>>
MySQL DBA 数据库优化策略
查看>>
multi_index_container
查看>>
mutiplemap 总结
查看>>
MySQL Error Handling in Stored Procedures---转载
查看>>
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>
Mysql group by
查看>>
MySQL I 有福啦,窗口函数大大提高了取数的效率!
查看>>
mysql id自动增长 初始值 Mysql重置auto_increment初始值
查看>>
MySQL in 太多过慢的 3 种解决方案
查看>>
Mysql Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>