您的位置:首页 > Web前端 > JavaScript

JavaScript 属性介绍

2015-07-17 16:14 549 查看
本篇主要介绍JS中对象的属性,包括:属性的分类、访问方式、检测属性、遍历属性以及属性特性等内容。

目录

1. 介绍:描述属性的命名方式、查找路径以及分类

2. 属性的访问方式:介绍'.'访问方式、'[ ]'中括号访问方式

3. 删除属性:通过delete关键字删除对象的某个属性

4. 检测属性:介绍三种判断某个属性是否为对象的实例属性:in、obj.hasOwnProperty、obj.propertyIsEnumerable

5. 遍历属性:介绍三种遍历对象的属性:for / in 语句块、Object.keys(obj) 、Object.getOwnPropertyNames(obj)

6. 属性特性:在Escript5中,增加了属性特性这一内容,可设置属性是否可枚举、可修改等特性

1. 介绍

1.1 描述

  属性,特指对象的成员,不单单为'属性'(字段),也包含了方法。

1.2 命名方式

属性名称可以包含英文字符、数字(不能开头)、特殊符号(如:-、_、$等等)。

但一般使用纯英文字符,在特殊情况下会添加-(横杠:-webkit-、-moz- )以及 _(下划线)。

若属性名称包含了-(横杠),属性访问方式只能采用'[ ]'中括号访问:

?

1.3 属性的查找路径

  假设读取某个对象的属性x,首先会在此对象的实例属性中查找。若没有找到,将会在此对象的原型对象中查找属性x。若原型对象也没有属性x,将继续查找这个原型对象的原型(假设原型对象含有原型),一直到找到属性x或者无原型为止。

1.4 属性的分类

对象中的属性,根据是否自身的可分为自有属性和继承属性。

① 自有属性:也可叫实例属性;指对象自身的属性。

② 继承属性:也可叫原型属性;指对象从原型中继承的属性。

2. 属性的访问方式

可分为 ' . '点访问方式和' [ ] '中括号方法方式 。

说明:若读取一个不存在的属性,将返回undefined。若设置一个对象不存在的属性,将会向对象添加此属性。

2.1 ' . '点访问方式

语法:obj.propertyName

说明:属性名称必须为一个标示符(静态字符串),不能为变量。

示例:

?

2.2 ' [ ] '中括号访问方式

语法:obj[propertyName]

说明:属性名称可以为一个静态字符串,也可以为一个变量。若为变量,访问的属性为变量表示的值。

特点:与'.'访问方式不同,'[ ]'中括号访问方式灵活性很大:可动态访问(变量指定属性名)、可访问包含某些特殊字符的属性(如:属性名称带'-')

示例:

?

3. delete 删除属性

语法:delete obj.propertyName 或者 delete obj[propertyName]

说明:delete只能删除对象的自有属性,不能删除继承属性。

示例:

?

4. 检测属性

  检测对象是否包含某个属性。

4.1 in 运算符

说明:判断对象是否包含某个属性,会从对象的实例属性、继承属性里进行检测。

语法:propertyName in obj

返回值:

{bool} 判断对象的实例属性或继承是否包含此属性。

true:对象的实例属性或继承属性包含此属性;

false:对象的实例属性或继承属性不包含此属性。

示例:

?

4.2 obj.hasOwnProperty(propertyName)

说明:判断对象是否拥有一个指定名称的实例属性,不会检查继承属性。

参数:

①propertyName {string} :属性名称。

语法:obj.hasOwnProperty(propertyName)

返回值:

{bool} 判断对象是否拥有一个指定名称的实例属性;此方法不会检查对象原型链中的属性。

true :属性为对象的实例属性,非继承。

false :属性不为对象的实例属性。

示例:

?

4.3 obj.propertyIsEnumerable(propertyName)

说明:判断指定名称的属性是否为实例属性并且是可枚举的(可用for/in循环枚举)

参数:

①propertyName {string} :属性名称。

语法:obj.propertyIsEnumerable(propertyName)

返回值:

{bool} 判断属性是否为实例属性并且是可枚举的(可用for/in循环枚举),不考虑原型链中的成员。

true :属性为对象的实例属性并且是可枚举的。

false :属性不为对象的实例属性或不可枚举的。

示例:

?

总结

检测方式语法检测属性的范围 返回值
in 运算符propertyName in obj实例属性、继承属性{bool} true:符合条件;fasle:不符合
obj.hasOwnProperty(propertyName) obj.hasOwnProperty(propertyName) 实例属性{bool} true:符合条件;fasle:不符合
obj.propertyIsEnumerable(propertyName)obj.propertyIsEnumerable(propertyName)可枚举的实例属性{bool} true:符合条件;fasle:不符合

5. 遍历属性

  即遍历对象的实例属性、继承属性。

5.1 for / in 语句块

说明:遍历对象可枚举的实例属性和继承属性

语法:

for (p in obj) {   // p表示遍历的属性名称 }

示例:

?

5.2 Object.keys(obj)

说明:返回一个数组,包含对象可枚举的实例属性名称

参数:

①obj {object} :实例对象

返回值:

{Array} 返回一个数组,包含对象可枚举的实例属性名称

示例:

?

5.3 Object.getOwnPropertyNames(obj)

说明:返回一个数组,包含对象的所有实例属性名称。包括可枚举和不可枚举的

参数:

①obj {object} :实例对象

返回值:

{Array} 返回一个数组,包含对象所有实例属性名称

与Object.keys()的差别:Object.keys()只返回可枚举的实例属性,Object.getOwnPropertyNames()返回所有实例属性

示例:

?

总结

检测方式语法遍历属性的范围 返回值
for / in 语句块for (p in obj) {   // p表示遍历的属性名称 } 可枚举的实例属性和继承属性{String} 属性的名称
Object.keys(obj)Object.keys(obj)可枚举的实例属性{Array} 返回一个数组,包含对象可枚举的实例属性名称
Object.getOwnPropertyNames(obj)Object.getOwnPropertyNames(obj)包含对象的所有实例属性名称。包括可枚举和不可枚举的{Array} 返回一个数组,包含对象所有实例属性名称

6.属性描述符

分为数据属性和访问器属性;

两者可相互转换,若转换后未设置enumerable和configurable特性(两类属性描述符都包含这2个特性),将默认采用转换前的值。

6.1 数据属性

说明:包含属性的操作特性;如:设置值、是否可枚举等等

特性名称描述默认值
value设置属性的值undefined
writable是否可修改属性的值;true:可修改属性的值;false:不可修改属性的值false  
enumerable是否可枚举属性;true:可枚举,可通过for/in语句枚举属性;false:不可枚举false
configurable是否可修改属性的特性;true:可修改属性的特性(如把writable从false改为true);false:不可修改属性的特性false
默认值:

1)在使用Object.defineProperty、Object.defineProperties 或 Object.create 函数的情况下添加数据属性,writable、enumerable和configurable默认值为false。

2)使用对象直接量创建的属性,writable、enumerable和configurable特性默认为true。

示例:

?

6.2 访问器属性

说明:设置属性的访问方式;set、get特性等

特性名称描述默认值
get属性的返回值函数undefined
set属性的设置值函数;含有一个赋值参数undefined
enumerable是否可枚举属性;true:可枚举,可通过for/in语句枚举属性;false:不可枚举false
configurable是否可修改属性的特性;true:可修改属性的特性(如把writable从false改为true);false:不可修改属性的特性false
示例:

?
==================================系列文章==========================================

本篇文章:3.9 JavaScript 属性介绍

Web开发之路系列文章

1.HTML

  1.1 HTML页面源代码布局介绍

  1.2 HTML基础控件介绍

  1.3 iframe 和 frameset 的区别

  1.4 name、id、class 的区别

  1.5 table、form表单标签的介绍以及get和post提交方式

2.CSS 层叠样式表

  2.1 CSS 选择器及各样式引用方式

  2.2 CSS HTML元素布局及Display属性

  2.3 CSS Float 浮动属性

  2.4 CSS Position 定位属性

3.JavaScript介绍

  3.1 JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

  3.2 JavaScript function函数种类

  3.3 JavaScript Array对象

  3.4 JavaScript Date对象

  3.5 JavaScript Math和Number对象

  3.6 JavaScript String对象

  3.7 JavaScript Object对象

  3.8 JavaScript 自定义对象

  3.9 JavaScript 属性介绍

4.Dom

  4.1 Window对象 : 对浏览器的当前窗口进行操作。

  4.2 Navigator对象 :对浏览器进行操作。包括获取浏览器的名称、平台、版本信息等等。

  4.3 Screen对象 :对显示器屏幕进行操作。包括获取屏幕的高度、宽度。

  4.4 Location对象 :对当前页面的URL进行操作。

  4.5 Document对象 : 对HTML内的元素进行操作。

  4.6 Event对象 :HTML元素的事件操作。

5.Jquery

  5.1 Jquery选择器

  5.2 常用的方法

  5.3 对数组、字典进行操作

  5.4 指定一个对象,获取相邻元素

  5.5 动态操作HTML元素

  5.6 事件操作

  5.7 动画操作

  5.8 Css操作

  5.9 扩展插件

6.EasyUI 框架

7.其他技术

  7.1 Ajax

  7.2 正则表达式

  

只是记录了自己在学习、使用Web前端内容时的心得和碰到的问题。

参考文献:

1)http://www.w3school.com.cn/

2)《JavaScript权威指南(第六版)》
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: