前言

這篇筆記主要是理解原型、原型鏈、call()、apply(），如何基礎的使用，也借鑒了其他博客，總結了以下知識，

一、原型是什么？

原型是function物件的一個屬性(prototype)，它定義了建構式制造出的物件的公共祖先，通過該建構式產生的物件，可以繼承該原型的屬性和方法，

普通函式沒有prototype,只有__proto__
函式物件中既有prototype也有__proto__

二、原型的特點

1、繼承原型的屬性和方法

代碼如下（示例）：這里的person里面并沒有LastName、say屬性和方法，但是通過person.LastName/say可以得到值，說明person繼承了原型上的屬性和方法

<script>
   Person.prototype.LastName="tang";
   Person.prototype.say=function (){
       console.log('hehe');
   }
   function Person(name,age,sex){
       this.name=name;
       this.age=age;
       this.sex=sex;
   }
   var person=new Person('na',18,'female');
</script>

2、提取共有屬性

代碼如下（示例）：這里不管是car還是car1都有height和CarName屬性，因為它們都繼承于同一個原型，根據這個特點可以實作共有屬性

<script>
    Car.prototype.height=1000;
    Car.prototype.CarName='BMW';
    function Car(color,owner){
        this.color=color;
        this.owner=owner;
    }
    var car=new Car('red','tn');
    var car2=new Car('pink','xz');
</script>

3、如何查看隱式屬性__proto__

每個物件都有一個隱藏的屬性–> __proto __,這個屬性參考的是創建該物件的函式的prototype,

<script>
//函式也是一種物件
    function Obj(){}
    var obj=new Obj()
    console.log(obj.__proto__);
</script>

console.log(Obj.prototype)

可以看出obj.__proto__和Obj.prototype里面的內容一樣的，是因為obj是被Obj函式創建出來的，所以Obj.prototype===obj.__proto __

則每個物件都有__proto __隱藏屬性，它都指向創建該物件的函式的prototype

4、如何查看物件的建構式constructor

  constructor是每個示例物件都擁有的屬性，b.constructor指向B
  所以下面的例子obj.constructor列印的是Obj()

<script>
    function Obj(){}
    var obj=new Obj()
    console.log(obj.constructor);
</script>

5、如何構造原型鏈

訪問物件的屬性是最開始是在本身里面查找，若是沒有再沿著__proto__ 向上面查找，把原型連成一個鏈，遵循就近法則，

就以下面的例子來說：
son.name 得到的結果是tn,本來son里面就沒有name這個屬性，但是沿著__ proto __的方向，最開始找到了father，但是Father上并沒有name屬性，再沿著father的__proto __ 找到了Grand,Grand原型上有name屬性，因此，son.name=tn

<script>
    Grand.prototype.name='tn'
    function Grand(){
 //   var this={__proto__:Grand.prototype}
    }
    var grand=new Grand();
    Father.prototype=grand;

    function Father(){
    //var this={__proto__:Father.prototype}
        this.sex='male'
    }
    var father=new Father();
    Son.prototype=father;
    function Son(){
   //var this={__proto__:Son.prototype}
   }
    var son=new Son();
</script>

三、call()和apply()

1、call()

用法：obj1.call(obj2,argument1,argument2),obj1就是this的指向，
      后面的是引數，通俗的來講，就是把obj1的方法放在obj2上使用，
      
作用：改變this的指向

<script>
  function Person(name,age){
    //因為person.call(obj)
    //因此  this指向obj
    this.name=name;
    this.age=age;
  }
  var person=new Person('tn',18);
  var obj={}
  //         指向誰 引數 引數
  Person.call(obj,'xz',20)
</script>

2、apply()

 用法：obj1.apply(obj2,[argument1,argument2])  引數串列必須是陣列
 作用：改變this指向

<script>
  function Person(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex
  }
  function Student(name,age,sex,tel,grade){
    Person.apply(this,[name,age,sex]);
    this.tel=tel;
    this.grade=grade;
  }
  var st=new Student('tn',22,'female',23333343,2019)
</script>

3、call()和apply()的相同點和區別

    相同點：都改變了this的指向
    不同點：傳遞引數串列不同
            obj1.apply(obj2,[argument1,argument2])
            obj1.call(obj2,argument1,argument2)

例題

1、關于原型的例題

<script>
    //    proto里面放的是原型  
    //   var this={ 
    //          __proto__:Perdon.Prototype 
    //        } 
        Person.prototype.name='sunny';
        function Person(){};
        var person=new Person;
    Person.prototype.name='cherry';
        console.log(person.name);//列印cherry
    
// 將Person.prototype.name='cherry';放在var person=new Person;的前面
        Person.prototype.name='sunny';
        function Person(){};
       Person.prototype.name='cherry';
        var person=new Person;
        console.log(person.name);//列印cherry
    
    
    Person.prototype.name='sunny';
    function Person(){
        // var this={__proto__:Person.prototype}
    };

    var person=new Person;
    Person.prototype={
        name:'cherry'
    }
    console.log(person.name);//列印sunny
    
//其實這里相當于：prototype.name=suuny
//			    __proto__=prototype.name
//				prtotype.name=cherry
//所以列印出suuny



    // 將 Person.prototype={
    //     name:'cherry'
    // }
    // 放在  var person=new Person;后面
    Person.prototype.name='sunny';
    function Person(){
        // var this={__proto__:Person.prototype}
    };

    var person=new Person;
    Person.prototype={
        name:'cherry'
    }
    console.log(person.name);//列印cherry
//其實這里相當于：prototype.name=suuny
//				 prtotype.name=cherry
//			    __proto__=prototype.name
// 所以列印出cherry

    
</script>

2、關于call()的例題

<script>
  function Wheel(wheelSize,styles){
    this.styles=styles;
    this.wheelSize=wheelSize;
  }
  function Sit(c,sitColor){
    this.c=c;
    this.sitColor=sitColor;
  }
  function Model(height,width,len){
    this.height=height;
    this.width=width;
    this.len=len;
  }
  function Car(wheelSize,styles,c,sitColor,height,width,len){
    Wheel.call(this,wheelSize,styles);
    Sit.call(this,c,sitColor);
    Model.call(this,height,width,len);

  }
  var car=new Car(100,'花里胡哨','真皮','red',1800,1900)
</script>