本文實(shí)例講述了js中的面向?qū)ο笾畬?duì)象常見(jiàn)創(chuàng)建方法。分享給大家供大家參考，具體如下：

創(chuàng)建對(duì)象的幾種常用方式

1.使用Object或?qū)ο笞置媪縿?chuàng)建對(duì)象

2.工廠模式創(chuàng)建對(duì)象

3.構(gòu)造函數(shù)模式創(chuàng)建對(duì)象

4.原型模式創(chuàng)建對(duì)象

1.使用Object或?qū)ο笞置媪縿?chuàng)建對(duì)象

使用object

var student = new Object();
student.name = "easy";
student.age = "20";

使用字面量

var sutdent = {
 name : "easy",
 age : 20
};

2.工廠模式創(chuàng)建對(duì)象

function createStudent(name, age) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj;
}
var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

3.構(gòu)造函數(shù)模式創(chuàng)建對(duì)象

在上面創(chuàng)建Object這樣的原生對(duì)象的時(shí)候，我們就使用過(guò)其構(gòu)造函數(shù)

var obj = new Object();

在創(chuàng)建原生數(shù)組Array類(lèi)型對(duì)象時(shí)也使用過(guò)其構(gòu)造函數(shù)：

var arr = new Array(10); //構(gòu)造一個(gè)初始長(zhǎng)度為10的數(shù)組對(duì)象

我們首先了解一下構(gòu)造函數(shù)和普通函數(shù)有什么區(qū)別。

1、實(shí)際上并不存在創(chuàng)建構(gòu)造函數(shù)的特殊語(yǔ)法，其與普通函數(shù)唯一的區(qū)別在于調(diào)用方法。對(duì)于任意函數(shù)，使用new操作符調(diào)用，那么它就是構(gòu)造函數(shù)；不使用new操作符調(diào)用，那么它就是普通函數(shù)。

2、按照慣例，我們約定構(gòu)造函數(shù)名以大寫(xiě)字母開(kāi)頭，普通函數(shù)以小寫(xiě)字母開(kāi)頭，這樣有利于顯性區(qū)分二者。例如上面的new Array()，new Object()。

3、使用new操作符調(diào)用構(gòu)造函數(shù)時(shí)，會(huì)經(jīng)歷(1)創(chuàng)建一個(gè)新對(duì)象；(2)將構(gòu)造函數(shù)作用域賦給新對(duì)象（使this指向該新對(duì)象）；(3)執(zhí)行構(gòu)造函數(shù)代碼；(4)返回新對(duì)象；4個(gè)階段。

ok，了解了構(gòu)造函數(shù)和普通函數(shù)的區(qū)別之后，我們使用構(gòu)造函數(shù)將工廠模式的函數(shù)重寫(xiě)，并添加一個(gè)方法屬性：

function Student(name, age) {
 this.name = name;
 this.age = age;
 this.alertName = function(){
  alert(this.name)
 };
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
 this.alertName = function(){
  alert(this.name)
 };
}

這樣我們?cè)俜謩e創(chuàng)建Student和Fruit的對(duì)象

var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");

這時(shí)我們?cè)賮?lái)用instanceof操作符來(lái)檢測(cè)以上對(duì)象類(lèi)型就可以區(qū)分出Student以及Fruit了：

alert(v1 instanceof Student); //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); //true 任何對(duì)象均繼承自O(shè)bject
alert(v2 instanceof Object); //true 任何對(duì)象均繼承自O(shè)bject

可以將上面的函數(shù)簡(jiǎn)化：Student和Fruit對(duì)象中共有同樣的方法移到構(gòu)造函數(shù)外部

function Student(name, age) {
 this.name = name;
 this.age = age;
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
}；
function alertName() {
 alert(this.name);
}

我們通過(guò)將alertName()函數(shù)定義為全局函數(shù)，這樣對(duì)象中的alertName屬性則被設(shè)置為指向該全局函數(shù)的指針。由此stu1和stu2共享了該全局函數(shù)，解決了內(nèi)存浪費(fèi)的問(wèn)題

但是，通過(guò)全局函數(shù)的方式解決對(duì)象內(nèi)部共享的問(wèn)題，終究不像一個(gè)好的解決方法。如果這樣定義的全局函數(shù)多了，我們想要將自定義對(duì)象封裝的初衷便幾乎無(wú)法實(shí)現(xiàn)了。

更好的方案是通過(guò)原型對(duì)象模式來(lái)解決。

4.原型的模式創(chuàng)建對(duì)象

原型鏈甚至原型繼承，是整個(gè)JS中最難的一部分也是最不好理解的一部分，在這里由于我們課程定位的原因，如果對(duì)js有興趣的同學(xué)，可以去查閱一下相關(guān)JS原型的一些知識(shí)點(diǎn)。

function Student() {
  this.name = 'easy';
  this.age = 20;
}
Student.prototype.alertName = function(){
  alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函數(shù)

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論