腳本之家服務器常用軟件

快捷導航

JS學習筆記之原型鏈和利用原型實現(xiàn)繼承詳解

更新時間：2019年05月29日 09:59:54 作者：倪曉磊

這篇文章主要介紹了JS學習筆記之原型鏈和利用原型實現(xiàn)繼承,結合實例形式詳細分析了javascript原型鏈以及利用原型實現(xiàn)繼承的相關操作技巧與注意事項,需要的朋友可以參考下

本文實例講述了JS學習筆記之原型鏈和利用原型實現(xiàn)繼承。分享給大家供大家參考，具體如下：

原型鏈

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

實例對象中有__proto__,是對象,叫原型,不是標準的屬性,瀏覽器使用,并且有的游覽器不支持
構造函數(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)

結果

第二種寫法

 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)

結果

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

最終代碼

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__尋找，直到未找到時報錯

構造函數(shù)和實例對象和原型對象之間的關系

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

改變原型是否可以改變?

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

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

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

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

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

輸出結果

由此得出

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

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

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

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

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

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

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

運行結果

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

Student.prototype=new Person(10);

總結

原型指向可以被改變的

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

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

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

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

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

原型最終指向了哪里

實例對象中的__proto__指向的是構造函數(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 借用構造函數(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

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

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.組合繼承

組合繼承其實就是結合了上述的兩種方法來實現(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){
    //借用構造函數(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.拷貝繼承

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

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;

　　}

更多關于JavaScript相關內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: