首頁 >web前端 >js教程 >javascript物件聲明有幾種方式？ javascript物件聲明的六種方式

javascript物件聲明有幾種方式？ javascript物件聲明的六種方式

不言原創: 2018-09-14 15:41:206330瀏覽

本篇文章帶給大家的內容是關於javascript物件聲明有幾種方式？ javascript物件聲明的六種方式，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

-- 新向知識，就不用ES6寫法了。

一、字面量宣告

var obj = {
        属性名1 : 属性值,
        属性名2 : 属性值,
        属性名3 : 属性值,
        方法名1 : function() {
            .....
        },
        方法名2 : function() {
            .....
        }
    }

透過obj.屬性名或obj.方法名()就可以讀取或呼叫物件的屬性/方法了。

二、用new運算子建構Object物件

var obj = new Object();
obj.属性名1 = 属性值1;
obj.属性名2 = 属性值2;
obj.属性名3 = 属性值3;
obj.属性名4 = 属性值4;
obj.方法名1 = function() {
    ....
};
obj.方法名2 = function() {
    ....
};
....

先用new Object()建立一個空對象，然後用多條語句為物件新增屬性/方法。

三、用函數宣告的方式建構物件

函數Function本身就是物件Object的實例

var fn = new Function(); //new一个空函数
function myFn() {}; //声明一个空函数
console.log(fn instanceof Object); //true
console.log(myFn instanceof Object); //true

所以可以模仿new Objcet()建構物件的方式，用function myFn() {}宣告一個自訂的函數，然後透過new myFn()建構對象，例如：

function person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function() {
            console.log('My name is '+ this.name + ', I\'m ' + this.age + ' years old');
        }
    }
    var xiaoMing = new person('xiaoming', 16);
    xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"

透過這種方式聲明的對象，每一次new出來的對像都是獨立的，互相不會有影響，屬性、方法中的this 指向的就是新建立的、呼叫他們的物件。

四、工廠模式宣告物件

工廠模式聲明物件可以理解成二、三兩種方法的結合體，用三的思想套進二的內容。仿照上面例子舉例：

function person(name, age) {
        var obj = new Object(); 
        obj.name = name;
        obj.age = age;
        obj.say = function() {
            console.log('My name is '+ obj.name + ', I\'m ' + obj.age + ' years old');
        };
        return obj;
    }
    var xiaoMing = person('xiaoming', 16);
    xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"
    var xiaoHong = person('xiaohong', 18);
    xiaoHong.say(); //"My name is xiaohong, I'm 18 years old"

工廠模式之所以叫工廠模式，就是類似於現實生活中的工廠可以產生大量相似的商品，去做同樣的事情，實現同樣的效果。他的寫法與三、用函數宣告的方式建構物件比較像，但是稍有不同。

每一次呼叫function 宣告的函數時，它在內部new Object()，最後將這個新建的物件return回來，呼叫時就像普通函數呼叫一樣，實例化的時候不用再new了（內部new過）。雖然多次呼叫函數走的都是一樣的流程，但是生產出來的兩個產品互不影響。

五、原型方式宣告物件

function person() {/*空*/};
    person.prototype.height = "1.80m";
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log( 'I\'m ' + this.height + ' tall and I\'m in '+ this.grade);
    }
    var xiaoMing = new person();
    xiaoMing.say(); //"I'm 1.80m tall and I'm in Senior 3"

原型方式是將該物件的屬性/方法寫在他的prototype屬性所指的物件上。（每一個函數或說物件都有一個prototype屬性，這個屬性以物件的形式存在）。

每次new其實有這麼一些操作：

1)建立一個空物件
2)把這個空物件的__proto__指向建構子的prototype
3)把這個空物件賦值給this
4)執行建構子內的程式碼

new出來的新物件的__proto__屬性都會指向person.prototype，然後就可以執行person.prototype上的函數內容了。

這有點像是JS上常說的事件代理/委託。事件不直接綁定在該DOM元素上，而是綁定在它的父級元素，當給該DOM元素添加兄弟元素時，兄弟元素因為冒泡，能觸發相同的事件。

六、混合模式

混合模式可以理解成原型模式建構函數，舉例：

function person(name, height) {
        this.name = name;
        this.height = height;
    };
    person.prototype.age = 18;
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log('Hello, my name is ' + this.name + '. I\'m ' + this.age + ' years old, ' + this.height + ' tall and I\'m in '+ this.grade + '.');
    }
    var xiaoMing = new person('Xiaoming', '1.80m');
    xiaoMing.say();
    //"Hello, my name is Xiaoming. I'm 18 years old, 1.80m tall and I'm in Senior 3."
    var xiaoHong = new person('Xiaohong', '1.65m')
    xiaoHong.say();
    //"Hello, my name is Xiaohong. I'm 18 years old, 1.65m tall and I'm in Senior 3."

對比混合模式和原型模式可以發現，混合模式函數體不是空的，而函數體內的內容就是前邊說的構造。

這種方式在實際開發中更常用。