本文實例講述了js中的面向?qū)ο笾畬ο蟪Ｒ妱?chuàng)建方法。分享給大家供大家參考，具體如下：

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

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

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

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

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

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

使用object

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

使用字面量

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

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

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)建對象

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

var obj = new Object();

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

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

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

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

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

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

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

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)
 };
}

這樣我們再分別創(chuàng)建Student和Fruit的對象

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

這時我們再來用instanceof操作符來檢測以上對象類型就可以區(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 任何對象均繼承自O(shè)bject
alert(v2 instanceof Object); //true 任何對象均繼承自O(shè)bject

可以將上面的函數(shù)簡化：Student和Fruit對象中共有同樣的方法移到構(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);
}

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

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

更好的方案是通過原型對象模式來解決。

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

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

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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

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

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

最新評論