JavaScript 面向對象學習——1

公司項目採用Ext，結果本人發現入門不易！尤爲是採用JavaScript編寫面向對象程序，常常使用jQuery的知道，jQuery是面向函數編程的，因此很容易入門。然而，Ext是面向對象的，那麼，當你想要自定義Ext組件的時候，或者使用Ext組件的時候就會很苦惱。因此，要先學習Javascript面向對象基礎，其次查看Ext源代碼。

這將是後期的學習路線，博客路線。

1 Javascript是基於原型(Prototype based)的面向對象的語言，Java語言，是基於類模式(Class based)。那麼，咱們不能採用相似於Java那樣一個子類繼承父類就能繼承父類的屬性和方法。無論怎麼樣，實例化一個對象，均可以採用new的方式完成。

2 Javascript類的定義就是函數的定義，問題來了，類與函數到底有什麼差別？難道我調用一個函數是實例化一個對象嗎？因此，這裏我要特做筆記，把這兩點區分開來！

function Father(name , age){
 
  var sex ; // 私有屬性，局部變量
  this.name = name; // 成員屬性
  this.age = age; // 成員屬性
  sex = 'man';
  
  this.setSex = function(value){
    sex = value;  // 賦值私有屬性
  };
  
  this.getSex = function(){
     return sex; // 返回私有屬性的值，外面沒法直接經過實例獲取屬性的值 
  };
  
  return name+'_'+age+'_'+sex; // 函數返回值，對象實例時這個沒有做用
  
}
var f1 = new Father('maven','12'); // 實例化一個對象
var f2 = Father('svn','21');// 調用函數

console.info(f1); // 對象結構
console.info(f2);// 函數返回值

console.info(f1.sex); // 沒法獲取私有屬性
console.info(f1.name);// 獲取成員屬性
console.info(f1.getSex());// 獲取成員方法

console.info(f2.sex);// f2只是一個字符串返回值，因此下面調用都是錯誤的
console.info(f2.name);
console.info(f2.value);

總結：

1）直接調用函數，實質上返回的是函數的返回值，在函數中定義的方法、屬性都不能夠在外面訪問。由於一個函數就是一個做用域塊，在函數調用時這個代碼塊在內存中運行，函數運行結束，做用域塊內部的局部變量被回收。因此沒法訪問裏面定義的屬性和方法。

2）採用new方式，由於Javascript沒有類的定義，咱們只是把函數定義當作類的定義看待。採用new時，系統會在內存的棧中開闢一個空間來存儲對象的屬性與方法，同時返回對象的引用。因此，類定義時註冊的屬性、方法並不會被垃圾回收機制回收，那麼對象就能調用以前註冊的屬性與方法了。

3 this的指向

// 調用以上代碼
console.info(name); // 輸出svn
console.info(this.name);// 輸出svn
console.info(f1.name);// 輸出maven
console.info(f2.name);// 輸出maven


// 調用以上代碼
console.info(getSex());// 輸出‘man’
console.info(this.getSex());// 輸出‘man’
console.info(f1.getSex()); // 輸出‘man’
console.info(f2.getSex()); // 錯誤

總結：

1）函數做用域塊中採用this來定義該屬性的做用域，然而this具體指向誰還須要看怎麼使用！

2）若是是經過new一個對象的方式運行函數的定義，那麼這個函數中的this指向當前對象；

3）若是是本身調用函數運行，那麼這個this指向調用該函數的對象，在這裏由於咱們聲明瞭全局對象，因此是window調用了該函數，那麼this指向window

4）總而言之：除了new以外，其餘的this都是指向直接調用者，【誰調用了我，誰就是this】；還有注意的是：以下：

father.son.sing();

在sing方法中若是有this，那麼這個this指向son,由於是son直接調用了sing不是father。

因此，咱們在項目開發中，通常不會直接使用this，而是使用 var me  =  this ; 這樣每次都調用 me ， 而不會混淆this的指向了。

3 關於var定義變量爲私有成員

我相信學習過Javascript的人都知道，若是採用var定義一個全局變量，實質上會在window對象中添加一個屬性。可是，爲何咱們在函數定義個var類型的變量卻沒有在實例中增長屬性呢？