js之oop <二> 对象属性
js中对象属性可以动态添加和删除。删除对象属性用delete关键字。
function obj(){ }
var oo = new obj();
oo.a = "a";
oo.b = "b";
oo.a; //输出a
oo.b; //输出b
delete oo.a;
oo.a; //输出undefined
在js中对象的属性以键值对的方式来体现,且(在遍历时)无序。js中属性名(也就是key)可以用点来访问(或赋值),也可以用中括号key值来访问(或赋值)(用中括号key访问对象属性时,key必须是string类型)
var a = { x:5,y:2 };
a.x; //输出5
a['x'];//输出5
对象属性的遍历,遍历对象属性常用有两种方法。
var obj = { a1:1, a2:2, a3:3, a4:4, a5:5 };
for(var i=1;i<=5;i++ ){
console.log(obj['a' + i]);
}
//输出 1 2 3 4 5
var obj = { a:1, b:2, c:3, d:4, e:5 };
for(var item in obj){
console.log(obj[item]);
}
//输出 1 2 3 4 5
这里需要注意,for in 遍历对象属性是无序的,有可能遍历到原型链上的属性。且使用 for in 遍历时只能使用[]读取属性,不能使用.读取。
function obj_pro(){} //创建obj_pro构造器
obj_pro.prototype.f = 55; //创建obj_pro原型属性f
var obj = new obj_pro(); //obj_pro创建obj对象
//obj对象属性循环赋值
for(var i=1;i<=5;i++){
obj['a' + i] = (i+9);
}
//遍历obj对象属性
for(var item in obj){
console.log(obj[item]);
}
//输出 10 11 12 13 14 55 这里遍历把原型链上的属性f遍历出来了
****************************************************************************************************************
属性的 get/set
get/set 和其他语言一样,用来封装对象属性。get设置读取,set设置写入。
var person = {
name:"Mirage",
get age(){
return age;
},
set age(val){
if(val < 0 || isNaN(val) || val > 150){
age = 18;
}else{
age = val;
}
}
}
person.age = -99;
console.log(person.age); //输出 18
age的值可以在set中做判断,同样也可以在get中做判断。
var person = {
name:"Mirage",
get age(){
if(age < 0 || isNaN(age) || age > 150){
return 18;
}else{
return age
}
},
set age(val){
age = val;
}
}
person.age = -99;
console.log(person.age); //输出 18
可以通过get/set对特定属性设置只读或不可读
var player = {
get gameYear(){
return 5;
}
}
player.gameYear = 59;
console.log(player.gameYear); //输出5
仅设置get返回值,该属性就不可修改(只读)。
var player = {
set age(val){
if(val < 0 || isNaN(val) || val > 150){
age = 18;
}else{
age = val;
}
}
}
player.age = "age"; //player.pName值为18
console.log(player.age); //输出 undefined
仅设置set,该属性可修改,但不可读取。
*****************************************************************************************************************
原型链的get/set
对构造器创建的对象设置get/set属性需要用到 Object.defineProperty 。
Object.defineProPerty函数可以添加对象属性,并修改现有属性的特性。
Object.definePerperty参数:
object(必):目标对象(也可为对象原型添加,还可为DOM对象)。type:ObjectName(对象名)。
propertyname(必):属性名。type:string(字符串)。
descriptor(必):属性描述器。type:Object(对象_字面量)。
function person(){}
Object.defineProperty(person.prototype,
"age",
{
get:function(){
return age;
},
set:function(val){
if(val < 0 || isNaN(val) || val > 150){
age = 18;
}else{
age = val;
}
}
});
var p1 = new person();
p1.age = 6150;
console.log(p1.age); //输出 18。
通过defineProperty可以对对象原型属性进行修改。
js之oop <二> 对象属性的更多相关文章
- js之oop <五>对象序列化(js的JSON操作)
js对象序列化的过程,就是对象转换为JSON的过程.JSON.stringify() 将对象序列化成JSON.(接收对象,输出字符串) var obj = {x:2,y:3}; var str = J ...
- 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
- 原来JS是这样的 - 对象属性
引子 在上一篇(原来JS是这样的 (2))刚发布的时候就阅读了那篇文章的人可能会注意到那篇曾用过"JavaScript 中万物皆对象"的说法,而在随后我发现错误后立即更新改掉了这个 ...
- JS中delete删除对象属性
1.删除对象属性 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm ...
- JS delete 用法(删除对象属性及变量)
1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete ...
- js delete可以删除对象属性及变量
,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete o ...
- js知识梳理2:对象属性的操作
1.属性的查询和设置 ①基本语法 这个简单,可以通过点(.)或方括号([])运算来获取属性的值,注意点运算符后的标识符不能是保留字,方括号内的表达式必须返回字符串或返回一个可以转换成字符串的值. va ...
- js精要之对象属性
// 对象的应用解除 将对象变量置为null(在写插件多大型项目是不要忘记解除对象占用) var object1 = new Object(); var object2 = object1; // 对 ...
- js之oop <四>对象管理
对象扩展管理 Object.isExtensible() 检测对象是否可扩展(一般返回true).Object.preventExtensions() 防止对象扩展. var p = {p1:&quo ...
随机推荐
- 追踪app崩溃率、事件响应链、Run Loop、线程和进程、数据表的优化、动画库、Restful架构、SDWebImage的原理
1.如何追踪app崩溃率,如何解决线上闪退 当 iOS设备上的App应用闪退时,操作系统会生成一个crash日志,保存在设备上.crash日志上有很多有用的信息,比如每个正在执行线程的完整堆栈 跟踪信 ...
- Juery On事件的 事件触发流程
使用On 给控件赋值事件的时候,你有没有觉得很神奇那,那是因为他事件处理流程比较特殊. on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数,而是为它们的后代元素中符合选择器select ...
- sublime 常用插件
1.ConvertToUTF8 支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件 2.Bracket Highlighter 用于匹配括号,引号和html标 ...
- C# DataGrid合并单元格
1.栏位枚举 private enum DataGridColumn { ROWNUM = , EMPID, EMPNAME, SEX, SALARY, ADRRESS, PHONE, TEL, PO ...
- PHP:array_chunk()数组分割
array_chunk(); 作用:把一个数组分割为新的数组块 用法: 实例:把数组分割为带有两个元素的数组块 $cars=array("Volvo","BMW" ...
- javascript unit testing
http://www.cnblogs.com/Answer1215/p/4230083.html Good http://developer.51cto.com/art/201506/479127.h ...
- confluence5.6安装
转自:http://ju.outofmemory.cn/entry/157013 说明:此文在confluence-wiki-5.6.5版本亲测通过附件:http://pan.baidu.com/s/ ...
- Ubantu16.4的安装过程以及基本配置
Ubantu16.4的安装过程以及基本配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 欢迎加入高级运维工程师之路:598432640 其实很早以前就听朋友说ubantu这怎么好 ...
- 处理 httprequest post 编码问题
site :http://www.cnblogs.com/artwl/archive/2012/03/07/2382848.html 在JavaScript中推荐的做法是用encodeURI对URI的 ...
- 处理mysql上百万条数据的优化
php 处理上百万条的数据库如何提高处理查询速度 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字 ...