zoukankan      html  css  js  c++  java
  • 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可以对对象原型属性进行修改。

  • 相关阅读:
    MVC5+EF6简单实例以原有SQLServer数据库两表联合查询为例
    ArcGIS生成根据点图层生成等值面并减小栅格锯齿的操作步骤
    EF6+MVC5之Oracleo数据库的Code First方式实现
    jquery写的tab切换效果 非常简单
    APP消息推送是否进入消息中心和click、receive事件分析
    Android APP切换到后台接收不到推送消息
    js写的简单轮播图
    凉凉的笔记 two day
    凉凉的笔记 one.day
    在SQL Server数据库中批量导入数据的四种方法
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5796166.html
Copyright © 2011-2022 走看看