JavaScript 对象(下)
getter 和 setter:
1、ES5 里,属性值可以用一个或两个方法代替,这两个方法就是 getter 和 setter,它们使用 get 和 set 进行定义而不是通过 function
2、由 getter 和 setter 定义的属性称作 “存取器属性”,它不同于“数据属性”,数据属性只有一个简单的值
3、当查询存取器属性的值时,JavaScript 调用 getter 方法(无参),并由它返回属性存取表达式的值
4、当设置一个存取器属性的值时,JavaScript 调用 setter 方法,并将赋值表达式右侧的值当作参数传给 setter
let obj = {
x: 1,
y: 1,
// 注意 getter 和 setter 没有使用冒号,但函数体结束和下一个方法或数据属性之间有逗号隔开
// 设置一个可读写属性 result
get result() {
return this.x+"+"+this.y+"i";
},
set result(arr) { // 需要参数
if (arr.length != 2)
throw RangeError();
this.x = arr[0];
this.y = arr[1];
},
// 设置一个只写属性 add
set add(arr) {
if (arr.length != 2)
throw RangeError();
this.x += arr[0];
this.y += arr[1];
return this.x+"+"+this.y+"i";
}
}
console.log(obj.result); // 使用 getter,输出 1+1i
obj.add = [1, 2]; // 使用 setter
console.log(obj.result); // 输出 2+3i
obj.result = [3, 4];
console.log(obj.result); // 输出 3+4i
注:读取只写属性总是返回 undefined
属性的特征:
1、除了包含名字和值之外,属性还包含一些标识它们可写、可枚举和可配置的特性
2、数据属性的 4 个特性:值、可写性、可枚举性和可配置性
3、存取器特性:读取、写入、可枚举和可配置
4、数据属性的描述符对象:value、writable、enumerable 和 configurable;存取器属性则用 get 和 set 属性代替 value 和 writable
5、writable、enumerable 和 configurable 都是布尔值,而 get 和 set 是函数值
6、通过 Object.getOwnPropertyDescriptor(obj, p) 可获得某个对象特定属性的属性描述符
7、通过 Object.defineProperty(obj, p, attr) 设置或新建属性的特性,Object.defineProperties(obj, map) 修改或新建多个属性特性
8、Object.getOwnPropertyDescriptor() 和 Object.defineProperty() 都不能修改继承来的属性
// 通过 Object.getOwnPropertyDescriptor() 可获得某个对象特定属性的属性描述符
console.log(Object.getOwnPropertyDescriptor({x: 1}, "x"));
console.log(Object.getOwnPropertyDescriptor({}, "toString")); // undefined // defineProperty(obj, p, attr) 设置、新建属性
// defineProperties(obj, map)
let o = {};
// 新建多个属性特性
Object.defineProperties(o, {
x: {value: 1, writable: false, enumerable: true},
y: {value: 2, enumerable: true},
z: {value: 3, configurable: true, enumerable: true}
});
console.log(Object.getOwnPropertyDescriptor(o, "x"));
console.log(o.x);
// 把它修改成可修改的
Object.defineProperty(o, "x", {writable: true});
console.log(Object.getOwnPropertyDescriptor(o, "x"));
对象的三个属性:
1、原型属性:在实例对象创建之初就设置好的,用来继承属性的,可通过将对象作为参数传入 Object.getPrototypeOf() 来查询它的原型
2、类属性:是一个字符串,用以表示对象的类型信息,只有一种间接方法可以查询它(toString())
3、可扩展性:用以表示是否可以给对象添加新属性,通过将对象传入 Object.isExtensible(),来判断该对象是否可扩展;通过将对象传入 Object.preventExtensions() 把其转换为不可扩展(无法转换回可扩展);Object.seal() 除了能将对象设置为不可扩展,还可以将对象的所有自有属性都设置为不可配置;Object.isSealed() 来检测对象是否封闭;Object.freeze() 将对象设置为不可扩展和属性不可配置,同时将自有的所有数据属性设置为只读,存取器属性(setter)不受影响
console.log(Object.getPrototypeOf(o)); // 输出 o 的原型 {}
console.log(Object.prototype.toString.call(o).slice(8, -1)); // 输出 "Object"
console.log(Object.prototype.toString.call([]).slice(8, -1)); // 输出 "Array"
console.log(Object.isExtensible(o)); // 判断对象 o 是否可扩展,输出 true
Object.preventExtensions(o); // 将对象转换为不可扩展
console.log(Object.isExtensible(o)); // 输出 false
序列化对象:
1、我们可以将对象的状态转换为字符串,也可以将字符串还原为对象,ES5 提供了内置函数 JSON.stringify() 和 JSON.parse() 来序列化和还原对象
2、JSON 的语法是 JavaScript 语法的一个子集,它并不能表示 JavaScript 里所有的值
3、JSON.stringify() 只能序列化对象可枚举的自有属性
// 若属性里有不可枚举的,则不把它进行转换
let str = JSON.stringify(o);
// 输出 contend: '{"x": 1, "y": 2, "z": 3}' type: string
console.log("contend:", str, "\t type: ", typeof str); let ser = JSON.parse(str); // 转换成对象
// 输出 contend: {x: 1, y: 2, z: 3} type: object
console.log("contend:", ser, "\t type: ", typeof ser);
对象方法:
1、toString() 方法:无参,返回一个表示调用这个方法的对象值的字符串
2、toLocaleString() 方法:返回一个表示这个对象的本地化字符串
3、toJSON() 方法:如果在待序列化的对象中存在这个方法,则调用它,返回一个序列化结果,而不是原始对象
4、valueOf() 方法:将对象转换为某种原始值而非字符串
console.log(o.toString().slice(8, -1));
console.log(o.toLocaleString().slice(8, -1));
try {
o.toJSON();
} catch(e) {
// 若 toJSON 并未被定义,则会产生 TypeError
console.log("TypeError");
}
console.log(o.valueOf());
JavaScript 对象(下)的更多相关文章
- 探究javascript对象和数组的异同,及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- javaScript对象-基本包装类型的详解
本人按书上的内容大致地把javaScript对象划分成“引用类型”.“基本包装类型”和“内置对象”三块内容. 我们这篇先了解下基本包装类型的详细用法吧! 一.我们先解下相关概念: 1.引用类型的值(对 ...
- 如何理解javaScript对象?
在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- web前端学习(二) javascript对象和原型继承
目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...
- 如何判断Javascript对象是否存在
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
- 关于javascript对象的简单记忆法
关于javascript对象方法的简单记忆法(个人整理) string对象: 大号小号闪烁加链接./big/small/blink/link/ 粗体斜体打字删除线./bold/italics/fixe ...
- JavaScript基础——使用JavaScript对象
JavaScript有许多内置对象,如Number(数字).Array(数组).String(字符串).Date(日期)和Math(数学).这些内置对象都有成员属性和方法.除了JavaScript对象 ...
随机推荐
- jQuery基础方法:each(),map(),index(),is()
jQuery的each()方法和forEach()的区别: each()返回调用自身的jQuery对象,可用于链式调用 $('div').each(function(idx){ //找到所有div元素 ...
- Django实现文件的上传
Django实现文件的上传 1.前端页面:使用file对象,读取文件对象传递到views中.需要设定enctype="multipart/form-data",表明不对字符进行编码 ...
- Solved: RDP Disconnected – Error Code 2825 mremote
- 【Java】a++,++a 区分记忆
写了个例子测试: package com.xdsux.java.basetest; public class BaseTest1 { public static void main(String[] ...
- oracle分区表的使用和查询
本文参考了 https://blog.csdn.net/mzglzzc/article/details/46300645 一 创建和使用分区表 1.范围分区(RANGE)范围分区将数据基于范围映射到 ...
- ThinkPhp5 出现访问出现 No input file specified. 问题
今天复习一下ThinkPhp5,在官网下载了核心版,windows下配置了虚拟域名之后出现了神奇的现象 如下图 直接访问域名能访问到index模块下的index控制器下的index方法 但是我输入完整 ...
- 解决mysql for docker容器报错:Authentication plugin 'caching_sha2_password' cannot be loaded
为图方便,懒得在mac上安装mysql了,一个是管理不方便,第二个是为了方便多机器同步开发环境.就使用docker安装了. 拉取mysql镜像 docker pull mysql 运行mysql实例 ...
- Web缓存和静态化
Web缓存和静态化 目录 Web缓存基础... 1 什么是Web缓存... 1 Web缓存的类型... 1 为何要使用Web缓存... 1 重验证... 1 更新... 2 浏览器缓存... 2 工作 ...
- uboot常用的函数
http://blog.csdn.net/ooonebook/article/details/53206623 以下例子都以project X项目tiny210(s5pv210平台,armv7架构)为 ...
- ABAP 图形练习(GFW_PRES_SHOW and GRAPH_2D)
创建屏幕0100(元素清单中含定制控制CONTAINER和OK_CODE) 创建GUI状态100(功能键含BACK和EXIT用于返回和退出 ) 代码 *&------------------- ...