JavaScript笔记之数据属性和存储器属性_javascript技巧

在javascript中,对象的属性分为数据属性和存储器属性两种:

两种属性的区别

我们使用Object.defineProperty()先来直观的感受一下这两者的不同。

使用Object.defineProperty()对数据属性进行设置的方法如下

var obj = {};
Object.defineProperty(obj, "prop", {
value: 1,
writable: true, //可写性
enumerable: true, //可枚举性
configurable: true //设置该属性是否能被删除,以及enumerable属性是否可以被修改
})

使用Object.defineProperty()对存储器属性的设置方法如下

var obj = {};
Object.defineProperty(obj, "prop", {
get
set
enumerable: true, //可枚举性
configurable: true //设置该属性是否能被删除,以及enumerable属性是否可以被修改
})

从上面的例子中,我们观察到存储器属性并没有value和writable两个属性,取而代之的是set和get属性。

存储器属性

看完了数据属性和存储器属性直观上的差异,我们详细看一看存储器属性这个容易会被忽视(说的就是我TT)的属性。

存储器属性与数据属性最大的不同就是增加了getter/setter,通过它们可以对属性的值进行操作,可以实现一些实用的功能。

//example1
function serialnum() {
var n =1;
var prop = null;
Object.defineProperty(this, "n", {
get: function() {
return n;
},
set: function(value) {
if(value > n) n = value;
else throw '请输入一个大于n的值';
}
})
}
var obj = new serialnum();
obj.n = 2;
//2
obj.n = 0;
//Uncaught 请输入一个大于n的值

上面的例子中,使用set函数对n的取值范围进行控制。

关于js数据属性存储属性小编就给大家介绍到这里,希望对大家有所帮助!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js数据属性
js存储器属性
存储器ic的应用技巧、存储器属性、李炎恢javascript笔记、javascript笔记、javascript学习笔记,以便于您获取更多的相关知识。

时间: 2024-10-13 10:42:16

JavaScript笔记之数据属性和存储器属性_javascript技巧的相关文章

javascript实现复选框选中属性_javascript技巧

熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了.今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解. 如果你从事web开发并且在你开发的网页中有复选框,你可能需要判断当前该复选框是否选中,进而执行一些条件语句.有很多种方法来判断一个复选框是否选中. 让我们先来看看原生的javascr

JavaScript 拾碎[三] 使用className属性_javascript技巧

A 三位一体的页面 网页的结构层(Structure )由HTML 或XHTML 创建: 网页的表现层(Presentation )由CSS 来创建: 网页的行为层(Behavior )由Javascript 和DOM 所完成: 其实,网页的表现层和行为层总是存在的,即使用户没有去定义.因为Web 浏览器会把自身默认的样式和事件加载到网页的结构层上. B 使用className 属性 Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化

JavaScript常用脚本汇总(二)_javascript技巧

把JavaScript中的伪数组转换为真数组 在 JavaScript 中, 函数中的隐藏变量 arguments 和用 getElementsByTagName 获得的元素集合(NodeList)都不是真正的数组,不能使用 push 等方法,在有这种需要的时候只能先转换为真正的数组. 对于 arguments,可以使用 Array.prototype.slice.call(arguments); 来达到转换的目的,但对于 NodeList 则不行了,其在 IE8 及以下将会报错,只能说其 JS

javascript设计模式Constructor(构造器)模式_javascript技巧

Constructor是一种在内存已分配给该对象的情况下,用于初始化新创建对象的特殊方法.Object构造器用于创建特定类型的对象–准备好对象以备使用,同事接收构造器可以使用参数,以在第一次创建对象时,设置成员属性和方法值. 对象创建 创新新对象,在javascript中通常有两种方法:  1.对象直面量方法 var newObj = {};  2.构造器的简洁方法 var newObj = new Object(); 在Object构造器为特定的值创建对象封装,或者没有传递值时,它将创建一个肯

JavaScript 新手24条实用建议[TUTS+]_javascript技巧

注:本文多次用到Firebug的console对象,请参考Firebug Console API .关于firebug的更详细介绍,请猛击这里.1. 用 === 代替 == JavaScript里有两种不同的相等运算符:===|!== 和==|!=.相比之下,前者更值得推荐.请尽量使用前者. 引用: "如果两个比较对象有着同样的类型和值,===返回true,!==返回false." – JavaScript: The Good Parts 不过,如果使用==和!=,在操作不同数据类型时

JavaScript数组去重的五种方法_javascript技巧

javascript数组去重是一个比较常见的需求,解决方法也有很多种,网上都可以找到答案的,下面小编给大家整理了一份关于同类型的数组去重的方法,先给大家介绍下简单实现思路. 思路: 遍历数组,一一比较,比较到相同的就删除后面的 遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: functio

JavaScript和CSS交互的方法汇总_javascript技巧

用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-element)的属性值吗?可以的,使用JavaScript也可以访问页面中的伪元素. 复制代码 代码如下: // Get the color value of .element:before var color = window.getComputedStyle( document.querySelector('.element')

JavaScript中的对象的extensible属性介绍_javascript技巧

JavaScript中,对象的extensible属性用于表示是否允许在对象中动态添加新的property.ECMAScript 3标准中,所有的对象都是extensible的.ECMAScript 5标准中,所有的对象默认仍是extensible的,但可以通过设定来改变这一属性. 查询一个对象是否是extensible的,可以使用Object.isExtensible()语句: 复制代码 代码如下: var o = {x:1}; console.log(Object.isExtensible(

javascript用函数实现对象的方法_javascript技巧

本文实例讲述了javascript用函数实现对象的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>利用函数实现对象(重要)</title&g