正文

js之oop <二> 对象属性

IP云
IP云V管理员/4 阅读
09/10
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 <二> 对象属性的更多相关文章

  1. js之oop &lt&semi;五&gt&semi;对象序列化&lpar;js的JSON操作&rpar;

    js对象序列化的过程,就是对象转换为JSON的过程.JSON.stringify() 将对象序列化成JSON.(接收对象,输出字符串) var obj = {x:2,y:3}; var str = J ...

  2. 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  3. 原来JS是这样的 - 对象属性

    引子 在上一篇(原来JS是这样的 (2))刚发布的时候就阅读了那篇文章的人可能会注意到那篇曾用过"JavaScript 中万物皆对象"的说法,而在随后我发现错误后立即更新改掉了这个 ...

  4. JS中delete删除对象属性

    1.删除对象属性 function fun(){   this.name = 'mm';   }   var obj = new fun();   console.log(obj.name);//mm ...

  5. JS delete 用法&lpar;删除对象属性及变量&rpar;

    1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete ...

  6. js delete可以删除对象属性及变量

    ,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete o ...

  7. js知识梳理2&colon;对象属性的操作

    1.属性的查询和设置 ①基本语法 这个简单,可以通过点(.)或方括号([])运算来获取属性的值,注意点运算符后的标识符不能是保留字,方括号内的表达式必须返回字符串或返回一个可以转换成字符串的值. va ...

  8. js精要之对象属性

    // 对象的应用解除 将对象变量置为null(在写插件多大型项目是不要忘记解除对象占用) var object1 = new Object(); var object2 = object1; // 对 ...

  9. js之oop &lt&semi;四&gt&semi;对象管理

    对象扩展管理 Object.isExtensible() 检测对象是否可扩展(一般返回true).Object.preventExtensions() 防止对象扩展. var p = {p1:&quo ...

随机推荐

  1. AutoVue打开ProE工程图中文乱码

    解决办法: 在AutoVue安装目录/Bin/allusers.ini中增加 [Options]ProELang=Chinese_cn

  2. 修改efi分区

    换了ssd硬盘,速度真快! 我特意准备了一个efi分区(fat32,忘记指定efi了),然而win10安装时不能指定启动位置,自己创建了一块. 下面我们把让win10使用自己创建的efi分区. 以管理 ...

  3. dos 实用命令收集

    隐藏文件夹: H:\>attrib gho +h +s +r 解决win2012服务器上网慢:netsh int tcp set global  ecn=disable

  4. HDU4539&plus;状态压缩DP

    /* 题意:n行m列的矩阵,1表示可以放东西,0表示不可以.曼哈顿距离为2的两个位置最多只能有一个位置放东西. 问最多放多少个东西. */ #include<stdio.h> #inclu ...

  5. LeetCode&lowbar;Container With Most Water

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai). ...

  6. 【Web】HttpServletRequest request 相关方法 得到路径

    username=qqqq password=wwww //----------------------POST-------------------> http://192.168.1.211 ...

  7. AC自动机讲解

    今天花了半天肝下AC自动机,总算啃下一块硬骨头,熬夜把博客赶出来.. 正如许多博客所说,AC自动机看似很难很妙,而事实上不难,但的确很妙.笼统地说,AC自动机=Trie+KMP,但是仅仅知道这个并没有 ...

  8. &lbrack;Python Study Notes&rsqb;异常处理

    正则表达式 python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误.你可以使用该功能来调试python程序. 异常处理 断言(Assertions) python标准异常 ...

  9. 【golang-GUI开发】Qt项目的打包发布

    这是本系列的第三篇文章,前两篇我们讲了qt的安装和编译,今天我们讲一讲程序的打包. 好像我们现在都没怎么讲到qt的使用,因为想要放开手脚写代码,一些基础是要打牢的. 不过请放心,下一篇文章开始我们就会 ...

  10. Xcode 折叠代码快捷键

    Xcode9之前版本可以代码局部和全局折叠,但是9之后只能以某个函数为单位进行全局折叠,特别是里面的逻辑判断的代码不能局部折叠了... Xcode9之前版本代码折叠: 在Xcode菜单里选择Prefe ...