建立元素和對象的幾種方法

建立元素的3種方法

---

 

一、document.write()

    <div>
        明月幾時有，把酒問青天！
    </div>
    <button id="btn">點擊</button>

    <script>
        var btn = document.getElementById('btn')
        btn.onclick = function () {
            document.write('水調歌頭')
        }
    </script>

缺陷：若是是在頁面加載完畢後,此時經過這種方式建立元素,那麼頁面上存在的全部的內容所有覆蓋

 

二、obj.innerHTML

    <div id="box">
        <span>明月幾時有</span>
    </div>
    <button id="btn">點擊</button>

    <script>
        var btn = document.getElementById('btn')
        var box = document.getElementById('box')

        btn.onclick = function () {
            box.innerHTML = '<p>水調歌頭</p>'
        }
    </script>

 

三、document.createElement

    <div id="box">
        <span>明月幾時有</span>
    </div>
    <button id="btn">點擊添加</button>

    <script>
        var btn = document.getElementById('btn')
        var box = document.getElementById('box')

        btn.onclick = function () {
            var p = document.createElement('p')
            p.innerHTML = '把酒問青天'
            box.appendChild(p)
        }
    </script>

 

 

建立對象的4種方法

---

 

一、調用系統的構造函數建立對象

        var dog=new Object();
        dog.name="小白";
        dog.age=4;
        dog.weight=50;
        dog.eat=function(){
            //在當前這個對象的方法中是能夠訪問當前這個對象的屬性的值
            console.log("喜歡吃豬肉鋪！，今年"+this.age+"歲");
        }
        dog.walk=function(){
            //在當前這個對象的方法中是能夠訪問當前這個對象的屬性的值
            console.log(this.name+this.weight+"斤,"+"喜歡跳着走路！");
        }
        
        dog.eat();
        dog.walk();

        // 檢測當前對象是否是屬於Object類型
        console.log(dog instanceof Object);

對象有特徵（屬性）和行爲（方法）

 

二、字面量建立對象

        var dog={
            name:"小白",
            age:4,
            food:"雞腿",
            say:function(){
                console.log("狗的名字叫"+this.name+"\n今年"+this.age);
            },
            eat:function(){
                console.log("最喜歡吃的是"+this.food);
            }
        };
        dog.say();
        dog.eat();

字面量建立對象缺陷：一次性對象，沒法傳值

 

三、工廠模式建立對象

        function person(name,age){
            var dog=new Object();//建立對象
            //添加屬性
            dog.name=name;
            dog.age=age;
            //添加方法
            dog.information=function(){
                console.log("My dog's name is "+this.name+",今年"+this.age+"歲");
            }
            // 返回值爲對象
            return dog;
        }

        // 建立輸出對象
        var dog1=person("小白",4);
        dog1.information();
        
        var dog2=person("仔仔",2);
        dog2.information();

 

四、自定義構造函數建立對象

　　自定義構造函數建立對象,本身定義一個構造函數（對象類型）,而後建立對象

　　函數和構造函數的區別；首字母是否是大寫

        // 建立一個構造函數
        function Dog(name,age,weight){
            this.name=name;
            this.age=age;
            this.weight=weight;
            this.say=function(){
                console.log("個人名字是"+this.name+"\n個人年齡是"+this.age+"\n個人體重是"+this.weight);
            }
        }
        // 建立對象——實例化一個對象。並初始化
        var dog1=new Dog("小白",4,30);
        dog1.say();

        var dog2=new Dog("崽崽",2,15);
        dog2.say();
        
        console.log(dog1 instanceof Dog);
        console.log(dog2 instanceof Dog);

自定義構造函數的過程
1. 在內存中開闢(申請一塊空閒的空間)空間,存儲建立的新的對象
2. 把this設置爲當前的對象
3. 設置對象的屬性和方法的值
4. 把this這個對象返回

 

---

  

new一個對象的過程

    建立一個新對象
    this指向這個新對象
    執行代碼，即對this賦值
    返回this