javaScript物件 原型繼承 建構函式繼承 組合繼承

1. javaScript是指令碼語言。指令碼程式在執行時，是由系統的一個直譯器，將其一條條的翻譯成機器可識別的指令，並按程式順序執行。指令碼語言是為了縮短傳統的編寫-編譯-連結-執行（edit-compile-link-run）過程而建立的計算機程式語言。一個指令碼通常是解釋執行而非編譯。

2. 資料型別

   字串（String）、數字(Number)、布林(Boolean)、陣列(Array)、物件(Object)、空（Null）、未定義（Undefined）。

   陣列

   var ar = new Array();
   ar[0] = "bmw";
   ar[1] = "byd";
   var ar2 = ["a","b"];
   var ar3 = new Array("aa","bb");
    
   

   Undefined

   Undefined這個值表示變數不含有值。
   

   物件建立的幾種方式
   1、 var obj = new Object();
   obj.name=”lmj”;
   obj.age = 26;
   2、 var obj = {name:”lmj”,age:26};//字面量
   3、 建構函式
   function Persion(name,age){
   this.name = name;
   this.age = age;
   this.sayName = function(){
   alert(this.name);
   }
   }
   var obj = new Persion(“lmj”,26);

   在建構函式中，給物件添加了一個sayName()方法，
   所以每次在new物件的時候，都會新建立一個sayName()方法。    
   也就是說不同的物件擁有不同的sayName()例項。為了解決這個問題，
   就需要用到原型。
   

   4、原型模式
   理解原型物件prototype
   我們建立的每個函式都有一個prototype屬性，這個屬性是一個指標（當然可以修改這個指標）
   指向一個物件，而這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法。

   function Person(){

   }

   Person.prototype.name = “jack”;
   Person.prototype.age = 20;
   Person.prototype.sayName = function(){
   alert(this.name);
   }

   var p = new Person();
   //p這個例項物件可以呼叫sayName方法，是由於搜尋原型物件可以找到了sayName方法
   p.sayName();
   p.name = “zhansan”;
   alert(p.name); //這個時候回輸出zhansan，因為查詢的時候會先從例項物件的屬性中查詢，查詢到了name屬性為zhansan，就不會再去查詢prototype物件的屬性，相當於prototype被遮蔽了，這個時候想要使用prototype中的屬性，只有呼叫delete p.name方法刪除例項物件的屬性

   再來理解prototype指向一個物件，而這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法。
   所有構造方法的例項，都有共同的prototype物件，通過查詢，每個例項都用了相同的prototype所有的屬性。
   

修改Persion.prototype指標，修改之前的例項的prototype還是指向原來的prototype，修改之後建立的例項的prototype指向修改後的指標。如果是系統預設給建立的prototype的constructor才指向Person函式
看一個prototype修改後的圖片，這個把字面量物件加了constructor屬性，並且指向Person。預設是指向Object

>注意問題：  
>在原型物件中，新增公共的屬性和方法；  
>由於一個函式的原型物件只有一個，如果原型物件的屬性是引用資料型別，   
>那麼new 出來的所有物件的引用資料型別的屬性都是同一個。   
>下面的例子中，第一個物件將會影響第二個物件  

    //輸出快捷鍵，輸出的內容.log 然後按tag鍵

//1、字面量建立物件
var p1 = {name:”Json”,age:26,sayName:function () {
console.log(this.name);
}};
p1.sayName();
//2、new Object
var p2 = new Object();
p2.name=”老羅”;
p2.age=36;
p2.sayName = function () {
console.log(this.name);
}
p2.sayName();
//3、建構函式
function Persion (name,age) {
this.name = name;
this.age = age;
this.sayName =function () {
console.log(this.name);
}
}
var p3 = new Persion(“羅永浩”,36);
p3.sayName();
//4、工廠方法
function PersionFactory(name,age) {
var p = new Object();
p.name = name;
p.age = age;
p.sayName = function () {
console.log(this.name);

}
return p;

}
var p4 = PersionFactory(“雷軍”,46);
p4.sayName();
//5、原型模式,原型物件與funciton對應且唯一存在，這樣可以解決物件funciton不被重複建立，
// 但是原型物件中的引用型別屬性會被所有物件共同持有
function Phone() {

}
Phone.prototype.name=”預設手機”;
Phone.prototype.colors =[“黑”,”白”];//預設顏色
Phone.prototype.showColors = function () {
console.log(this.name+”:”+this.colors);
}
var p5 = new Phone();
p5.name = “小米”;
p5.colors.push(“灰色”);//小米新增灰色
p5.showColors();
var p51 = new Phone();
p51.name=”錘子”;
p51.showColors();
//————————————————————————————————-
/**
* 繼承
* 1、直接通過原型繼承，屬性和方法都寫在建構函式中
* 2、直接通過原型繼承，屬性和方法都寫在原型中
* 3、直接通過建構函式繼承
* 4、通過建構函式和原型組合繼承
*
*/
//第一種方式
function SuperType() {
this.colors = [“black”,”white”];
this.showColors = function () {
console.log(this.colors);
}
}
function ChildType() {

}
ChildType.prototype = new SuperType();
var child1 =new ChildType();
child1.showColors();
child1.colors.push(“gary”)
var child2 = new ChildType();
child2.showColors();
/*輸出結果: [ ‘black’, ‘white’ ]
[ ‘black’, ‘white’, ‘gary’ ]
明顯通過原型繼承，物件的屬性都是來自原型，而原型唯一存在，所以引用型別變數的地址被拷貝給每一個new出來的物件
*/
// 方式2和方式1 是一樣的，方式2解決了物件的方法不會被重複建立，但是原型繼承還是會造成引用型別的共用

//方式3 建構函式繼承
function ChildType3() {
SuperType.call(this);
}
var child31=new ChildType3();
child31.showColors();
child31.colors.push(“gary”)
var child32 = new ChildType3();
child32.showColors();
/**
* 輸出結果： [ ‘black’, ‘white’ ]
[ ‘black’, ‘white’ ]
引用型別的變數並沒有相互影響，其實就是相當於在子類的建構函式中，呼叫了父類的建構函式跑了一遍，這樣父類建構函式中
宣告的變數，子類也去聲明瞭一遍，程式碼就複用了一下。
但是，在建構函式中宣告方法屬性，每個new出來的物件還是會每次都建立一個方法，所以要想方法的複用就需要組合繼承
*/

//4、建構函式和原型組合繼承
// 在子類中呼叫父類建構函式，將非方法的成員變數在建構函式中宣告，將方法放在原型中宣告
function SuperType4(name) {
this.name = name;
this.colors=[“blue”,”green”];
}
SuperType4.prototype.showColors = function () {
console.log(this.name+”:”+this.colors);
}

function ChildType4(name) {
SuperType4.call(this,name);//建構函式繼承
}
ChildType4.prototype = new SuperType4();

var child41=new ChildType4(“Json”);
child41.colors.push(“gary”);
child41.showColors();
var child42 = new ChildType4(“Perter”);
child42.showColors();
/*
輸出結果：
Json:blue,green,gary
Perter:blue,green
看出物件的引用型別沒有相互影響,
所以組合繼承，實現了引用型別屬性獨立存在，並且方法實現共用。
*/