JavaScript进阶之：八、对象的动态特性

js中的对象具有动态特性：

js支持在对象定义之后，动态的添加 / 修改 / 删除 / 查询
对象的成员：对象的属性和方法
对象：键值对的集合（key-value）或属性和方法的集合
- 属性：定义在对象内部的变量
- 方法：定义在对象内部的函数
特性的说明：带来了方便（更灵活），但是在使用的时候容易出错（覆盖）

对象的访问方式：

点语法
[]语法 key必须是字符串类型的，如果不是字符串类型那么就当做一个变量来处理

动态的操作：

添加：如果当前的属性不存在，那么就是添加
修改：如果当前访问的属性存在，那么在设置的时候就是修改。
删除：使用关键字 delete 语法：delete 对象.属性

示例：

<script>
    //01 创建空的对象
    var obj ={};

    //02 动态的添加成员（属性|方法）
    obj.name = "张三";
    obj.age = 20;
    obj.showName  = function () {
        console.log(this.name);
    }
    obj.showName();//张三
    console.log(obj[name]);// 张三  name（"张三"）是字符串类型（赋值操作）
    //console.log(obj[age]);报错，因为age是数值类型

    //03 修改成员
    obj.name = "李四";
    obj.showName  = function () {
        console.log(this.name);
    }
    obj.showName();//李四

    //04 删除成员
    delete obj.age;
    console.log(obj.age);   //undefiend
    
    //05 使用[]语法可以添加有空格的属性
    var test = {};
    console.log(test);//Object {}

    //设置属性（添加属性） 属性名称：background Color
    test["background Color"] = "red";
    console.log(test);//Object {background Color: "red"}

    //06 使用[]语法添加方法
    obj["showAge"] = function () {
        console.log(this.age);
    }

    //07 使用[]语法调用方法
    obj["showAge"]();
</script>

使用[]语法可能会遇到的一些隐形的坑

<script>
    var obj = {
        name:"张三",
        age:20,
        showName:function () {
            console.log(this.name);
        }
    }
    console.log(obj.name);  //张三
    //console.log(obj[age]);   //报错

    //此处不报错是因为  name是window的属性
    console.log(obj[name]); //undefined  obj[name]相当于obj['']
    console.log(window.name);  //空白（空）
</script>

在使用for...in遍历字典的时候要使用[]来访问字典的value值

var test = {};
//需求：复制obj对象中的属性给test对象
for(var key in obj)
   {
       test[key] = obj[key];
   }

JavaScript进阶之：八、对象的动态特性

推荐阅读更多精彩内容