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对象)。typeObjectName(对象名)。
  propertyname(必):属性名。typestring(字符串)。
  descriptor(必):属性描述器。typeObject(对象_字面量)。

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可以对对象原型属性进行修改。

原文地址:https://www.cnblogs.com/MirageFox/p/5796166.html