第一部分:
首先,可以用字典創(chuàng)建一個簡單對象,
var cat= {
name : 'jack',
age : '5',
friends : [ ' one cat ' , ' two cat ' ],
run : function(){ console.log("cat is run") ;},
eat : function(){ console.log(" cat is eat") ;}
}
現(xiàn)在用Json的鍵值對構(gòu)建了一個最簡單的對象。
如果要使用這個對象中的變量和函數(shù),只需要按照json的使用規(guī)則來運(yùn)行就可以了。
console.log(cat.name);
console.log(cat.age );
car.run;
car.eat;
在對象中,我們稱變量為對象的屬性,而函數(shù)稱之為方法。(貓?jiān)诂F(xiàn)實(shí)中是一個動物的種類,而只有在定義了具體的屬性后,才能有一個具體對象,對象的屬性可以有,姓名、年齡、等值,貓可以有跑的方法,吃的方法等。)
類是對象的抽象,我們把擁有四肢,會瞄叫的這種動物抽出他們的共有特征,歸為貓類,
對象是類的實(shí)例,而如果養(yǎng)了一只貓叫jack,這是具體化的一只貓。
第二部分:
我們用json創(chuàng)建了一個對象,但這個對象,不便于封裝和引用,為了方便起見,對json構(gòu)成的對象做基本的改進(jìn),以便我們調(diào)用。既然能后調(diào)用,而又能很好的封裝的,可以是選擇用一個函數(shù);這種方式稱為工廠方式構(gòu)造對象。
function cat(name,age,friends ){ //構(gòu)造函數(shù)
var obj = new Object();
obj.name= name;
obj.age = age;
obj.friends= friends;
obj.run = function(a){
console.log(this.name + ' run ' + a);};
obj.eat = function(b){
console.log(this.name + ' eat ' + b);};
return obj;
}
```
我們用函數(shù)構(gòu)造出了一個對象,new是創(chuàng)建對象的關(guān)鍵字。為這個對象新建了屬性和方法。追后用return返回了對象obj。
object()可以用來配合new定義一個空白的對象。然后可以在上面添加屬性和方法。
需要注意的是,在函數(shù)內(nèi)部構(gòu)建對象的時候,new關(guān)鍵字后面必須要大寫才能夠正確編譯,否則會出現(xiàn)報錯現(xiàn)象。
在引用對象的時候,我們只需要在函數(shù)寫入實(shí)參后,就可以調(diào)用其中的屬性和方法;
var cat_jack = cat('jack', '5',['cat_one','cat_two' ]);
cat_jack.run('round');
cat_jack.eat('milk');
用函數(shù)改進(jìn)后的對象已經(jīng)能夠足夠方便的創(chuàng)建出新的對象來,但是new關(guān)鍵字被寫入了函數(shù)內(nèi)部,我們應(yīng)該將new關(guān)鍵字提取出來,
###第三部分
我們?nèi)∠嗽诤瘮?shù)內(nèi)部用new關(guān)鍵字構(gòu)造出來的對象,然后用this來將原來的obj對象替換一下。然后把返回值取消。就創(chuàng)造出了一個構(gòu)造函數(shù)。
取消return和在函數(shù)內(nèi)部的new對象后,只保留屬性和方法。
>所謂"構(gòu)造函數(shù)",其實(shí)就是一個普通函數(shù),但是內(nèi)部使用了[this變量](http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html)。對構(gòu)造函數(shù)使用new運(yùn)算符,就能生成實(shí)例,并且this變量會綁定在實(shí)例對象上。
this:可指當(dāng)前的方法屬于誰,在函數(shù)前面有new的情況下失效。 全局函數(shù)是window的方法,但是在前面加new以后 ,會在函數(shù)中自動新創(chuàng)建一個對象,并指向該對象。構(gòu)造函數(shù)和普通函數(shù)區(qū)別在于調(diào)用前加new。
function cat(name,age,friends ){
this.name= name;
this.age = age;
this.friends= friends;
this.run = function(a){
console.log(this.name + ' run ' + a);};
this.eat = function(b){
console.log(this.name + ' eat ' + b);};
}
然后我們用新的對象來調(diào)用這個構(gòu)造函數(shù),既很容易創(chuàng)造出了一個對象。
var cat_jack = new cat('jack', '5',['cat_one','cat_two' ]);
cat_jack.run('round');
cat_jack.eat('milk');
###第四部分
在構(gòu)造函數(shù)中,由于對形參傳遞參數(shù)的不確定和不便于書寫,可以對參數(shù)用json數(shù)組進(jìn)行抽取,
function cat(option ){
this.name= option.name;
this.age = option.age;
this.friends= option.friends;
this.run = function(a){
console.log(this.name + ' run ' + a);};
this.eat = function(b){
console.log(this.name + ' eat ' + b);};
}
然后新建對象時,將傳遞實(shí)參修改為json格式。
var cat_jack = new Cat({name:'jack', age:'5',friends:['cat_one','cat_two' ]});
cat_jack.run('round');
cat_jack.eat('milk');
###第五部分
重新構(gòu)建出來的對象的確可以正常運(yùn)行,但是任然會存在美中不足的地方,在對象調(diào)用方法的時候,我們創(chuàng)建兩個對象。cat_jack和 cat_maria 。
var cat_jack = new Cat({name:'jack', age:'5',friends:['cat_one','cat_two' ]});
cat_jack.run('round');
cat_jack.eat('milk');
var cat_maria = new Cat({name:'maria', age:'3',friends:['cat_one','cat_two' ]});
cat_maria.run('road');
cat_maria.eat('meet');
測試被調(diào)用的同一個方法后,輸出值為false。原因就在于創(chuàng)建一個函數(shù)的時候同時也創(chuàng)建一個新的對象,每一次使用new,都會創(chuàng)造出一個新的對象。
``` alert(cat_jack.eat == cat_maria.eat);```
這樣并不利于性能的提升,為了改進(jìn)這一點(diǎn),需要引出原型的定義。
prototype:讓我們有能力向?qū)ο筇砑訉傩院头椒?,它的作用就是?gòu)造函數(shù)的一個共享庫;所有數(shù)據(jù)將來都會被所有的新對象公用。
###第六部分
將構(gòu)造函數(shù)中的方法提取出來,另外單獨(dú)使用原型設(shè)置;
function cat(option ){
this.name= option.name;
this.age = option.age;
this.friends= option.friends;
}
cat.prototype={
run : function(a){ console.log(this.name + ' run ' + a);},
eat : function(b){ console.log(this.name + ' eat ' + b);}
}
var cat_jack = new Cat({name:'jack', age:'5',friends:['cat_one','cat_two' ]});
cat_jack.run('round');
cat_jack.eat('milk');
var cat_maria = new Cat({name:'maria', age:'3',friends:['cat_one','cat_two' ]});
cat_maria.run('road');
cat_maria.eat('meet');
然后用alert(cat_jack.eat == cat_maria.eat)測試,得出的結(jié)果為true。
###第七部分
基本原理基本實(shí)現(xiàn)后,還可以對構(gòu)造函數(shù)進(jìn)一步簡化,使用json抽取出參數(shù),然后將屬性和方法,使用json進(jìn)行簡單合并。
function cat(option){
this._init(option);
}
cat.prototype={
_init : function(option)
{
var option=option||{};
this.name= option.name;
this.age = option.age;
this.friends= option.friends },
run : function(a){ console.log(this.name + ' run ' + a);},
eat : function(b){ console.log(this.name + ' eat ' + b);}
}
var cat_jack = new Cat({name:'jack', age:'5',friends:['cat_one','cat_two' ]});
cat_jack.run('round');
cat_jack.eat('milk');
var cat_maria = new Cat({name:'maria', age:'3',friends:['cat_one','cat_two' ]});
cat_maria.run('road');
cat_maria.eat('meet');