JavaScript中的对象---属性相关操作_s creen对象包含的属性可以修改。()-CSDN博客

本文链接：https://blog.csdn.net/sjpgyy/article/details/107021106

JavaScript中的对象—属性相关操作

访问对象的属性和方法

一属性

1.数据属性【数据属性包含一个数据值的位置，在这个位置可以读取和写入值】

4个描述行为的特性：

（1）[[writable]] 表示能否修改属性的值，默认为true；

（2）[[Enumerable]] 表示能否通过for in循环返回属性，代表属性是否可以枚举，直接在对象上定义的属性默认值为true；

（3）[[configurable]] 表示是否能通过delete删除属性从而定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性

（4）[[value]]

a:包含这个属性的属性值，读取属性值的时候，从这个位置读取。

b:写入属性值的时候，把新值保存在这个位置。这个特性的默认值为undefined

2.存取器属性
（1）get【获取属性的值】
（2）set【设置属性的值】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var  o={x:1};
    console.log('x' in o);
    console.log(o.hasOwnProperty('x'));
    function Foo(){};
    Foo.prototype.z=3;
    var obj=new Foo();
    obj.x=1;
    obj.y=2;
   //console.log('x' in obj);
   //console.log(obj.hasOwnProperty('x'));
   //console.log(obj.propertyIsEnumerable('x'));
   //console.log('z' in obj);
   //console.log(obj.hasOwnProperty('z'));
    //属性是对象自己的并且是可枚举的返回true
   //console.log(obj.propertyIsEnumerable('z'));
   //console.log(obj.k!==undefined );
   //console.log(obj.x!==undefined);
   //console.log(obj.toString!=undefined);
   //console.log(Object.prototype .propertyIsEnumerable('toString'));
    var obj={
        x:1,
        y:2,
        z:3,
        username:'king',
        age:12,
        addr:'北京'
    };
    for(var p in obj){
        console.log(p);
    }
    //返回所有自有属性的名称
    console.log(Object .getOwnPropertyNames (obj));
    console.log(Object.keys(obj));
</script>
</body>
</html>

二三个相关的对象特性

三属性操作

1.访问属性

（1）对象名.属性名
（2）对象名[属性名]
（3）当处于某个对象方法内部到时候，可以通过this来访问同一对象的属性

2.添加属性
（1）对象名.属性名=值
（2）对象名[属性名]=值
3.修改属性
（1）对象名.属性名=值
（2）对象名[属性名]=值
4.删除属性
（1）delete对象名.属性名
（2）delete对象名[属性名]
（3）注意:
a:delete只能删除自身属性，不能删除继承属性

b:要删除继承属性，只能从定义它属性的原型对象上删除它

c:delete只能断开属性和宿主对象的联系，而不会去操作属性的属性

d:delete不能删除那些可配置性为false的属性

5.遍历属性
for in遍历属性

四访问方法

1.对象名.方法名（）

2.注意【如果对象名.方法名的形式，将返回定义函数的字符串】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var person={
        username:'king',
        age:12,
        salary:1234.56,
        addr:'北京',
        sex:'男',
    };
    //查询属性
    console.log('用户名为：'+person.username+"\n"+'性别：'+person.sex);
    console.log('薪水：'+person['salary']+"\n"+'地址:'+person["addr"])
    //如果属性不确定需要使用[]
    var key='username';
    console.log(person.key);
    console.log(person[key]);
    console.log(person['key']);
    function PersonInfo(name,age,sex) {
        this.name =name;
        this.age =age;
        this.sex=sex;
    }
    var person1=new PersonInfo('king',34,'男');
    console.log(person1.name+person ['sex']);
    //添加属性
    var obj={};//空属性
    obj.username='king';
    obj.age=13;
    obj.addr='北京';
    obj['test']='this is a test';
    console.log(obj.username +'\n'+obj.age +'\n'+obj.addr +'\n'+obj['test']);
    //修改指定的属性
    obj.username='queen';
    obj['test']='麦子学院';
    console.log('修改之后的名字'+obj.username);
    console.log(obj['test']);
    //通过delete删除属性
    delete obj.test ;
    console.log(obj['test']);
    delete obj.username ;
    console.log(obj['username']);
    //通过for/in遍历属性
    var obj1={
        x:1,
        y:2,
        test:'this is a test',
        edu:'麦子学院',
    };
    for(var p in obj1){
        console.log(p+'\n');
    }
    //对象中有方法
    var obj2={
        username:'king',
        age:13,
        addr:'北京',
        sayHi:function (){
            return 'say Hi';
        },
        info:function () {
            return '用户名：'+this.username+'\n'+'年龄：'+this.age+'\n'+'地址：'+this.addr;
        }
    };
    console.log(obj2.sayHi());
    console.log(obj2.info());
    function Person(username,age,sex,addr) {
        this.username=username;
        this.age=age;
        this.sex=sex;
        this.addr=addr;
        this.info=function () {
            return this.username+this.addr;
        }
    }
    var p1=new Person('queen',34,'女','上海');
    console.log(p1.info ());
    p1.test='this is a test';
    console.log(p1.test );
    p1.info1=function () {
        return 'this is a test';
    };
    console.log(p1.info1());
</script>
</body>
</html>