原型prototype

JS對象的比較

由於JS是解釋執行的語言，那麼代碼中出現函數與對象如果重覆執行，會創建多個副本

1. 創建一個Person構造函數，要求有name,age,gender,sayHello
2. 代碼如下：

    function Person(name,age,gender){
        this.name=name;
        this.age=age;
        this.gender=gender;
        this.sayHello=function(){};
    }
   

3. 這種構造函數會影響性能，容易造成多個對象有多個對象副本，應該將方法單獨抽取出來，讓所有的對象共用該方法. 代碼如下：

    function sayHello(){};
    function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
            this.sayHello=sayHello;
        }
   

4. 可以考慮將方法全部放到外面，但是有安全隱患
   • 在開發中會引入各種框架和庫，自定義的成員越多，出現命名衝突的幾率越大
   • 在開發中會有多個構造函數，，每一個構造函數有很多方法，就會變得不容易維護
5. 解決辦法是外面的函數不占用名字，而且在構造函數旗下就可以了
6. 每一個構造函數在定義的時候，都會有一個神秘對象被創建出來
7. 每一個由構造函數創建出來的實例對象都會預設的連接到該神秘對象上 代碼如下：

    function Person(name,age,gender){
                this.name=name;
                this.age=age;
                this.gender=gender;
            }
     Person.prototype.sayHello=function(){
            console.log( 'hello!' ) ;
     };
    var p1=new Person('張三',10,'male');
    p1.sayHello()
    var p2=new Person('張四',13,'male');
    p2.sayHello();

1. 該神秘對象就是prototype，由構造函數創建出來的眾多對象共用的一個對象
2. 只需要將共用的東西，重覆會多占用記憶體的東西放到構造函數.prototype中，那麼所有的對象都可以共用

原型相關的概念

1. 關於面向對象的概念

   • 類 class 在js中就是構造函數
     • 在傳統的面向對象語言中，使用一個叫類的東西定義模版，然後使用模版創建對象
     • 在構造方法中也具有類似的功能，因此稱其為類
   • 實例與對象
     • 實例一般是指某一個構造函數創建出來的對象，我們稱這個對象為這個構造函數的實例
     • 實例就是一個對象，對象是一個泛稱
   • 鍵值對與屬性和方法
     • 在js中鍵值對的集合稱為對象
     • 如果值為數據（非函數），就稱該鍵值對為對象的屬性 property
     • 如果值為函數，就稱為對象的方法 method
   • 父類與子類
     • 傳統的面向語言中使用類來繼承，就有父類，子類的概念
     • 父類又稱為基類, 子類又稱為派生類
     • 在 js 中常常稱為父對象, 子對象. 基對象, 派生對象

2. 原型相關的概念

   • 神秘對象針對構造函數稱為 "原型屬性"
     • 神秘對象就是構造函數的原型屬性
     • 簡稱原型
   • 神秘對象針對構造函數創建出來的對象稱為"原型對象"
     • 當訪問實例對象的屬性時或方法時，如果構造函數沒有，就到到對應的原型對象中去找
     • 簡稱原型
   • 對象繼承自其原型
     • 構造函數創建的對象 繼承自 構造函數的原型屬性
     • 構造函數創建的對象 繼承自 該對象的原型對象
     • 構造函數創建的對象與構造函數的原型屬性表示的是兩個不同的對象
       • 原型中的成員可以直接被實例對象所使用
       • 實例對象繼承自原型
       • 這樣的繼承就是 "原型繼承"

3. 如何使用原型

   • 使用對象的動態特性
     • 構造函數.prototype.XXX = vvvv;
   • 直接替換

        Student.prototype = {
             sayHello: function () {},
             study: function () {}
         };