原型與原型鏈

原型規(guī)則(是學(xué)習(xí)原型鏈的基礎(chǔ))

*構(gòu)造函數(shù)*
     function Foo(name,age){
        this.name=name;
        this.age=age;
        this.class="class-1";
        //return this;//默認(rèn)有這一行
     }
     var f=new Foo('zhangsan',20)
     var f1=new Foo('lisi',22)//創(chuàng)建多個對象
     //new對象時函數(shù)中的this初始化為空對象，參數(shù)賦值完后返回this給f和f1

  *構(gòu)造函數(shù)--擴(kuò)展*
     var a={}其實是var a=new Object()的語法糖
     var a=[]其實是var a=new Array()的語法糖
     function Foo(){...}其實是var Foo=new Function(...)
     //使用instanceof判斷一個函數(shù)是否是一個變量的構(gòu)造函數(shù)
     //對象，數(shù)組，函數(shù)的構(gòu)造函數(shù)其實是Object,Array,Function
     //判斷一個變量是否是'數(shù)組'  變量 instanceof Array

• 所有的引用類型(數(shù)組，對象，函數(shù))，都具有對像特性，即可自由擴(kuò)展屬性（除了null）
• 所有的引用類型（數(shù)組，函數(shù)，對象），都有一個 proto 屬性，屬性值是一個普通對象
• 所有的函數(shù)，都有一個 prototype 屬性，屬性值也是一個普通的對象
• 函數(shù)的 prototype 稱顯式原型，引用類型的 _proto 成為隱式原型
• 所有的引用類型（數(shù)組，函數(shù)，對象），其 proto 屬性值都指向其構(gòu)造函數(shù)的 prototype 屬性值
• 當(dāng)試圖獲取一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的prot_(即它的構(gòu)造函數(shù)的prototype)

原型鏈?zhǔn)疽鈭D

         var obj={};obj.a=100;
         var arr=[];arr.a=100;
         function fn(){}
         fn.a=100;

         console.log(obj.__proto__);
         console.log(arr.__proto__);
         console.log(fn.__proto__);
         console.log(fn.prototype)
         console.log(obj.__proto__===Object.prototype)

        function Foo(name,age){
            this.name=name;
        }             
        Foo.prototype.alertName=function(){
             alert(this.name)
        }
        var f=new Foo('zhangsan');
        f.printName=function(){
            console.log(this.name);
        }
        f.printName();
        f.alertName();

        //循環(huán)對象自身的屬性
        var item;
        for(item in f){
          //高級瀏覽器已經(jīng)在for in中屏蔽了來自原型的屬性
          //但是這里建議大家還是加上這個判斷，保證程序的健壯性
          if(f.hasOwnProperty(item))
              console.log(item);
        }

  *原型鏈*
     f.toString()//要去f.__proto__.__proto__中去找
  *instanseof*
     **注意:** //用于判斷引用類型屬于哪個構(gòu)造函數(shù)的方法
      f instanceof Foo的判斷邏輯是:
         f的__proto__一層一層向上找，能否對應(yīng)到Foo.prototype
      f instanceof Object也是正確的

練習(xí)題

    練習(xí)題1、如何準(zhǔn)確判斷一個變量時數(shù)組類型？
           var arr=[]
           arr instanceof Array //true
           typeof arr//object,typeof是無法判斷是否是數(shù)組的

    練習(xí)題2、寫一個原型鏈繼承的例子
       ①function Animal(){
          this.eat=function(){
             console.log('animal eat');
          }
       }
       function Dog(){
          this.bark=function(){
             console.log('dog bark')
          }
       }
       Dog.prototype=new Animal();
       var hashiqi=new Dog()

       ②function Elem(id){
           this.elem=document.getElementById(id);
       }
       Elem.prototype.html=function(val){
          var elem=this.elem;
          if(val){
              elem.innerHTML=val;
              return this;//鏈?zhǔn)讲僮?          }else{
             return elem.innerHTML;
          }
       }
      Elem.prototype.on=function(type,fn){
         var elem=this.elem;
         elem.addEventListener(type,fn);
         return this;
      }
      var elem=new Elem("div1");
      elem.html("<p>hello world</p>").on("click",function()
            {alert("clicked")}).html("<p>javascript</p>");

    練習(xí)題3、描述new一個對象的過程
       ①創(chuàng)建一個新對象
       ②this指向這個新對象
       ③執(zhí)行代碼，即對this賦值
       ④返回this