快捷導(dǎo)航

JS創(chuàng)建自定義對(duì)象的六種方法總結(jié)

更新時(shí)間：2020年12月15日 15:33:54 作者：極致同學(xué)

這篇文章主要給大家介紹了關(guān)于JS創(chuàng)建自定義對(duì)象的六種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1、創(chuàng)建一個(gè) Object 實(shí)例

var person = new Object();
person.name = "rose";
person.age = 18;
person.job = "actor";
person.sayName = function () {
 console.log(this.name);
};
console.log(person);

2、對(duì)象字面量

var person = {
 name: "rose",
 age: 18,
 job: "actor",
 sayName: function () {
 console.log(this.name);
 },
};
console.log(person);

上面兩種方式是創(chuàng)建對(duì)象的兩種基本方式，他們的原型就是 Object

3、工廠模式

function createPerson(name,age,actor){
 var person = new Object();
 person.name = "rose";
 person.age = 18;
 person.job = "actor";
 person.sayName = function () {
  console.log(this.name);
 };
 return person
}
console.log(p1 instanceof Object);//true
console.log(p1 instanceof createPerson);//false

從上面代碼中我們可以看出來，工廠模式實(shí)際上就是借助函數(shù)，內(nèi)部返回使用第一種方式（ new Object()）創(chuàng)建的對(duì)象。

優(yōu)點(diǎn)：可以很方便的創(chuàng)建相似對(duì)象。

缺點(diǎn)：沒有解決對(duì)象識(shí)別的問題，即怎樣知道一個(gè)對(duì)象的類型。

4、構(gòu)造函數(shù)方式

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function () {
 console.log(this.name);
 };
}
var p = new person("rose", 18, "actor");
console.log(p instanceof Person);//true
console.log(p instanceof Object);//true

構(gòu)造函數(shù)可以創(chuàng)建特定類型的對(duì)象，像 Object , Array 這樣的原生構(gòu)造函數(shù)，在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中。

構(gòu)造函數(shù)模式與工廠模式的不同之處為：

沒有顯式得創(chuàng)建對(duì)象，
直接將屬性和方法賦值給了this對(duì)象
沒有return語句

構(gòu)造函數(shù)方式創(chuàng)建對(duì)象必須使用 new ，操作符，會(huì)經(jīng)歷下面四個(gè)步驟

創(chuàng)建一個(gè)對(duì)象
this指向這個(gè)新創(chuàng)建的對(duì)象
執(zhí)行代碼
返回這個(gè)對(duì)象

構(gòu)造函數(shù)方式的優(yōu)點(diǎn)：以構(gòu)造函數(shù)創(chuàng)建的對(duì)象，在其原型上都會(huì)有一個(gè) constructor 屬性，這個(gè)屬性指向構(gòu)造函數(shù) Person 而這個(gè)屬性最初是用來標(biāo)識(shí)數(shù)據(jù)類型的。

憂化

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = sayName;
}
function sayName(){
 console.log(this.name);
}
var p = new person("rose", 18, "actor");

缺點(diǎn)：當(dāng)對(duì)象需要很多方法的時(shí)候，就會(huì)定義多個(gè)全局作用域下的函數(shù)，這樣一來，不僅毫無封裝性可言，而且讓全局作用域下的函數(shù)過多。

5、原型模式

function Person() {}
Person.prototype.name = "rose";
Person.prototype.age = 18;
Person.prototype.sayName = function () {
 console.log(this.name);
};
var p = new Person();
console.log(p);

說到原型對(duì)象就要說一下原型鏈，原型與原型鏈對(duì)象如下圖所示：

我們可以看到，在prototype上面定義的所有屬性都是在其原型對(duì)象上。在原型對(duì)象上的屬性與方法屬于公有屬性和公有方法。其所有實(shí)例都可以訪問到。

6、組合使用構(gòu)造函數(shù)模式和原型模式最常用

function Person(name, age) {
 this.name = name;
 this.age = age;
}
Person.prototype.sayName = function () {
 console.log(this.name);
};
var p = new Person("rose", 18);
console.log(p);