Javascript复习第五天几种对象的创建方式-CSDN博客

本文链接：https://blog.csdn.net/qq_28629495/article/details/51405441

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/
1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>

</head>
<body>
    <p id="demo1">1/直接创建实例:</p>
    <p id="demo2">2/literals创建对象:</p>
    <p id="demo3">3/对象构造器:</p>
    <p id="demo4">4/遍历对象的方法：</p>
<script>
        // 1/直接创建实例:
        person = new Object();
        person.firstName = "lady";
        person.lastName = "gaga";
        span1 = addElements("demo1");
        span1.innerHTML =  person.firstName + " " + person.lastName;

        // 2/literals创建对象:
        humen = {firstName:"john",lastName:"simth"};
        span2 = addElements("demo2");
        span2.innerHTML =  humen.firstName + " " + humen.lastName;

        // 3/对象构造器:
        function matrix(firstName,lastName){
            this.firstName = firstName;
            this.lastName = lastName;
        }
        var child = new matrix('whitney','houston');
        span3 = addElements("demo3");
        span3.innerHTML =  child.firstName + " " + child.lastName;

        // 4/遍历对象的方法：
        span4 = addElements("demo4");
        var x;
        var txt="";
        for (x in person){
            txt = txt+person[x]+" ";
        }
        span4.innerHTML = txt;

        //获取节点
        function getobj(demo){
            var obj = document.getElementById(demo);
            return obj;
        }
        //添加一个span元素
        function addElements(parentElement){
            var theparent = getobj(parentElement);
            var child = document.createElement("span");
            var e = theparent.appendChild(child);
            return e;
        }
</script>   
</body>
</html>