Зачем ставить метод на прототипе объекта?

Question

Каковы преимущества размещения материала на прототипе объекта? Например, эти две реализации ChessPiece кажутся очень похожими. Каковы компромиссы?

Без прототипа

var ChessPiece = function(x, y) { 
    var self = this; 
    this.x = x; 
    this.y = y; 
    this.getNotation = function() { 
    return 'abcdefgh'[self.x] + '12345678'[self.y]; 
    };  
} 

var pawn1 = new ChessPiece(1, 0); 
pawn1.getNotation(); // 'b1'; 

С прототипом

var ChessPiece = function(x, y) { 
    this.x = x; 
    this.y = y; 
} 

ChessPiece.prototype.getNotation = function() { 
    return 'abcdefgh'[this.x] + '12345678'[this.y]; 
} 

var pawn2 = new ChessPiece(1, 1); 
pawn2.getNotation(); // 'b2' 

Для меня наиболее существенная разница в том, что, когда getNotation на прототипе ChessPiece «s, этот метод разделяет все экземпляров. Когда это не на прототипе, есть несколько копий getNotation. Это имеет значение? Я больше не хватает?

В качестве аргумента в пользу причины, по которой я предпочитаю первый метод, является то, что писать все в одной функции конструктора проще, чем объявлять ChessPiece, а затем назначать каждый метод на отдельные строки. Есть ли способ обойти эту проблему, если последняя предпочтительнее?

Answer 1

Ваш без прототипа по-своему похож на то, что Дуглас Крокфорд рекомендует в «JavaScript: Хорошие детали» с важным исключением. Его версия вашего примера может выглядеть примерно так:

var chessPiece = function(x, y) { 
    var obj = {}; 
    obj.x = x; 
    obj.y = y; 
    obj.getNotation = function() { 
    return 'abcdefgh'[obj.x] + '12345678'[obj.y]; 
    }; 
    return obj;  
} 

var pawn1 = chessPiece(1, 0); 
pawn1.getNotation(); // 'b1'; 
pawn1.x; // 1 

Крокфорд избегает «нового» оператора из-за опасности со значением «это». Кроме того, он позволяет инкапсулировать значения, которые, как правило, сложнее в JS. Например, если х и у на самом деле означает быть более частным, вы можете сделать это:

var chessPiece = function(x, y) { 
    var obj = {}; 
    var xCoord = x; 
    var yCoord = y; 
    obj.getNotation = function() { 
    return 'abcdefgh'[xCoord] + '12345678'[yCoord]; 
    }; 
    obj.moveX = function (amount) { 
    x += amount; 
    } 
    return obj;  
} 

var pawn1 = chessPiece(1, 0); 
pawn1.getNotation(); // 'b1'; 
pawn1.move(2); 
pawn1.getNotation(); // 'd1'; 
pawn1.x; // undefined 

С xCoord и yCoord оказались в ловушке в области замыкания, getNotation и MOVEX как работа с xCoord и yCoord действуют как частные переменные , У Crockford есть другие советы и применения для этой техники.