Czy powinienem użyć prototypu, czy nie?

Question

Tworzę klasę Vector, która może zasadniczo zawierać trzy wartości liczbowe. Jednak na takich wektorach można wykonać wiele operacji - np. uzyskiwanie wielkości, dodawanie lub odejmowanie innego wektora itd.

Zastanawiałem się, czy te funkcje powinny być kodowane jako prototypowe funkcje klasy Vector, czy też powinienem je zdefiniować w konstruktorze.

Która z tych dwóch metod jest lepsza?

function Vector3D(x, y, z) { 
    this.x = x; 
    this.y = y 
    this.z = z; 
} 

Vector3D.prototype.magnitude = function() { 
    return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); 
}; 

lub

function Vector3D(x, y, z) { 
    this.x = x; 
    this.y = y; 
    this.z = z; 

    this.magnitude = function() { 
     return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); 
    }; 
} 

Answer 1

Taka jest właśnie sytuacja korzystania z prototypu. Widzę dwa główne korzyści takiego postępowania:

1. funkcje nie są tworzone wielokrotnie. Jeśli zdefiniujesz funkcje wewnątrz konstruktora, dla każdej zdefiniowanej funkcji zostanie utworzona nowa anonimowa funkcja, za każdym razem, gdy konstruktor będzie nazywać się. Prototypy są statycznymi obiektami, a każde wystąpienie Vector3D będzie po prostu odniesienia funkcji prototypu.
2. Prototyp to pojedynczy obiekt, który można łatwo zmanipulować. Zapewnia to dużą elastyczność; niestety mogę tylko podać kilka przykładów tego, co to może zaoferować:
   1. Jeśli chcesz stworzyć klasę dla dzieci, na przykład Vector3DSpecial, możesz po prostu sklonować Vector3D.prototype i przypisać to do Vector3DSpecial.prototype. Chociaż można to również zrobić przy użyciu konstruktorów przez Vector3DSpecial.prototype = new Vector3D();, konstruktorzy mogą zawierać efekty uboczne, które zostaną wykonane w tym prostym przypisaniu prototypu, a zatem należy ich unikać. Dzięki prototypom możesz nawet wybrać tylko określone funkcje w prototypie, które zostaną skopiowane do nowej klasy.
   2. Dodawanie metod do Vector3D jest po prostu kwestią dodawania właściwości do prototypu i pozwala na łatwiejsze dzielenie/organizowanie kodu na wiele plików lub na dynamiczne dodawanie metod w innych częściach kodu. Oczywiście, możesz zrobić kombinację dodawania metod w konstruktorze i poprzez prototyp, ale jest to niespójne i prawdopodobnie doprowadzi do większej złożoności w dalszej części ścieżki.

kiedy ja nie używanie prototyp? W przypadku obiektów singleton, na przykład kontrolera, który współdziała ze stroną i może delegować pracę na inne obiekty. Globalny obiekt "powiadomienie" jest jednym z takich przykładów. W tym przypadku rozszerzenie jest mało prawdopodobne, a obiekt jest tworzony tylko raz, co sprawia, że ​​prototyp ma dodatkową (koncepcyjną) złożoność.

Answer 2

prototyp metody będzie działać tylko do własności publicznej, jeśli chcesz śledzić x, y, z, jak „prywatnych” zmiennych prototyp nie będzie działać.

Używałbym tego ostatniego, ponieważ możesz chcieć metod, które działają tylko ze zmiennymi prywatnymi/wewnętrznymi, ale wszystko zależy od kontekstu.

function Vector3D(x, y, z) { 
    // x, y, z is automatically in this scope now, but as private members. 
    this.magnitude = function() { 
     return Math.sqrt(x * x + y * y + z *z); 
    } 
} 

Answer 3

ECMA 6 http://es6-features.org/#BaseClassAccess

class Shape { 
    … 
    toString() { 
     return `Shape(${this.id})` 
    } 
} 
class Rectangle extends Shape { 
    constructor (id, x, y, width, height) { 
     super(id, x, y) 
     … 
    } 
    toString() { 
     return "Rectangle > " + super.toString() 
    } 
} 
class Circle extends Shape { 
    constructor (id, x, y, radius) { 
     super(id, x, y) 
     … 
    } 
    toString() { 
     return "Circle > " + super.toString() 
    } 
} 

ECMA 5

var Shape = function (id, x, y) { 
    … 
}; 
Shape.prototype.toString = function (x, y) { 
    return "Shape(" + this.id + ")" 
}; 
var Rectangle = function (id, x, y, width, height) { 
    Shape.call(this, id, x, y); 
    … 
}; 
Rectangle.prototype.toString = function() { 
    return "Rectangle > " + Shape.prototype.toString.call(this); 
}; 
var Circle = function (id, x, y, radius) { 
    Shape.call(this, id, x, y); 
    … 
}; 
Circle.prototype.toString = function() { 
    return "Circle > " + Shape.prototype.toString.call(this); 
};