JavaScript最佳做法01—創建對象

英文 | https://medium.com/swlh/javascript-best-practices-creating-objects-b8c231e774d6

翻譯 | web前端開發(ID:web_qdkf)

JavaScript是一種非常寬容的語言。編寫即使有些小錯誤的代碼,依然可以很容易的運行。

在本文中,我們將探討創建JavaScript對象的最佳方法,而不是通過使用Object構造函數。

Don't Use the Object 建設者

Object構造函數允許我們創建一個對象。但是,由於有更短的創建對象的方法,因此不需要創建對象。

例如,代替使用Object構造函數創建對象來編寫以下內容,我們可以編寫爲:

const obj = new Object();obj.a = 1;obj.b = 2;

我們也可以這樣寫:

const obj = {  a:1,  b:2};

如我們所見,通過直接創建對象文字而不是使用Object構造函數,我們避免了很多額外的代碼輸入。

我們還可以創建構造函數或類來創建模板函數,以用於創建新對象。

例如,我們可以Person使用類語法創建構造函數,以便可以Person使用new運算符創建新的對象。

我們可以編寫以下代碼來創建Person構造函數:

class Person {  constructor(name) {    this.name = name;  }}

在上面的類中,我們有name用於在name實例中設置實例變量的參數Person。

然後,我們可以Person使用它創建多個實例,如下所示:

const jane = new Person('jane');const joe = new Person('joe');const alex = new Person('alex');

在上面的代碼中,我們創建了3個新Person實例,它們具有不同的值,this.name這些值是通過name參數傳遞的。

我們還可以通過編寫以下代碼將實例方法添加到類中:

class Person {  constructor(name) {    this.name = name;  }  greet(greeting) {    return `${greeting} ${this.name}`;  }}

在上面的代碼中,我們有greetinstance方法,該方法接受一個greeting字符串並將其與this.nameinstance變量組合。

然後我們可以這樣稱呼它:

console.log(jane.greet('hi'));console.log(joe.greet('hi'));console.log(alex.greet('hi'));

然後我們得到:

hi janehi joehi alex

記錄在控制檯日誌輸出中,如我們所說greet的那樣傳遞'hi'爲的值greeting。

如我們所見,使用JavaScript類,我們可以創建具有相同實例變量和方法的對象。

創建對象的另一種方法是使用Object.create方法。此方法很有用,因爲我們可以在創建對象時設置對象的原型。

例如,如果我們要創建一個以另一個對象作爲原型的對象,則可以編寫以下代碼:

const bar = {  a:1}const foo = Object.create(bar);foo.b = 1;foo.c = 2;

在上面的代碼中,我們有了bar對象,該foo對象通過使用Object.create方法用作對象的原型。

然後我們增加額外的屬性b和c對foo對象本身。b並且c是foo自己的,還是非繼承財產,a是原型的財產foo。

原型是子對象的模板對象。對象從其原型繼承屬性。

如果我們記錄該foo對象,則會得到foo的__proto__屬性具有a其值設置爲1的屬性。

如果要創建沒有原型的對象,則可以Object.create使用參數調用該方法,null以便__proto__不設置該屬性。

例如,我們可以編寫以下代碼來創建對象:

const foo = Object.create(null);foo.b = 1;foo.c = 2;

然後,如果我們記錄的值foo,我們將看到它沒有__proto__屬性,這意味着該對象沒有原型。

結論

有很多方法可以簡潔地創建對象。我們不應該只使用Object構造函數來創建對象。

這是因爲與定義對象文字相比,它沒有任何好處。它們都繼承Object和使用構造函數是完成同一件事,但他們各自方法有所不同。

創建對象的替代方法,包括使用類作爲新對象的模板。

最後,我們可以使用Object.create來創建具有所需原型的對象。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章