復(fù)習(xí)筆記（新手向） - JS對象聲明的幾種方式

davidac 發(fā)布于2019-08-23 11:58 / 2356人閱讀

摘要：二用操作符構(gòu)造對象屬性名屬性值屬性名屬性值屬性名屬性值屬性名屬性值方法名方法名首先用創(chuàng)建一個空對象，然后用多條語句給對象添加屬性方法。他的寫法與三用函數(shù)聲明的方式構(gòu)造對象比較像，但是稍有不同。

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

一、字面量聲明

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

通過obj.屬性名或obj.方法名()就可以讀取或調(diào)用對象的屬性/方法了。

二、用new操作符構(gòu)造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()創(chuàng)建一個空對象，然后用多條語句給對象添加屬性/方法。

三、用函數(shù)聲明的方式構(gòu)造對象

函數(shù)Function本身就是對象Object的實例

var fn = new Function(); //new一個空函數(shù)
function myFn() {}; //聲明一個空函數(shù)
console.log(fn instanceof Object); //true
console.log(myFn instanceof Object); //true

所以可以模仿new Objcet()構(gòu)造對象的方式，用function myFn() {}聲明一個自定義的函數(shù)，然后通過new myFn()構(gòu)造對象，比如：

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指向的就是新創(chuàng)建的、調(diào)用他們的對象。

四、工廠模式聲明對象

工廠模式聲明對象可以理解成二、三兩種方法的結(jié)合體，用三的思想套進二的內(nèi)容。仿照上面例子舉例：

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"

工廠模式之所以叫工廠模式，就是類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品，去做同樣的事情，實現(xiàn)同樣的效果。他的寫法與三、用函數(shù)聲明的方式構(gòu)造對象比較像，但是稍有不同。

每一次調(diào)用function 聲明的函數(shù)時，它在內(nèi)部new Object()，最后將這個新建的對象return回來，調(diào)用時就像普通函數(shù)調(diào)用一樣，實例化的時候不用再new了（內(nèi)部new過）。雖然多次調(diào)用該函數(shù)走的都是一樣的流程，但是生產(chǎn)出來的兩個產(chǎn)品互不影響。

五、原型方式聲明對象

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屬性所指的對象上。（每一個函數(shù)或者說對象都有一個prototype屬性，這個屬性以對象的形式存在）。

每次new實際上有這么一些操作：

1)創(chuàng)建一個空對象
2)把這個空對象的__proto__指向構(gòu)造函數(shù)的prototype
3)把這個空對象賦值給this
4)執(zhí)行構(gòu)造函數(shù)內(nèi)的代碼

new出來的新對象的__proto__屬性都會指向person.prototype，然后就可以執(zhí)行person.prototype上的函數(shù)內(nèi)容了。

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

六、混合模式

混合模式可以理解成原型模式+構(gòu)造函數(shù)，舉例：

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."

對比混合模式和原型模式可以發(fā)現(xiàn)，混合模式函數(shù)體不是空的，而函數(shù)體內(nèi)的內(nèi)容就是前邊說的構(gòu)造方式。

這種方式在實際開發(fā)中更加常用。