小編給大家分享一下JS中原型鏈和利用原型實現(xiàn)繼承的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

為門頭溝等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及門頭溝網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都網(wǎng)站制作、門頭溝網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

原型鏈

原型鏈是一種關(guān)系，實例對象和原型對象之間的關(guān)系，關(guān)系是通過原型(__proto__)來聯(lián)系的

實例對象中有__proto__,是對象,叫原型,不是標準的屬性,瀏覽器使用,并且有的游覽器不支持
構(gòu)造函數(shù)中有prototype屬性,也是對象,叫原型

注意 原型中的方法是可以互相訪問的

實例代碼

 function Animal(name,age){
    this.name=name;
    thia.age=age;
   }

   //在原型中添加方法
   Animal.prototype.eat=function(){
    console.log("動物吃草")
    this.play()
   }
   Animal.prototype.play=function(){
    console.log("玩啥呢")
   }

原型的簡單語法  

利用原型共享數(shù)據(jù)

第一種 寫法

 function Student(name,age,sex){
      this.name=name;
      this.age=age;
      this.sex=sex;
   }
  
   Student.prototype.height="188"
   Student.prototype.weight="55kg"
   Student.prototype.study=function(){
      console.log("好好學習i")
    }
  var stu=new Student("小紅",20,"男")
  console.dir(stu)

結(jié)果

第二種 寫法

 function Student(name,age,sex){
      this.name=name;
      this.age=age;
      this.sex=sex;
   }
  Student.prototype={
    height:"188",
    weight:"55kg",
    study:function(){
      console.log("好好學習i")
    }
   }
  var stu=new Student("小紅",20,"男")
  console.dir(stu)

結(jié)果

我們會發(fā)現(xiàn) 兩種寫法還是有差別的  ，第二種寫法會導(dǎo)致constructor構(gòu)造器屬性消失 所以我們得手動修改構(gòu)造器指向

最終代碼

function Student(name,age,sex){
      this.name=name;
      this.age=age;
      this.sex=sex;
   }
  Student.prototype={
    constructor:Student,
    height:"188",
    weight:"55kg",
    study:function(){
      console.log("好好學習i")
    }
   }
  var stu=new Student("小紅",20,"男")
  console.dir(stu)

好了,這回有了

實例對象使用屬性或方法的規(guī)則

實例對象使用的屬性或方法,現(xiàn)在實例中查找,如果有則使用自身的屬性或方法，
如果沒有，則通過__proto__指向的原型對象 查找方法，找到則使用,
如果找不到則繼續(xù)向__proto__尋找，直到未找到時報錯

構(gòu)造函數(shù)和實例對象和原型對象之間的關(guān)系

     構(gòu)造函數(shù)可以實例化對象
     構(gòu)造函數(shù)中有一個屬性叫prototype,是構(gòu)造函數(shù)的原型對象
     構(gòu)造函數(shù)的原型對象(prototype)中有一個constructor 構(gòu)造器，這個構(gòu)造器指向的就是自己所在的原型對象所在的構(gòu)造函數(shù)
     實例對象的原型對象(__proto__) 指向的是該構(gòu)造函數(shù)的原型對象(prototype)
     構(gòu)造函數(shù)的原型對象(prototype)中的方法是可以被實例對象直接訪問

改變原型是否可以改變?

首先我們得知道構(gòu)造函數(shù)和實例對象中的this 指向的是什么

這里我創(chuàng)建了自定義構(gòu)造函數(shù) Person ,并在內(nèi)部輸出了this

并且在Person 的原型對象上添加了一個eat 方法，也輸出了一個this，

接著我實例化了一個對象，并調(diào)用eat方法，

我們執(zhí)行一下，查看結(jié)果如何

輸出結(jié)果

由此得出

原型對象中方法中的this 就是實例對象

構(gòu)造函數(shù)中的this就是實例對象

接下來我們嘗試改變一下原型的指向

這段代碼中，首先我定義了一個Person自定義構(gòu)造函數(shù)，并且在原型上添加了一個eat方法

定義了一個Student 函數(shù)，在原型上定義了一個sayHi方法，

然后我將 Student的原型指向 了一個 Person的實例對象

接著實例化一個Student，接著分別在stu 實例上 嘗試著調(diào)用 eat方法 和 sayHi 方法，

運行結(jié)果

到此我們可以確定，stu實例對象的原型指向被下面這條代碼改變了

Student.prototype=new Person(10);

總結(jié)

原型指向可以被改變的

實例對象的原型__proto__指向的是該對象所在的構(gòu)造函數(shù)的原型對象

構(gòu)造函數(shù)的原型對象(prototype)指向如果改變了，實例對象的原型(__proto__)指向也會發(fā)生改變

實例對象和原型對象之間的關(guān)系是通過__proto__ 原型來聯(lián)系起來的，這個關(guān)系就是原型鏈

如果原型指向改變了，那么就應(yīng)該再原型改變指向之后添加原型方法

那么sayHi方法則會創(chuàng)建在 new Person(10) 這個實例對象上

原型最終指向了哪里

實例對象中的__proto__指向的是構(gòu)造函數(shù)的prototype

以此代碼為例

測試一下

所以

per實例對象的__proto__ ---指向--->  Person.prototype的__proto__  ---指向--->  Object.prototype的__proto__ 是Null

查看了一下html的dom對象，這有很有意思的原型鏈

這里祭出祖?zhèn)鱆PG

實現(xiàn)繼承

小知識---->instanceof的判斷方法:

從左邊操作數(shù)的__proto__路線出發(fā)，從右邊操作數(shù)的prototype出發(fā)，如果兩條路線最終指向一個引用就是true了

1.利用 call 借用構(gòu)造函數(shù)繼承

優(yōu)點:實現(xiàn)了繼承屬性，但值都不相同

缺點: 無法繼承父級類別中原型上的方法

function Person(name,age,sex,weight){
  this.name=name;
  this.age=age;
  this.sex=sex;
  this.weight=weight;
}
Person.prototype.sayHi=function(){
  console.log("您好")
}

function Student(name,age,sex,weight,score){
  //將當前實例對象傳入Person 借過來使用一次來達到繼承效果
  Person.call(this,name,age,sex,weight);
  this.score=score;
}

var stu1=new Student("小明",10,"男","10kg","100")

2.  prototype 實現(xiàn)繼承

利用prototype，將Student 的prototype 指向 Person 來達到繼承效果,

優(yōu)點：繼承了父級原型上的方法

缺點:   實例化多個Student 都必須共用相同的name 和 age

Student.prototype.constructor=Student

注意:   使用原型繼承時，需要將構(gòu)造器的指向更改回正確的指向

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

   Person.prototype.eat=function(){
    console.log("Person 吃飯")
   }

   function Student(num,score){
    this.num=num
    this.score=score
   }
   //繼承
  Student.prototype=new Person("小紅",10)
  Student.prototype.constructor=Student

  var stu =new Student(2016002288,80)

  stu.eat()//Person 吃飯

3.組合繼承

組合繼承其實就是結(jié)合了上述的兩種方法來實現(xiàn)繼承，擁有兩種方法的優(yōu)點

function Person(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex;
   }
   Person.prototype.sayHi=function(){
    console.log("你好")
   }

   function Student(name,age,sex,score){
    //借用構(gòu)造函數(shù)
    Person.call(this,name,age,sex)
    this.score=score
   }

   // 改變了原型指向
   Student.prototype=new Person();//不傳值
   Student.prototype.eat=function(){
    console.log("吃東西");
   }

   var stu=new Student("小黑",20,"男","100分")
   console.log(stu.name,stu.age,stu.sex,stu.score);
   stu.sayHi()//你好
   stu.eat()//吃東西

4.拷貝繼承

類似于復(fù)制，把一個對象中的屬性和方法直接復(fù)制到另一個對象中

function Person(){
  }

  Person.prototype.name="小紅"
  Person.prototype.age=18

  function Student(){
  }
  
  var p=Person.prototype;
  var s=Student.prototype;

  for(key in p){
    s[key]=p[key]
  }

  console.dir(Student)

console

每次都要for in 好累 ,  可以進行優(yōu)化封裝一下

function extend(Child,Parent) {

　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;

　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
    
    //這個屬性直接指向父對象的prototype屬性,可以直接調(diào)用父對象的方法,為了實現(xiàn)繼承的完備性，純屬備用性質(zhì)
　　　　c.par = p;

　　}

5. 直接繼承prototype

優(yōu)點 : 效率比較高

缺點 : 因為相當于是個傳址過程 所以修改Student的屬性 Person 的也會被更改

  function Person(){};

  Person.prototype.name="小紅";
  Person.prototype.age=18;

  function Student(){};

  Student.prototype=Person.prototype;

  console.dir(Student);
  console.dir(Person);
  Student.prototype.age=25;

console

6.利用空對象作中介實現(xiàn)繼承

用這種方式修改 Student 的prototype 不會影響到 Person的prototype

function Person(){};
  Person.prototype.name="小紅";
  Person.prototype.age=11;

  function Student(){};
  var F=function(){};
  F.prototype=Person.prototype;

  Student.prototype=new F();
  Student.prototype.constructor=Student;

  Student.prototype.age=25;

  console.dir(Person)
  console.dir(Student)

console

封裝一下

function extend(Child,Parent) {

　　　　var F = function(){};

　　　　F.prototype = Parent.prototype;

　　　　Child.prototype = new F();

　　　　Child.prototype.constructor = Child;

　　　　Child.par = Parent.prototype;

　　}

看完了這篇文章，相信你對“JS中原型鏈和利用原型實現(xiàn)繼承的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁題目：JS中原型鏈和利用原型實現(xiàn)繼承的示例分析-創(chuàng)新互聯(lián)
文章地址：http://aaarwkj.com/article30/ppiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、虛擬主機、外貿(mào)建站、標簽優(yōu)化、Google、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)