理解Object.defineProperty函数中的get与set

defineProperty是什么:

该函数可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。通俗理解就是:

给对象添加一个新的属性,或者针对对象里的某些属性,可以给这个属性设置一些特性,比如是否只读,是否可以被for..inObject.keys()遍历等

语法:

Object.defineProperty(obj, prop, descriptor)

例如:

var obj = {};

Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

设置特性的方式有2种:数据描述符存取描述符。

数据描述符存取描述符都具有以下2个属性:

configurable:  是否可以删除目标属性或是否可以再次修改属性的特性

enumerable:  此属性是否可以被枚举(使用for...in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。

数据描述符另外具有以下2个属性:

writable: 属性的值是否可以被重写。设置为true可以被重写;设置为false,不能被重写。默认为false

value: 属性对应的值,可以使任意类型的值,默认为undefined

存取描述符另外具有以下2个属性:

getter :是一种获得属性值的方法

setter:是一种设置属性值的方法。

get于set具体用法如下:

var obj = {},book = ‘三国演义‘;

Object.defineProperty(obj,‘book‘,{
    get: function(){      //返回经过处理后的变量
        return ‘<<‘+book+‘>>‘
    },
    set: function(val){    //利用临时变量接收赋值
        book = val
   }
})

console.log(obj.book) ==> "<<三国演义>>"

obj.book = ‘西游记‘

console.log(obj.book) ==> "<<西游记>>"

该方式可以实现对某些属性返回特定格式的值。如果觉得临时变量不好看,可以换成下面的写法:

var obj = {__book:‘三国演义‘}

Object.defineProperty(obj,‘book‘,{
    get: function(){      
        return ‘<<‘+this.__book+‘>>‘
    },
    set: function(val){     //this指向原对象,定义一个属性用来接收赋值
        this.__book = val
   }
})

console.log(obj.book) ==> "<<三国演义>>"

obj.book = ‘水浒传‘

console.log(obj.book) ==> "<<水浒传>>"

注意:get或set不是必须成对出现,任写其一就可以。如果不设置方法,则get和set的默认值为undefined

 

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

 

 

原文地址:https://www.cnblogs.com/soraly/p/10305157.html

时间: 2024-11-05 17:32:20

理解Object.defineProperty函数中的get与set的相关文章

深入理解 Object.defineProperty

Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外的操作,然后返回结果.那么vue中双向数据绑定就是一个典型的应用. Vue2.x 是使用 Object.defindProperty(),来进行对对象的监听的.Vue3.x 版本之后就改用Proxy进行实现的.下面我们先来理解下Object.defineProperty作用. 一: 理解Object

Object.defineProperty 函数 (JavaScript)

将属性添加到对象,或修改现有属性的特性. 语法 Object.defineProperty(object, propertyname, descriptor) 参数 object 必需.  要在其上添加或修改属性的对象.  这可能是一个本机 JavaScript 对象(即用户定义的对象或内置对象)或 DOM 对象. propertyname 必需.  一个包含属性名称的字符串. descriptor 必需.  属性描述符.  它可以针对数据属性或访问器属性. 返回值 已修改对象. 备注 可使用 

理解 JS 回调函数中的 this

理解 JS 回调函数中的 this:https://www.cnblogs.com/gavinyyb/p/6286750.html 原文链接:http://www.tuicool.com/articles/z2Yvaq 任何变量或对象都有其赖以生存的上下文.如果简单地将对象理解为一段代码,那么对象处在不同的上下文,这段代码也会执行出不同的结果. 例如,我们定义一个函数 getUrl 和一个对象 pseudoWindow . function getUrl() { console.log(this

理解Object.defineProperty()

Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 基本语法:Object.defineProperty(obj, prop, descriptor)@param obj [必须]目标对象@param prop[必须]新增或修改的属性名字@param descriptor 属性描述符.属性描述符 包括两种形式:数据描述符和存取描述符.数据描述符是一个拥有可写或不可写值的属性.存取描述符是由一对getter-sette

《转》理解Object.defineProperty的作用

对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = "张三"; //添加描述 obj.say = function(){}; //添加行为 除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的属性. Object.defineProperty() 语法: Object.definePropert

理解Object.defineProperty的作用

对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = "张三"; //添加描述 obj.say = function(){}; //添加行为 除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的属性. Object.defineProperty() 语法: Object.definePropert

[转] 理解Object.defineProperty的作用

对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = "张三"; //添加描述 obj.say = function(){}; //添加行为 除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的属性. Object.defineProperty() 语法: Object.definePropert

深入理解ES6箭头函数中的this

简要介绍:箭头函数中的this,指向与一般function定义的函数不同,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. (1)一般函数this指向在执行是绑定  当运行obj.say()时候,this指向的是obj这个对象. var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 (2)所谓的定义时候绑定,就

Object.defineProperty() 以及 vue 中双数据绑定的底层原理

Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是Object对象其实包含了很多很有用的属性和方法,尤其是ES5增加的方法,今天我们先探讨一下Object.defineProperty(). Object.defineProperty 给一个对象添加或者修改属性 返回的是一个对象 语法 Object.defineProperty(obj, prop