JavaScript5 JavaScript对象

1.创建对象

1.1 先创建空的对象,然后为他绑定属性和方法

1.创建空的对象
var obj={}或者var obj=new Object()
2.绑定属性或者方法
obj.属性或方法=绑定对象

       var obj1={};//new Object()
        obj1.firstname="Li";
        obj1.lastname="Hua";
        obj1.age=50;
        obj1.getFullName=function () {
            return this.firstname+this.lastname
        };

1.2 以字典键值对的形式创建对象

1.注意以字典形式键:值。
2.注意不同的键值对以逗号分割

       var obj2={
            firstname:"Xiao",
            lastname:"Ming",
            age:18,
            getFullName:function () {
                return firstname+lastname;
            },
        };

1.3 函数的形式为他创建对象

1.有this指针的函数就可以被称为对象构造器(this指针会在后面讲解用法)
2.obj=new 对象构造器(参数)来创建对象。

//3.对象构造器,相当于可以使用构造函数创建对象
        function create(firstname,lastname,age) {
            this.firstname=firstname;
            this.lastname=lastname;
            this.age=age;
            this.getFullName=function () {
                return this.firstname+this.lastname
            }
        }
        var obj3=new create("Wang","Wu",25);//根据构造器杜希昂生成一个新对象

3.如何修改对象构造器。
(1)直接修改肯定是不可以的。不信的话可以自己尝试
(2)对象构造器.prototype.属性或函数名=…。

create.prototype.getAge = function() {
  return this.age;
};

2.使用对象访问,修改,其属性和方法

2.1 访问单个属性或者方法

1.使用对象.属性名,此处的属性名以变量的方式给出
2.使用对象[属性名]。此处的属性名以字符串的形式给出

 alert("访问单个属性的两种方法"+obj1.age+","+obj1["age"]);

2.2 遍历操作

1.for(var x in obj)此时x就是obj的每个键。实现对每一个属性的访问

        for(var x in obj1){
            alert(x+" "+obj1[x])
        }

2.3 访问函数,(对象的函数又称为方法)

1.函数直接调用调用,此时this指针指向自己。
例如上述的obj1对象全名应该是LiHua

        alert(obj1.getFullName());

2.obj.方法.call(obj2)使用obj的方法对obj2的属性进行操作。
下面的实例,虽然是LiHua对象,但是this指针指向的是obj2.

        alert(obj1.getFullName.call(obj2));//相当于函数使用的是obj1的函数,属性使用的是obj2的属性

2.5 修改,删除属性

直接设置就好了

        //三。可以为这些属性动态修改,添加和删除属性和方法
        // 1.修改属性
        obj1.age=10;
        obj2.age=11;
        obj3.age=11;
        alert("修改age属性,访问三个对象的age:"+obj1.age+obj2.age+obj3.age)
        // 2.添加属性
        obj1.country="China"
        obj2.country="England"
        obj3.country="US";
        alert("添加属性,"+obj1.country+" "+obj2.country+" "+obj3.country);
        //3.删除属性
        delete obj1.country;
        alert("删除属性"+obj1.country)

3.对象的this指针

this指针表示一个对象,this指针出现在不同的位置,表示的对象也不同。
http://www.runoob.com/js/js-this.html
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

在方法中,this 表示该方法所属的对象。
如果单独使用,this 表示全局对象。
在函数中,this 表示全局对象。
在函数中,在严格模式下,this 是未定义的(undefined)。
在事件中,this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

4 对象与JSON数据格式

4.1 什么是JSON?

JSON是一个表示对象的特殊的字符串,内容和对象的内容一模一样,只不过是以字符串的方式存在的。
1.在不同编程语言的中,数据的结构是不相同的,例如Java的对象不能直接转化为JavaScript的对象,因此需要一个中介来实现不同编程语言对象信息的交换。
2.例如上面表示LiHua对象的时候可以用对象表示。但这个对象不能直接转化为其他语言的对象

 var obj1={};//new Object()
        obj1.firstname="Li";
        obj1.lastname="Hua";
        obj1.age=50;
        obj1.getFullName=function () {
            return this.firstname+this.lastname
        };

3.但是,所有的语言都有字符串这个数据类型,而且数据结构都大致相同,都是以某种编码方式存储的。因此把对象转化为二进制字符串,就可以是实现不同的编程语言之间对象数据的交换。注意只有属性可以有json表示,函数不可以表示。下面就是obj1的json表示。

var json1="{'firstname':'Li','lastname':'Hua','age':10}"

4.2 JSON的好处

1.体积小,用逗号分割
2.跨语言。

4.3 手动的实现JSON

1.注意JSON字符串是字符串,里面如果还要表示字符串要用单引号。
2.JSON字符串励可以再嵌套一个JSON或者普通字符串或者数字类型数据。

4.4 对象与JSON格式数据的转换

函数描述
JSON.parse()用于将一个JSON字符串转换为JavaScript对象。
JSON.stringify()用于将JavaScript值转换为JSON字符串。

下面的代买实现了从表单获得数据,根据数据构造出对象,把这个对象转换为JSON字符串以Session数据存储。然后再从Session中把JSON字符串读取出来,构造出对象。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function submit_form() {//根据表单信息,创建一个对象,并且把他存储为JSON格式的字符串,存储到sessionstorage
            var age=document.getElementById("name").value
            var sex=document.getElementById("sex").value
            var age=document.getElementById("age").value
            var obj={
                name:name,
                sex:sex,
                age:age,
            }
            str=JSON.stringify(obj);
            sessionStorage.setItem("json_test",str);
            alert("JSON对象成功存储")
        }
        function read_form() {//从sessionStorage读取信息,再转化为json对象,根据JSON字符串创建对象
            str=sessionStorage.getItem("json_test");
            alert(str);
            obj=JSON.parse(str);
            for(x in obj)
            {
                alert(x+":"+obj[x]);
            }
        }
    </script>

    <style>
        *{
            font-size:30px;
        }
        p{
            display: inline-block;
        }
    </style>
</head>
<body>
<form>
    <p>姓名</p>
    <input type="text" id="name">
    <p>性别</p>
    <input type="text" id="sex">
    <p>年龄</p>
    <input type="text" id="age">
    <input type="button" value="提交" onclick="submit_form()">
    <input type="button" value="读取" onclick="read_form()">
</form>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值