前言

  权威指南中摘要的,工作中用不到的,重要的js基础。

三类对象两类属性

  内置对象(native object) 是由ECMScript规范定义的对象或者类。例如:函数,数组,日期,正则...

  宿主对象(host object) 是由js编译器所嵌入的宿主环境(web浏览器)所定义的。比如客户端js中表示网页结构的HTMLElement对象就是宿主环境创建的对象。宿主环境定义的对象可以直接使用的话,我们也可以把它们当做内置对象。

  自定义对象(user-defined object) 由运行中的js创建的对象。

  自有属性(own property) 直接在对象当中定义的属性,区别于继承属性。

  继承属性(inherited property) 在对象原型中定义的属性。

属性描述符对象

  ES5中定义了一个属性描述符对象(property descriptor)。这个对象属性和他们所描述的属性特性是同名的。

  value:属性的值值。

  writable:可写性,是否可以设置值。

  enumerable:可枚举性,遍历对象时该属性会不会出现。

  configurable:可配置性。

作为属性特性的存取器

  对象属性是由名字和值跟一组属性特性构成的,属性值可以用一个或两个方法进行替代,这两个方法就是getter和setter定义的属性特性。由getter和setter定义的属性叫做“存取器属性”。

  存取器属性的特点:

    1,当程序查询存取器属性值时,js调用getter方法。这个方法返回的就是属性存取表单式的值。

    2,当程序设置存取器属性值是,js调用setter方法。这个方法将赋值表达式右边的计算结果,传入setter。

    3,存取器属性不具有可写性,如果同时具有getter和setter方法那它就是一个读写属性。也可以只拥有其中一个,来作为只读或者只写属性。

  定义存取器属性

var o = {
// 普通的数据属性
data:null;
// 存取器属性
set ODate(value){
this.data = value; // 处理复制表达式右侧计算结果(value)的属性设置表达式
},
get ODate(){
return this.data; // 属性返回表达式
}
}
// 设置data,获取data
o.OData = {id:0};
o.OData; =>{id:0}

获取自有属性的属性描述符对象Object.getOwnPropertyDescriptor()

// 当我们为对象创建属性时如果没有指定属性描述符,那就都是默认的 可枚举,可配置,可读写,
var obj = {
name:"小花"
}
console.log(Object.getOwnPropertyDescriptor(obj,"name"));
 {value: "小花", writable: true, enumerable: true, configurable: true}

定义属性描述符对象Object.defineProperty(obj,attributeName,PropertyDescriptor)

// 定义cat的name属性为不可枚举(此后使用for in 遍历对象属性时,name不会出现),value为小花
var cat = {};
Object.defineProrerty(cat , "name",{
value:"小花",
enumerable:false
})

同时定义或修改对象的多个属性及其描述符Object.defineProperties()

// 参数一是目标对象,参数二是属性为键描述符为值的对象
var cat = Object.defineProperties({},{
name:{value:"小花"},
age:{value:6},
// 值为大菊,不可写
type:{value:"大菊",writable:false},
// 存取器特性替代属性值value,不可枚举
date:{
get:function(){return [this.name,this.age]},
enumerable:false
}
})

使用属性描述符实现jq中$.extend方法的部分功能:

  1,给根对象Object的原型拓展一个extend方法。

  2,接收要复制的目标对象,将他的属性和属性特性复制到调用对象。

  3,复制规则:存在同名属性时保留原有属性,复制目标对象上的一切可枚举自有属性。

Object.defineproperty(Object.prototype,"extend",{
enumerable:false,
value:function(o){
// 得到O对象的所有自有属性名称列表
var proNames = Object.getOwnPropertyNames(o);
// 排除已存在属性
for(var i = 0; i < proNames.length; i++){
if(proNames[i] in this) continue;
// 获取该属性的属性描述符对象
var desc = Object.getOwnpropertyDescriptor(o,proName[i]);
// 将属性copy到调用对象
Object.defineProperty(this,proName[i],desc);
}
}
})

小结:

  》三类对象:内置对象,宿主对象,自定义对象。

  》两类属性:自有属性,继承属性。

  》存取器属性:区别于数据属性,属性名称就是getter、setter方法名称。

  》属性每个属性都拥有属性描述符对象,不显示定义属性的描述符对象时,他们默认都是可读写,可枚举,可配置的。

  》ES5提供了两个API用来定义或修改属性及其描述符:

    获取指定对象指定属性的属性描述符对象:Object.getOwnPropertyDescriptor()

    同时定义多个属性及其描述符:Object.defineProperties()

    定义单个属性及其描述符:Object.defineProperty(obj,attributeName,PropertyDescriptor)

  》js中的普通对象能够从根对象上继承到它提供的属性方法。我们基于这个特性为根对象创建了一个extend方法可以用来复制其他对象上的自有可枚举属性。

  

  

js对象—类型和属性特性的更多相关文章

  1. js对象可扩展性和属性的四个特性(上)

    # js对象可扩展性和属性的四个特性(上) 一.前言 再次花时间回顾一下基础,毕竟要想楼建的好,地基就要牢固,嘻嘻! 在开始之前需要具备对prototype.__proto__.constructor ...

  2. js对象可扩展性和属性的四个特性(下)

    # js对象可扩展性和属性的四个特性(下) 一.前言 再次花时间回顾一下基础,毕竟要想楼建的好,地基就要牢固,嘻嘻! 在开始之前需要具备对prototype.__proto__.constructor ...

  3. 遍历js对象中的属性

    可以使用js自带的for in.也可以使用Ext JS中的方法来遍历js对象中的属性 代码如下: /** 遍历对象 */ var person = {name:'张泰松',age:28}; //js方 ...

  4. JS对象类型的确定

    JS是松散类型的语言,这一点JS的对象表现得尤为突出.那么如何来确定JS对象的具体类型呢? 首先,我们可以使用typeof运算符确定其基本类型(number,object,function,undef ...

  5. JavaScript中的对象描述符(属性特性)

    我们先创建一个对象: var person = { name: "Nicholas", _job: "Software Engineer", sayName: ...

  6. 判断js对象类型

    javascript中检测对象的类型的运算符有:typeof.constructor.instanceof.prototype. 1.typeof typeof是一个一元运算符,返回结果是一个说明运算 ...

  7. js 对象可枚举属性以及for in 循环和for of 循环

    js中每个对象的属性(js里万物皆属性,对象的属性也是对象)都有一个属性叫enumerable(可枚举性),这个属性true/false决定了该对象的属性是否可枚举(就是让一些方法访问到这个属性). ...

  8. js对象类型判断工具

    对象类型判断工具 /** *类功能:对象类型判断工具 **/ var TypeUtil = { /** *方法说明:是否是数组 **/ isArray: function (obj) {//是否是数组 ...

  9. js 对象类型 (对象的属性 ,对象的方法) this 关键字

    $(function () { var observation = { init: function () { this.render();//断点:this bind :function() che ...

随机推荐

  1. javascript 获取当前日期 月份 时间

    <script type="text/javascript"> function getDate() { var date = new Date(); //得到当前日期 ...

  2. windows IDA 调试SO

    还是参考了网上的很多资料,感谢这些前辈的分享. ===================================================================== 环境:win ...

  3. Xcode工程断点调试失效

    1.我解决的是方法是,选择Product---->Edit Scheme------>(这里进入后会有Info,Arguments,Options,Diagnostics)选择Info-- ...

  4. jquery特效(8)—倒计时

    最近公司在做一个答题的小游戏,每道题可以有20秒时间作答,超过时间就要给出相应的提醒,由于20秒时间太长,不适合做GIF动态图,下面来看一下我写的5秒倒计时的测试程序结果: 一.主体程序: <! ...

  5. HDU3183 A Magic Lamp —— 贪心(单调队列优化)/ RMQ / 线段树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3183 题解: 方法一:贪心. 在草稿纸上试多几次可以知道,删除数字中从左到右最后一位递增(可以等于)的 ...

  6. SystemV和BSD的区别

    目前,Unix操作系统不管其内核如何,其操作风格上主要分为SystemV(目前一般采用其第4个版本SVR4)和BSD两种.其代表操作系统本别是Solaris和FreeBSD.当然,在SunOS4(So ...

  7. 组合数学中的常见定理&组合数的计算&取模

    组合数的性质: C(n,m)=C(n,n-m); C(n,m)=n!/(m!(n-m)!); 组合数的递推公式: C(n,m)=  C(n-1,m-1)+C(n-1,m); 组合数一般数值较大,题目会 ...

  8. 004 - 修改Pycharm默认启动打开最近的项目

    随着项目的增多, 可能会使用到不同的项目, 而有的时候我们导入项目到新一个窗口中之后, 下一次打开Pycharm就变成之前导入的那个项目了 那么之前我们的项目怎么找到呢? 修改一下Pycharm启动默 ...

  9. 多线程之:volatile变量的一次写操作的过程

    一:对volatile修饰的变量进行一次写操作的完整过程   在 java 垃圾回收整理一文中,描述了jvm运行时刻内存的分配.其中有一个内存区域是jvm虚拟机栈,每一个线程运行时都有一个线程栈,线程 ...

  10. springMVC之HttpServletRequest的getParameterMap()

    request.getParameterMap()的返回类型是Map类型的对象,也就是符合key-value的对应关系,但这里要注意的是,value的类型是String[],而不是String. 得到 ...