JavaScript：使用子類中的父方法？

Question

我正在嘗試使用子類中父類的方法。 在其他語言中，您只需要使用extends並且可以在子項中使用父項中的所有方法，但在JavaScript中，它似乎是不同的。

function Svg() {
    this.align = function(value) {
        if(value === 'left') return 0;
    }
}

function Graph() {
    // I want to align text to the left
    console.log('<text x="' + align('left') + '"></text>');
}

graph = new Graph();
Graph.prototype = new Svg();
Graph.prototype.align.call();

http://jsfiddle.net/cBMQg/9/

Answer 1

我確實理解下面的代碼不一定像其他OOP語言那樣“擴展”。 但它確實需要另一個函數/類作為屬性 - 您可以直接調用它的方法。 此外，我還沒有使用JavaScript原型來進行此演示。

<script>
    function Svg() {
        this.align = function( align ) {
            if( align == 'left') 
                return 'left';
            else
                return 0;
        }
    }

    function Graph() {

        this.Svg = new Svg();
        // I want to align text to the left
        this.AlignLeft = function( direction ) {
            console.log('<text x="' + this.Svg.align( direction ) + '"></text>');
        }
    }

    graph = new Graph();
    graph.AlignLeft('left');  //console.log <text x="left"></text> 
</script>

小提琴 ： http ： //jsfiddle.net/cBMQg/11/

Answer 2

function Svg() {
    this.align = function(value) {
        if(value === 'left') return 0;
    }
}

function Graph() {
     Svg.call(this); // Call the Super Class Constructor with changed THIS
    // I want to align text to the left
    console.log('<text x="' + align('left') + '"></text>');
}



graph = new Graph();
Graph.prototype = new Svg();
graph.align('left');

Answer 3

答案可能有效，但為什么沒有原型使用？ 對齊函數是否會在每個實例上執行不同的邏輯？

正如Bergi指出的那樣; JavaScript使用原型繼承，最好在原型上定義不在實例之間更改的成員：

簡單解釋; prototype可用於聲明不會為實例更改的成員/屬性。 如果我聲明一個名為Person的對象，而person有2個成員：name和greet。 Greet將輸出“Hello，我是[this.name]”，因此greet不會在實例之間發生變化。

當我在Person原型上聲明greet方法然后創建數千個Person實例（ben，jack，mary ....）時，它們將只共享一個greet函數。 這節省了對象初始化的內存和CPU時間。 有關詳細信息，請查看此鏈接： https ： //stackoverflow.com/a/16063711/1641941

通過下面的鏈接可以幫助你了解this是指在JavaScript中。 https://stackoverflow.com/a/19068438/1641941

function Svg() {
  this.someInstanceValue=22;
}
Svg.prototype.align = function(value) {
  if(value === 'left') return 0;
}
function Graph() {
    // get Svg's instance properties
    Svg.apply(this,arguments);
    console.log('<text x="' + this.align('left') + '"></text>');
}
//inherit from Svg:
Graph.prototype=Object.create(Svg.prototype);
Graph.prototype.constructor=Graph;

graph = new Graph();

graph.align('left');

如果您不想從Svg繼承而是將其混合在一起，那么您仍然可以使用原型來混合它的函數（並調用Svg.apply來獲取所需的實例成員）：

function mixin(source, target){
  for(thing in source){
    if(source.hasOwnProperty(thing)){
      target[thing]=source[thing];
    }
  }
};
function Svg() {
  this.someInstanceValue=22;
}
Svg.prototype.align = function(value) {
  if(value === 'left') return 0;
}
function Graph() {
    // get Svg's instance properties
    Svg.apply(this,arguments);
    console.log('<text x="' + this.align('left') + '"></text>');
}
//mix in Svg:
mixin(Svg.prototype, Graph.prototype)

graph = new Graph();

graph.align('left');