本篇是你必須知道的Javascript系列第三篇，我們主要來(lái)看看Javascript是如何面向?qū)ο蟮木幊痰摹Ｖ饕婕耙韵聝?nèi)容 ：

• Javascript中的對(duì)象
  • 什么是對(duì)象
  • 遍歷屬性
• 創(chuàng)建對(duì)象
  • 工廠模式
  • 構(gòu)造函數(shù)模式
• 詳解this
  • 在函數(shù)中
  • 在對(duì)象方法中
  • 在構(gòu)造函數(shù)中
  • 在call和apply中
  • 在bind中
  • 在dom元素事件處理函數(shù)中
• 詳解prototype
  • 什么是原型
  • 什么是原型鏈
  • 利用原型鏈實(shí)現(xiàn)繼承
  • 原型鏈中的問(wèn)題

Javascript中的對(duì)象

什么是對(duì)象

我們可以把Javascript中對(duì)象理解為一組無(wú)序的鍵值對(duì)，就好像C#中的Dictionary<string,Object>一樣。Key是屬性的名稱，而value可以為以下3種類型：

1. 基本值（string, number, boolean, null, undefined)
2. 對(duì)象
3. 函數(shù)

var o = new Object();
o["name"] = "jesse"; //基本值作為對(duì)象屬性
o["location"] = {   //對(duì)象作為對(duì)象屬性
  "city": "Shanghai",
  "district":"minhang"
};

// 函數(shù) 作為對(duì)象屬性
o["sayHello"] = function () {
  alert("Hello, I am "+ this.name + " from " + this.location.city);
}

o.sayHello();

遍歷屬性

　　在C#中我們是可以用foreach對(duì)Dictionary<string,Object>進(jìn)行遍歷的，如果說(shuō)對(duì)象在Javascript中是一組鍵值對(duì)的話，那我們?nèi)绾芜M(jìn)行遍歷呢？

for (var p in o) {
  alert('name:'+ p + 
     ' type:' + typeof o[p]
    );
}
// name:name type:string
// name:location type:object
// name:sayHello type:function

上面的這種遍歷方式會(huì)把原型中的屬性也包括進(jìn)來(lái)，關(guān)于什么是原型，以及如何區(qū)分原型和實(shí)例中的屬性我們下面會(huì)講到。

創(chuàng)建對(duì)象
　　其實(shí)在上面我們已經(jīng)創(chuàng)建了一個(gè)對(duì)象，并且使用了以下兩種創(chuàng)建對(duì)象的方式。

1. 利用new創(chuàng)建一個(gè)Object的實(shí)例。
2. 字面量

我們上面的o是用第一種方式創(chuàng)建的，而o中的location屬性則是用字面量的方式創(chuàng)建的。而第一種方式其實(shí)也有一種名字叫做構(gòu)造函數(shù)模式，因?yàn)镺bject實(shí)際上是一個(gè)構(gòu)造函數(shù)，為我們產(chǎn)生了一個(gè)Object的實(shí)例。如果對(duì)于構(gòu)造函數(shù)這一塊還有不清楚的話，趕緊去看我的第一篇 類型基礎(chǔ)Object與object吧。

　　除了以上兩種方式以外，我們一些創(chuàng)建對(duì)象的方式，我們也來(lái)一起看一下：

工廠模式

function createPerson(name, age, job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
}
var person1 = createPerson('Jesse', 29, 'Software Engineer');
var person2 = createPerson('Carol', 27, 'Designer');

這種模式創(chuàng)建的對(duì)象有一個(gè)問(wèn)題，那就是它在函數(shù)的內(nèi)部為我創(chuàng)建了一個(gè)Object的實(shí)例，這個(gè)實(shí)例跟我們的構(gòu)造函數(shù)createPerson是沒(méi)有任何關(guān)系的。

因?yàn)槲以趦?nèi)部用new Object()來(lái)創(chuàng)建了這個(gè)對(duì)象，所以它是Object的實(shí)例。所以如果我們想知道它是具體哪個(gè)function的實(shí)例，那就不可能了。

構(gòu)造函數(shù)模式

　　工廠模式?jīng)]有解決對(duì)象識(shí)別的問(wèn)題，但是我們可以想一下，Object()實(shí)際上也是一個(gè)函數(shù)，只不過(guò)當(dāng)我在它前面加上一個(gè)new的時(shí)候，它就變成了一個(gè)構(gòu)造函數(shù)為我們產(chǎn)生一個(gè)Object的實(shí)例。那么我同樣也可以在其它函數(shù)前面加上new這樣就可以產(chǎn)生這個(gè)函數(shù)的實(shí)例了，這就是所謂的構(gòu)造函數(shù)模式。

function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function(){
    alert(this.name);
  };
}

var p1 = new Person('Jesse', 18, 'coder');
alert(p1 instanceof Person); // true

詳解this
　　this在Javascript中也可以算是一個(gè)很神奇對(duì)象，沒(méi)錯(cuò)this是一個(gè)對(duì)象。我們?cè)谏弦黄饔糜蚝妥饔糜蜴溨兄v到了變量對(duì)象，變量對(duì)象決定了在當(dāng)前的執(zhí)行環(huán)境中有哪些屬性和函數(shù)是可以被訪問(wèn)到的，從某種程度上來(lái)說(shuō)我們就可以把this看作是這個(gè)變量對(duì)象。我們之前提到了最大的執(zhí)行環(huán)境是全局執(zhí)行環(huán)境，而window就是全局執(zhí)行環(huán)境中的變量對(duì)象，那么我們?cè)谌汁h(huán)境中this===window是會(huì)返回true的。

除了全局執(zhí)行環(huán)境以外，我們還提到了另外一種執(zhí)行環(huán)境，也就是函數(shù)。每一個(gè)函數(shù)都有一個(gè)this對(duì)象，但有時(shí)候他們所代表的值是不一樣的，主要是這個(gè)函數(shù)的調(diào)用者來(lái)決定的。我們來(lái)看一下以下幾種場(chǎng)景：

函數(shù)

function f1(){
 return this;
}

f1() === window; // global object

因?yàn)楫?dāng)前的函數(shù)在全局函數(shù)中運(yùn)行，所以函數(shù)中的this對(duì)象指向了全局變量對(duì)象，也就是window。這種方式在嚴(yán)格模式下會(huì)返回undefined。

對(duì)象方法

var o = {
 prop: 37,
 f: function() {
  return this.prop;
 }
};

console.log(o.f()); // logs 37

在對(duì)象方法中，this對(duì)象指向了當(dāng)前這個(gè)實(shí)例對(duì)象。注意： 不管這個(gè)函數(shù)在哪里什么時(shí)候或者怎么樣定義，只要它是一個(gè)對(duì)象實(shí)例的方法，那么它的this都是指向這個(gè)對(duì)象實(shí)例的。

var o = { prop: 37 };
var prop = 15;

function independent() {
  return this.prop;
}

o.f = independent;
console.log(independent()); // logs 15
console.log(o.f()); // logs 37

區(qū)別:上面的函數(shù)independent如果直接執(zhí)行，this是指向全局執(zhí)行環(huán)境，那么this.prop是指向我們的全局變量prop的。但是如果將independent設(shè)為對(duì)象o的一個(gè)屬性，那么independent中的this就指向了這個(gè)實(shí)例，同理this.prop就變成了對(duì)象o的prop屬性。

構(gòu)造函數(shù)

　　我們上面講到了用構(gòu)造函數(shù)創(chuàng)建對(duì)象，其實(shí)是利用了this的這種特性。在構(gòu)造函數(shù)中，this對(duì)象是指向這個(gè)構(gòu)造函數(shù)實(shí)例化出來(lái)的對(duì)象。

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
    alert(this.name);
  };
}

var p1 = new Person('Jesse', 18, 'coder');
var p2 = new Person('Carol',16,'designer');

當(dāng)我們實(shí)例化Person得到p1的時(shí)候，this指向p1。而當(dāng)我們實(shí)例化Person得到p2的時(shí)候，this是指向p2的。

利用call和apply

　　當(dāng)我們用call和apply去調(diào)用某一個(gè)函數(shù)的時(shí)候，這個(gè)函數(shù)中的this對(duì)象會(huì)被綁定到我們指定的對(duì)象上。而call和apply的主要區(qū)別就是apply要求傳入一個(gè)數(shù)組作為參數(shù)列表。

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = { a: 1, b: 3 };

// 第一個(gè)參數(shù)會(huì)被綁定成函數(shù)add的this對(duì)象
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// 第二個(gè)參數(shù)是數(shù)組作為arguments傳入方法add
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

在bind方法中

　　bind方法是 存在于function的原型中的 Function.prototype.bind，也就是說(shuō)所有的function都會(huì)有這個(gè)方法。但我們調(diào)用某一個(gè)方法的bind的時(shí)候，會(huì)產(chǎn)生一個(gè)和原來(lái)那個(gè)方法一樣的新方法，只不過(guò)this是指向我們傳得bind的第一個(gè)參數(shù)。

function f() {
  return this.a;
}

var g = f.bind({ a: "azerty" });
console.log(g()); // azerty

var o = { a: 37, f: f, g: g };
console.log(o.f(), o.g()); // 37, azerty

在dom元素事件處理器中

　　在事件處理函數(shù)中，我們的this是指向觸發(fā)這個(gè)事件的dom元素的。

HTML代碼

<html>
<body>
  <div id="mydiv" style="width:400px; height:400px; border:1px solid red;"></div>
  <script type="text/javascript" src="essence.js"></script>
</body>
</html>

JavaScript代碼

function click(e) {
  alert(this.nodeName);
}

var myDiv = document.getElementById("mydiv");
myDiv.addEventListener('click', click, false);

當(dāng)我們點(diǎn)擊頁(yè)面那個(gè)div的時(shí)候，毫無(wú)疑問(wèn)，它是會(huì)顯示DIV的。

詳解prototype
　　prototype即原型，也是Javascrip中一個(gè)比較重要的概念。在說(shuō)原型之前呢，我們需要回顧一下之前的構(gòu)造函數(shù)模式。在我們用構(gòu)造函數(shù)去創(chuàng)建對(duì)象的時(shí)候主要是利用了this的特性。

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
    alert(this.name);
  };
}

var p1 = new Person('Jesse', 18, 'coder');
var p2 = new Person('Carol', 17, 'designer');

我們上面還講到了當(dāng)用Person實(shí)例化p1的時(shí)候Person中的this是指向p1的，當(dāng)實(shí)例化p2的時(shí)候呢，this是指向p2的。那也就是說(shuō)，p1和p2中的sayName雖然起到了同樣的作用，但是實(shí)際上他們并非是一個(gè)函數(shù)。

也就是說(shuō)他們內(nèi)存堆中是存在多份拷貝的，而不是在棧中引用地址的拷貝。先不說(shuō)這符不符合面向?qū)ο蟮乃枷耄辽龠@對(duì)于內(nèi)存來(lái)說(shuō)也是一種浪費(fèi)。而解決辦法就是我們要討論的原型。

什么是原型

　　在Javascript中的每一個(gè)函數(shù)，都會(huì)有一個(gè)原型對(duì)象，這個(gè)原型對(duì)象和我們普通的對(duì)象沒(méi)有區(qū)別。只不過(guò)默認(rèn)會(huì)有一個(gè)constructor屬性指向這個(gè)函數(shù)。 同時(shí)，所有這個(gè)函數(shù)的實(shí)例都會(huì)有一個(gè)引用指向這個(gè)原型對(duì)象。如果不太清楚，那就看看下面這張圖吧：

以上就是構(gòu)造函數(shù)，構(gòu)造函數(shù)原型，以及實(shí)例之間的關(guān)系。以我們的Person構(gòu)造函數(shù)為例，所有Person的實(shí)例（p1,p2)都舒服一個(gè)prototype屬性指向了Person構(gòu)造函數(shù)prototype對(duì)象。如此一來(lái)，我們就可以把方法寫(xiě)在原型上，那么我們所有的實(shí)例就會(huì)訪問(wèn)同一個(gè)方法了。

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;

  Person.prototype.sayName = function () {
    alert(this.name);
  }
}
var p1 = new Person('Jesse', 18, 'coder');
var p2 = new Person('Carol', 17, 'designer');

alert(p1.sayName == p2.sayName); // true

什么是原型鏈

　　大家還記得作用域鏈么？如果不記得，請(qǐng)自覺(jué)到第二篇中去復(fù)習(xí)（作用域和作用域鏈）。簡(jiǎn)單的來(lái)說(shuō)，我們?cè)谝粋€(gè)執(zhí)行環(huán)境中訪問(wèn)某個(gè)變量的時(shí)候如果當(dāng)前這個(gè)執(zhí)行環(huán)境中不存在這個(gè)變量，那么會(huì)到這個(gè)執(zhí)行環(huán)境的包含環(huán)境也就是它的外層去找這個(gè)變量，外層還找不到那就再外一層，一直找到全局執(zhí)行環(huán)境為止，這就是作用域鏈。而原型鏈有點(diǎn)類型，只不過(guò)場(chǎng)景換到了我們的對(duì)象實(shí)例中，如果我在一個(gè)實(shí)例中找某一個(gè)屬性，這個(gè)實(shí)例中沒(méi)有，那就會(huì)到它的原型中去找。記住，我們上面說(shuō)了，原型也是一個(gè)對(duì)象，它也有自己的原型對(duì)象，所以就行成了一個(gè)鏈，實(shí)例自己的原型中找不到，那就到原型的原型對(duì)象中去找，一直向上延伸到Object的原型對(duì)象，默認(rèn)我們創(chuàng)建的函數(shù)的原型對(duì)象它自己的原型對(duì)象是指向Object的原型對(duì)象的，所以這就是為什么我們可以在我們的自定義構(gòu)造函數(shù)的實(shí)例上調(diào)用Object的方法（toString, valueOf)。

利用原型實(shí)現(xiàn)繼承

　　其實(shí)我們上面已經(jīng)講了繼承在Javascript中的實(shí)現(xiàn)，主要就是依靠原型鏈來(lái)實(shí)現(xiàn)的。所有的實(shí)例是繼承自object就是因?yàn)樵谀J(rèn)情況下，我們所有創(chuàng)建函數(shù)的原型對(duì)象的原型都指向了object對(duì)象。同理，我們可以定義自己的繼承關(guān)系。

function Person(name, age, job) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function () {
  alert(this.name);
}

function Coder(language){
  this.language = language;
}
Coder.prototype = new Person(); //將 Coder 的原型指向一個(gè)Person實(shí)例實(shí)現(xiàn)繼Person
Coder.prototype.code = function () {
  alert('I am a '+ this.language +' developer, Hello World!');
}

function Designer() {
}
Designer.prototype = new Person(); //將 Desiger 的原型指向一個(gè)Person實(shí)例實(shí)現(xiàn)繼Person
Designer.prototype.design = function () {
  alert('其實(shí)我只是一個(gè)摳圖工而已。。。。');
}

var coder = new Coder('C#');
coder.name = 'Jesse'; 
coder.sayName(); //Jesse
coder.code();   // I am a C# developer, Hello World!

var designer = new Designer();
designer.name = 'Carol';
designer.sayName(); // Carol
designer.design();  // 其實(shí)我只是一個(gè)摳圖工而已。。。。

原型鏈中的問(wèn)題

　　由于原型對(duì)象是以引用的方式保存的，所以我們?cè)谫x值的時(shí)候要特別注意，一不小心就有可能把之前賦的值給賦蓋了。比如上面的代碼中，我們先寫(xiě)原型方法，再實(shí)現(xiàn)繼承，那我們的原型方法就沒(méi)有了。

function Coder(language){
  this.language = language;
}
Coder.prototype.code = function () {
  alert('I am a '+ this.language +' developer, Hello World!');
}
Coder.prototype = new Person(); //這里會(huì)覆蓋上面所有的原型屬性和方法
var coder = new Coder('C#');
coder.name = 'Jesse';
coder.sayName();
coder.code();   // 這里會(huì)報(bào)錯(cuò)，找不到code方法。

這樣三篇文章都完成了