JS篇 - js的繼承

kun_jian 發布于2019-08-26 13:48 / 1723人閱讀

摘要：定義漢語解釋泛指把前人的作風文化知識等接受過來計算機術語解釋繼承可以使得子類具有父類的屬性和方法或者重新定義追加屬性和方法等先來個父類祭天原型鏈繼承該實例對象有一個為，原型上有一個是先找當前屬性，再找原型父子之間存在關系，但子類并不會創建新

定義

漢語解釋：泛指把前人的作風、文化、知識等接受過來
計算機術語解釋：繼承可以使得子類具有父類的屬性和方法或者重新定義、追加屬性和方法等

先來個父類祭天

  function Animal(name) {
    this.name = name || "animal";
    this.speak = function () {
      console.log("speak");
    }
  }
  Animal.prototype.move = function () {
    console.log("move");
  }

原型鏈繼承

  function Cat() {
    this.getName = function () {
      console.log(this.name);
    };
  }

  Cat.prototype = new Animal("cat1");
  var cat = new Cat();
  cat.name = "cat2";
  console.log(cat);//該實例對象有一個name為cat2，原型上有一個name是cat1
  cat.getName();//cat2（先找當前屬性，再找原型）
  console.log(cat instanceof Cat);//true
  console.log(cat instanceof Animal);//true

父子之間存在關系，但子類并不會創建新的屬性，set子類屬性并不會覆蓋原型上的屬性，get屬性只不過是根據先讀取當前屬性再讀取原型的優先級

構造函數繼承

  function Dog(name) {
    Animal.call(this);
    this.name = name || "doggy";
  }

  var dog = new Dog();
  console.log(dog);//只有子類屬性
  console.log(dog instanceof Dog); // true
  console.log(dog instanceof Animal); // false

實際上只是利用父類構造函數來添加子類屬性，父子之間沒有什么關系

ES6繼承（完美繼承）

  class Animal2 {
    constructor(name) {
      this.name = name || "animal2";
      this.speak = function () {
        console.log("speak");
      }
    }
  }

  Animal2.prototype.move = function () {
    console.log("move");
  }
  var animal2 = new Animal2("god2");
  console.log(animal2);

  class Bird extends Animal2 {
    getName() {
      console.log(this.name);
    }
  }

  var bird = new Bird("bird");
  console.log(bird);//既有父類的屬性，原型鏈也指向父類
  bird.getName();
  console.log(bird instanceof Bird); // true
  console.log(bird instanceof Animal2); // true

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109558.html

體驗js之美第八課-面向對象創建和繼承終結篇

摘要：概述到這里我們講說面向對象的系列部分的最后一個課程，面向對象必須掌握兩個東西一個是對象的創建一個是繼承。只需要記住一句話，屬性放在構造函數里面，方法放在原型上。概述到這里我們講說js面向對象的系列部分的最后一個課程，面向對象必須掌握兩個東西一個是對象的創建一個是繼承。這節課我們重點說說這兩個問題最后我們說下在ES6里面面向對象怎么玩。 1對象的創建我們第一節課已經就會用了，單體模...

jzzlee 2019-08-20 16:09 評論0 收藏0
javascript基礎篇：關于js面向對象的理解

摘要：關于中面向對象的理解面向對象編程它是一種編程思想我們的編程或者學習其實是按照類實例來完成的學習類的繼承封裝多態封裝把實現一個功能的代碼封裝到一個函數中一個類中以后再想實現這個功能，只需要執行這個函數方法即可，不需要再重復的編寫代碼。關于js中面向對象的理解面向對象編程(oop) 它是一種編程思想 (object-oriented programming ), 我們的編程或者學習其...

roadtogeek 2019-08-23 15:41 評論0 收藏0
javascript基礎篇：關于js面向對象的理解

摘要：關于中面向對象的理解面向對象編程它是一種編程思想我們的編程或者學習其實是按照類實例來完成的學習類的繼承封裝多態封裝把實現一個功能的代碼封裝到一個函數中一個類中以后再想實現這個功能，只需要執行這個函數方法即可，不需要再重復的編寫代碼。關于js中面向對象的理解面向對象編程(oop) 它是一種編程思想 (object-oriented programming ), 我們的編程或者學習其...

newtrek 2019-08-02 14:25 評論0 收藏0