原型、原型鏈的學(xué)習(xí)總結(jié)

一麸俘、 寫在前面

學(xué)習(xí)JavaScript有一段時(shí)間了辩稽，從基礎(chǔ)開始，第一次寫學(xué)習(xí)總結(jié)从媚，一定堅(jiān)持寫完逞泄，相信自己能夠?qū)㈥P(guān)于原型、原型鏈的學(xué)習(xí)總結(jié)寫好拜效。

二喷众、原型、原型鏈的概念

• 原型：原型分為顯示原型屬性和隱式原型屬性
  ① 顯示原型屬性(prototype)： 函數(shù)定義時(shí)自動(dòng)添加的空Object對(duì)象紧憾，通過prototype可以向原型中添加方法到千；
  ②隱式原型屬性（__ proto __ ）：實(shí)例對(duì)象創(chuàng)建時(shí)自動(dòng)添加，值為構(gòu)造函數(shù)的prototype值赴穗，ES6之前通過__ proto __只能查看原型中的方法憔四。
• 原型、原型鏈的作用：
  ①同一個(gè)構(gòu)造函數(shù)創(chuàng)建的實(shí)例對(duì)象共享方法望抽；
  ②原型鏈?zhǔn)莏s實(shí)現(xiàn)繼承的主要方法加矛。

function Person(name){  //創(chuàng)建Person構(gòu)造函數(shù)
                this.name=name;
            }
            Person.prototype.sayName=function(){
                console.log(this.name);
            };
            var p=new Person("Tom");//創(chuàng)建Person的實(shí)例對(duì)象
            //實(shí)例對(duì)象的隱式原型屬性等于構(gòu)造函數(shù)的顯示原型屬性
            console.log(Person.prototype===p.__proto__);    //true       

• 原型鏈：構(gòu)造函數(shù) → prototype屬性 → 原型對(duì)象 ← __ proto __ 屬性 ← 實(shí)例對(duì)象形成一個(gè)原型鏈 履婉，通過構(gòu)造函數(shù)中的prototype屬性向原型中添加方法煤篙，通過實(shí)例中的 __ proto __ 屬性查看原型中的方法。

三毁腿、用案例理解原型辑奈、原型鏈

• 案例一

function Person(name,age){//創(chuàng)建Person構(gòu)造函數(shù)，并添加name和age兩個(gè)屬性
                this.name=name;
                this.age=age;
            }
            Person.prototype.sayName=function(){//通過prototype向Person的原型中添加sayName方法
                console.log(this.name);
            };
            Person.prototype.sayAge=function(){//通過prototype向Person的原型中添加sayAge方法
                console.log(this.age);
            };
            var p=new Person("Tom",20);//創(chuàng)建Person的實(shí)例對(duì)象
            var p0=new Person("Jone",18);
            p.sayName();//通過實(shí)例對(duì)象p分別調(diào)用sayName和sayAge方法
            p.sayAge();
            p0.sayName();
            p0.sayAge();

畫圖分析代碼

案例一

• 案例二

 function Person(name){
                this.name=name;
            };
            var p1=new Person("Tom");
            Person.prototype={//修改Person原型的指向
                sayName:function(){
                    console.log(this.name);
                }
            };
            var p2=new Person("Jone");
            p2.sayName();//Jone
            p1.sayName();//Uncaught TypeError: p1.sayName is not a function

畫圖分析代碼

案例二

• 案例三

function Father(name,age){//創(chuàng)建Father函數(shù)溶浴，添加name乍迄、age屬性
                this.name=name;
                this.age=age;
            }
            Father.prototype.sayHello=function(){//向Father函數(shù)的原型中添加sayHello方法
                console.log("Hello");
            };
            function Son(name,age){//創(chuàng)建Son函數(shù)
                Father.call(this,name,age);//利用call方法做假繼承
            }
            Son.prototype=new Father();//將Son的prototype值設(shè)為Father對(duì)象的一個(gè)實(shí)例，實(shí)現(xiàn)繼承
            Son.prototype.constructor=Son;//修正Son的構(gòu)造函數(shù)指向Son
            var s=new Son("Tom",20);//創(chuàng)建Son的實(shí)例對(duì)象
            s.sayHello();//Hello   實(shí)例s可以調(diào)用sayHello方法士败，說明Son繼承了Father中的屬性
            console.log(s);

①這是利用原型實(shí)現(xiàn)對(duì)象繼承的案例闯两；
②代碼第10行利用call方法在Son的作用域內(nèi)執(zhí)行Father中的代碼，這里是一個(gè)假繼承谅将，同時(shí)簡化了代碼漾狼；
③代碼第12行將Father的一個(gè)實(shí)例對(duì)象賦值給Son的原型，這一步真正的實(shí)現(xiàn)了對(duì)象的繼承饥臂；
④代碼第13行修正了Son構(gòu)造函數(shù)的constructor的指向?yàn)镾on逊躁；
⑤代碼第15行通過實(shí)例s調(diào)用sayHello方法正常執(zhí)行，驗(yàn)證了繼承關(guān)系的存在隅熙。

• 案例四
  先上圖祭祖

  
  
  原型鏈

function Foo(){}
            var f1=new Foo();
            var o1=new Object();
            console.log(f1.__proto__===Foo.prototype);//true
            console.log(Foo.prototype.__proto__===Object.prototype);//true
            console.log(Foo.__proto__==Function.prototype);//true
            console.log(Object.__proto__===Function.prototype);//true
            console.log(Function.__proto__===Function.prototype);//true
            console.log(Function.prototype.__proto__===Object.prototype);//true
            console.log(o1.__proto__===Object.prototype);//true
            console.log(Object.prototype.__proto__===null);//true
            console.log(Function.__proto__===Function.prototype);//true

①代碼第8行Function. __ proto __ =Function.prototype稽煤，由此可知Function是構(gòu)造函數(shù)也是實(shí)例；
②代碼第11行Object.prototype.__ proto __=null囚戚，由此可知Object顯示原型的隱式原型為空酵熙；
③牢記這張祭祖的圖。

四驰坊、總結(jié)

①原型讓同一個(gè)構(gòu)造函數(shù)創(chuàng)建的實(shí)例共享方法匾二；
②通過構(gòu)造函數(shù)中prototype屬性向原型中添加方法；
③通過實(shí)例的 __ proto __ 屬性查看原型中的方法；
④實(shí)例對(duì)象的隱式原型值等于構(gòu)造函數(shù)的顯示原型值察藐；
⑤盡量避免修改prototype屬性的指向借嗽，這樣可能會(huì)產(chǎn)生錯(cuò)誤；
⑥原型是實(shí)現(xiàn)對(duì)象繼承的主要方法转培，詳看案例三恶导，特別注意需要修正被繼承對(duì)象的constructor的指向；
⑦Function既是構(gòu)造函數(shù)浸须，也是實(shí)例惨寿。