最近幾天一直和朋友在討論關(guān)于對象 的問題，當然，在這里說的對象不是指男女朋友對象，是占據(jù)javascript整個的對象，畢竟js是面向?qū)ο蟮木幊陶Z言，那么首先我們要搞清楚什么是對象，不管你怎么去查閱資料，很難去給對象下一個定義，因為這玩意說實話沒有特定的含義，需要我們?nèi)ヂ娜ダ斫?。在這里吧 我也談一下我對對象的理解。

對象，從哲學理論（博主不是在吹，哲學思想很重要）上講十分抽象，大家肯定聽說過一切皆是對象這句話。我們看到的任何東西都可以是對象，比如電視機，電腦，空調(diào)，洗衣機。。等等我們并不知道電視機里面構(gòu)造是啥 我們會用就行，就像我們不需要知道Date對象里面是啥，我們知道它是獲取日期的就行。其實對象這個概念來源于生活，就像你去飯店吃飯一樣，吩咐廚師來一碗蘇格蘭打鹵面，你根本不需要知道蘇格蘭打鹵面怎么做的，你只要知道廚師會做就行，通過調(diào)用（指揮）廚師就能獲取你想要的東西（面）。

俗話說的好 要知其然知其所以然，現(xiàn)在我們不但要會用對象 ，我們還要學會寫一個對象，這樣也能幫我們更好的知道什么是對象 以及對象的一些特性。

瀏覽器自帶的對象很多像Date，Array,Regexp,Error...等這些都是自帶功能的對象，但是有一個對象自身是沒有功能的，就像一個新的畫布一樣，我們可以在上面繪制我們想要的東西，這個對象就是Object,它是一個空白對象?，F(xiàn)在我們做這樣一個例子創(chuàng)建一個人物對象他的名字叫張三，年齡23，他有自己的showName，showAge方法。如下

var person = new Object();
person.name = '張三';
person.age = 23;
person.showName = function(){
    alert("我的名字叫"+this.name)
}
person.showAge = function(){
    alert("我的年齡是"+this.age+"歲")
}
person.showName();//我的名字叫張三person.showAge();//我的年齡是23歲

假如現(xiàn)在要你在創(chuàng)建一個人叫李四年齡24有自己的showName,showAge方法，那么我們可能會這樣寫

var person = new Object();
person.name = '張三';
person.age = 23;
person.showName = function(){
    alert("我的名字叫"+this.name)
}
person.showAge = function(){
    alert("我的年齡是"+this.age+"歲")
}
person.showName();//我的名字叫張三person.showAge();//我的年齡是23歲//.................................var person1 = new Object();
person1.name = '李四';
person1.age = 24;
person1.showName = function(){
    alert("我的名字叫"+this.name)
}
person1.showAge = function(){
    alert("我的年齡是"+this.age+"歲")
}
person1.showName();//我的名字叫李四person1.showAge();//我的年齡是24歲

我相信寫到這里你還是可以接受，但是假如現(xiàn)在再讓你添加一個人，或者十個人 我相信你會瘋掉，所以我們可以對代碼優(yōu)化，最好的辦法就是抽出相同的部分封裝成方法 如下

function Createperson(name,age){    //原料
    var Person = new Object();    //加工
    Person.name = name;
    Person.age = age;
    Person.showName = function(){
        alert("我的名字叫"+this.name)
    }
    Person.showAge = function(){
        alert("我的年齡是"+this.age+"歲")
    }    //出廠
    return Person;
}var person = Createperson('張三',23)
person.showName();//我的名字叫張三person.showAge();//我的年齡是23歲//.................................var person1 = Createperson('李四',24)
person1.showName();//我的名字叫李四person1.showAge();//我的年齡是24歲

這樣寫是不是代碼減少了很多，這里有幾個概念我需要說明一下，

  • 構(gòu)造函數(shù)：Createperson函數(shù)在這里有一個別名叫做構(gòu)造函數(shù)，為什么呢？因為它是專門用來生成對象的。

  • 屬性：構(gòu)造函數(shù)里面的name和age叫做屬性，其實屬性和變量是一個概念，只不過變量是自由的，而屬性是屬于一個對象的，

  • 工廠方式：創(chuàng)建對象的方式有很多種，而這里運用的是工廠方式，就是原料>加工>出廠的過程。

平常我們創(chuàng)建實例都會寫一個new 而我們上面的代碼卻沒有寫new 而是直接調(diào)用Createperson方法，那么我們可以給它前面加一個new 嗎？當然任何函數(shù)前面都可以加new 只不過會有些區(qū)別，比如下面例子

function show (){
    alert(this);
}
show()//windownew show()//Object//也就是說當沒有new 的時候，this是指向window的，因為這個方法本身就屬于window，而當添加上new的時候此時this指向的是一個新的對象

我們隊上面的代碼進行改造，會得到如下代碼

function Createperson(name,age){    //var Person = new Object();
    this.name = name;   this.age = age;    this.showName = function(){
        alert("我的名字叫"+this.name)
    }    this.showAge = function(){
        alert("我的年齡是"+this.age+"歲")
    }    //return Person;}var person = new Createperson('張三',23)
person.showName();//我的名字叫張三person.showAge();//我的年齡是23歲//.................................var person1 = new Createperson('李四',24)
person1.showName();//我的名字叫李四person1.showAge();//我的年齡是24歲

我相信大家很奇怪為什么有了new之后要這樣寫，其實是這樣的，沒有new的時候我們要自己創(chuàng)建一個空白對象并把這個空白對象返回出去，但是有了new之后就不一樣了系統(tǒng)會暗地里悄無聲息地幫我們做兩件事情第一：創(chuàng)建一個空白對象第二：把空白對象返回出去 也就是這樣的邏輯

function Createperson(name,age){    //var Person = new Object();
    //瀏覽器會偷偷的這樣做 var this = new Object();
    this.name = name;   this.age = age;    this.showName = function(){
        alert("我的名字叫"+this.name)
    }    this.showAge = function(){
        alert("我的年齡是"+this.age+"歲")
    }    //return Person;
    //瀏覽器偷偷的return this}var person = new Createperson('張三',23)
person.showName();//我的名字叫張三person.showAge();//我的年齡是23歲//.................................var person1 = new Createperson('李四',24)
person1.showName();//我的名字叫李四person1.showAge();//我的年齡是24歲

經(jīng)過上面代碼的改造我們現(xiàn)在給構(gòu)造函數(shù)添加了new，但是還有問題 假如現(xiàn)在要添加更多的人，那么我們要不停的new(),那么內(nèi)存中就是每個人都有name age showName showAge ,這樣太浪費內(nèi)存空間 看過我前面文章的朋友可能知道該怎么處理，在處理之前我在重復(fù)講三個概念

  • 原型：什么是原型呢？其實原型我們之前接觸過，可能你沒有很深的概念，在css中我們給一組元素添加樣式會用到class，給一個元素添加樣式可能會用到行間樣式，然而在js中給一組對象添加方法就叫做原型，例如下面一個簡單的例子

var arr1 = new Array(1,2,3);var arr2 = new Array(1,2,4);
arr1.sum = function(){    var result = 0;    for(var i =0;i<this.length; i++){
        result += this[i];
    }    return result;
}
alert(arr1.sum())//6alert(arr2.sum())//arr2.sum is not a function

為什么arr2沒有sum方法呢，其實很簡單，因為你只給arr1添加了sum方法，就好比給一個元素添加了行間樣式，這個樣式只屬于這個元素而已，那么要怎樣才能讓arr2上面也有sum方法呢，這就要利用原型了。我們把代碼改成下面這樣子

var arr1 = new Array(1,2,3);var arr2 = new Array(1,2,8);Array.prototype.sum= function(){    var result = 0;    for(var i =0;i<this.length; i++){
        result += this[i];
    }    return result;
}
alert(arr1.sum())//6alert(arr2.sum())//11

  • 類 什么是類呢 類其實就是一個模子 Array ,Date就是類 也可以管類叫做構(gòu)造函數(shù) 模子的作用是成產(chǎn)產(chǎn)品，而類的作用是生產(chǎn)對象
    就像var arr = new Array();那么arr就是成產(chǎn)出來的對象（產(chǎn)品），Array就是模子（類）

有了上面的原型 類的概念我們把我們的代碼進一步改造成下面的

function Createperson(name,age){    //var Person = new Object();
    this.name = name;   this.age = age;
    
}
Createperson.prototype.showName = function(){
    alert("我的名字叫"+this.name)
}
Createperson.prototype.showAge = function(){
    alert("我的年齡是"+this.age+"歲")
}var person = new Createperson('張三',23)
person.showName();//我的名字叫張三person.showAge();//我的年齡是23歲//.................................var person1 = new Createperson('李四',24)
person1.showName();//我的名字叫李四person1.showAge();//我的年齡是24歲

根據(jù)上面的代碼可以看到構(gòu)造函數(shù)里面加的全都是屬性，原型上面加的方法，其實不難理解 跟我們寫樣式一樣，相同的我們會放到class里，不同的我們會添加行間樣式，每個人的名字和年齡是不一樣的所以我們把它放到構(gòu)造函數(shù)里面，但是它們的方法是一樣的都是彈出名字和年齡，那么我們就把相同的方法放在原型上。一句話總結(jié)就是構(gòu)造函數(shù)就屬性 類的原型加方法。

我們現(xiàn)在明白了什么是對象也知道如何去寫一個對象了，說的不對的地方希望大家及時反饋，以上代碼全部經(jīng)過測試的，融合了書本知識和實踐知識 本文原創(chuàng)，轉(zhuǎn)載注明出處