learning javascript - 繼承

inapt 發布于2019-08-22 14:57 / 1933人閱讀

摘要：讓子的原型鏈指向父的實例父實例化的對象讓父的屬性創建在子的上把的方法應用到這個對象身上傳遞一個數組或，而就要一個個地傳過案例中的繼承在中實現繼承等價于

繼承 call實現繼承

用于實現函數繼承，call的第二個參數可以是任意類型

function Animal(){
    this.name = "";
    this.say = function(){
        console.log("hello");
    }
}

function dog(){
    this.name = "xiao";
    //把Animal的方法應用到dog這個對象身上
    Animal.call(this);
}

console.log(new dog()); // dog { name: "", say: [Function] }

apply實現繼承

用于實現函數繼承，apply的第二個參數必須是數組，也可以是arguments

function Animal(){
    this.name = "";
    this.say = function(){
        console.log("hello");
    }
}

function dog(){
    this.name = "xiao";
    //把Animal的方法應用到dog這個對象身上
    Animal.apply(this,arguments);
}

console.log(new dog()); // dog { name: "", say: [Function] }

繼承的優化

如果構造函數this綁定太多屬性,在實例化后會造成浪費，為此我們一般會使用原型鏈來優化，但是使用原型鏈之后我們的apply和call的繼承方法就會失效，因此我們一般使用混合的寫法。

讓子的原型鏈指向父的實例（父實例化的對象）
dog.prototype = new Animal();

讓父的屬性創建在子的this上
Animal.call(this)

function Animal(name){
    this.name = name;
    this.say = function(){
        console.log("hello");
    }
}
Animal.prototype.action = function() {
     console.log("running");
}
function dog(name,type){
    this.name = name;
    //把Animal的方法應用到dog這個對象身上
    Animal.call(this,type);
}

dog.prototype = new Animal();

console.log(new dog("xiao", "gold")); // Animal { name: "gold", say: [Function] }
(new dog("xiao")).action() //running

apply 傳遞一個數組或arguments，而call就要一個個地傳過

案例

es5中的繼承

function Reactangle(length,width) {
  this.length = length;
  this.width = width;
}

Reactangle.prototype.getArea = function(){
  return this.length * this.width;
}

function Square(length) {
  Reactangle.call(this.length,length);
}

Square.prototype = Object.create(Reactangle.prototype,{
  constructor: {
    value:Square,
    enumerable:true,
    writeable:true,
    configurable:true
  }
});

var square = new Square(3);

console.log(square.getArea());
console.log(square instanceof Square);
console.log(square instanceof Reactangle);

在es6中實現繼承

class Reactangle {
   constructor(length,width) {
     this.length = length;
     this.width = width;
   }
   
   getArea() {
      return this.length * this.width;
   }
}

class Square extends Reactangle {
  constructor(length) {
    // 等價于 Reactangle.call(this.length,length)
    super(length,length);
  }
}

var square = new Square(3);

console.log(square.getArea()); // 9
console.log(square instanceof Square); // true

云服務器 GPU云服務器 javascript繼承 javascript繼承方法 Javascript實現繼承 javascript類的繼承

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

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

[譯] 在你學習 React 之前必備的 JavaScript 基礎

摘要：前言在理想的狀態下，你可以在深入了解之前了解和開發的所有知識。繼承另一個類的類，通常稱為類或類，而正在擴展的類稱為類或類。這種類型的組件稱為無狀態功能組件。在你有足夠的信心構建用戶界面之后，最好學習。原文地址：JavaScript Basics Before You Learn React 原文作者： Nathan Sebhastian 寫在前面為了不浪費大家的寶貴時間，在開...

Chaz 2019-08-23 17:54 評論0 收藏0
[譯] 如何恰當地學習 JavaScript

摘要：原文鏈接恰當地學習適合第一次編程和非的程序員持續時間到周前提無需編程經驗繼續下面的課程。如果你沒有足夠的時間在周內完成全部的章節，學習時間盡力不要超過周。你還不是一個絕地武士，必須持續使用你最新學到的知識和技能，盡可能地經常持續學習和提高。原文鏈接：How to Learn JavaScript Properly 恰當地學習 JavaScript （適合第一次編程和非 JavaSc...

Jason 2019-08-21 12:06 評論0 收藏0
learning javascript - 數組

摘要：過濾掉等于的數組元素返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值數組元素平方用于檢測數組中的元素是否滿足指定條件如果有一個元素滿足條件，則表達式返回剩余的元素不會再執行檢測如果沒有滿足條件的元素，則返回。數組常用方法創建數組 var fruits = [Apple, Banana]; console.log(fruits.length); 通過索引訪問數組元素 v...

zzir 2019-08-22 14:54 評論0 收藏0
python基礎教程：類的繼承

摘要：類的繼承，說明了不同類直接的關系，派生類復用了基類的代碼同時也繼承了基類的屬性和方法。派生類的實例化會創建該類的一個新實例。派生類既可以單獨繼承一個基類，也可以多重繼承多個基類。面向對象語言的一個特性就是類的繼承。繼承的關系跟人類繁衍的關系相似，被繼承的類稱為基類（也叫做父類），繼承而得的類叫派生類（也叫子類），這種關系就像人類的父子關系。 showImg(https://segme...

XFLY 2019-07-31 10:27 評論0 收藏0