Как реализовать цепочку функций?

Question

[EarthFM]

Надо решить тестовой задание, не подскажите как сделать?

Представьте, что у нас есть квадратное поле-сетка, по которому ходит бродяга.
Напишите объект «Бродяга», содержащий его координаты и четыре метода, реализующих шаг бродяги вверх, вниз, вправо и влево.
Как реализовать в таком объекте цепочку вида:

vagabond.goUp().goLeft().goDown().goDown().goRight();

мой код:

var Human = {
	constructor: function(top, left, right, bottom) {
		this.top = top;
		this.bottom = bottom;
		this.left = left;
		this.right = right;
		return this;
	},

	goUp: function() {
		return this.top;
	},

	goDown: function() {
		return this.bottom;
	},

	goLeft: function() {
		return this.left;
	},

	goRight: function() {
		return this.right;
	}
}

var vagabond = Object.create(Human).constructor(2,2,2,2);

Answer 1

[Сергей Протько]

У вас хэш-мэпа с функциями, а не объект. То есть вам нужно из функции возвращать экземпляр вашего хэш мэпа или следить за тем что бы контекст вызова сохранялся
Но лучше так:
http://learn.javascript.ru/object-methods#функция-...

function Human(x, y) {
    this.x = x;
    this.y = y;
}
Human.prototype = {
    goUp: function () {
        this.y++;
        return this;
    }
    goDown: function () {
        this.y--;
        return this;
    }
    // ...
}

Так же можно отDRY-ить код:

function coordsChangerFactory(prop, direction) {
    
    return function () {
        // тут можно добавить валидацию, мол что бы не вылазить за пределы поля
        this[prop] += direction;
        return this;
    }
}

function Human(x, y) {
    this.x = x;
    this.y = y;
}
Human.prototype = {
    goUp: coordsChangerFactory('y', +1),
    goDown: coordsChangerFactory('y', -1),
    goLeft: coordsChangerFactory('x', -1),
    goRight: coordsChangerFactory('x', +1)
}

var man = new Human(4, 4);
man.goDown().goRight();
console.log('Coords is %dx%d', man.x, man.y); // Coords is 5x3

Comments

[EarthFM]

Так тоже получилось. Спасибо за ответ, и подсказку где искать)
Надо просто возвращать объект)

var Human = {
constructor: function(x, y, step) {
this.x = x;
this.y = y;
this.step = step;
return this;
},

goUp : function() {
this.y + this.step;
return this;
},

goDown : function() {
this.y - this.step;
return this;
},

goLeft : function() {
this.x - this.step;
return this;
},

goRight : function() {
this.x + this.step;
return this;
}
}

var vagabond = Object.create(Human).constructor(2,2,2);
console.log(vagabond.goUp().goLeft().goDown().goDown().goRight());

[Евгений Петров]

@EarthFM вот как вы думаете, если вам 2 человека написали варианты с использованием одной функции для передвижения, это что-то значит?))

Обычно конструкторы именованные, а прототипы и есть прототипы, чтобы к ним как к свойствам обращаться. А вы всё перевернули. Зачем? Мало того — для IE8 будете полифилл Object.create() писать?

Зачем конструктору возвращать this?

Это не сделает ничего
this.y + this.step;

Использовали хотя бы
this.y += this.step;

[EarthFM]

@Petroveg, Согласен забыл сохранить, но используют два варианта через new и Object.create().constructor();

[Евгений Петров]

@EarthFM если что-то можно делать, это — ещё не повод так делать. Посмотрите на любые API в HTML5 — именованные конструкторы.

Object.create().constructor() точно так же предполагает использование оператора new.

[EarthFM]

@Petroveg Мне тоже сказали, что в API используется, но скоро будут использовать такой метод, а в 6 версии будут ещё классы)

[Евгений Петров]

@EarthFM покажите мне именованный прототип, к которому прилагался бы безымянный конструктор.

[Евгений Петров]

@EarthFM почитайте habrahabr.ru/post/175371 про классы, обратите внимание на их вызов, наличие instanceof и задайте ещё раз вопрос себе и своим советчикам: классы — это сахар над конструкторами или фэнтазийные прототипы-трансформеры?

[EarthFM]

@Petroveg, спасибо разобрался)

Answer 2

[Евгений Петров]

var Human = function (coords) {
	this.top = coords.top || 0;
	this.left = coords.left || 0;
};

Human.prototype = {
	go: function (coords) {
		this.top += coords.top || 0;
		this.left += coords.left || 0;
		return this;
	},
	goUp: function () {
		return this.go({top: -1});
	},
	goDown: function () {
		return this.go({top: 1});
	},
	goLeft: function () {
		return this.go({left: -1});
	},
	goRight: function () {
		return this.go({left: 1});
	}
};

var vagabond = new Human({
	top: 2,
	left: 2
});

vagabond.goUp().goLeft().goDown().goDown().goRight();
vagabond.go({
	top: 0,
	left: 0
});