Объясните как работает этот код?

Question

[campus1]

Читаю книгу Стоянова JavaScript. Шаблоны и там была имплементация функции bind.

Function.prototype.myBind = function(obj) {
    let fn = this,
        slice = Array.prototype.slice,
        args = slice.call(arguments, 1); //
    return function() {
        return fn.apply(obj, args.concat(slice.call(arguments))); //
    }
}

Можете пожалуйста объяснить, что и как происходит (особенно интересно про те куски которые отмечены слешами)

Answer 1

[Kovalsky]

Разжевать конечно можно было бы, но чисто в образовательных целях было бы круче, если б вы сказали что именно вам там непонятно. Тогда я мог бы объяснить вам принцип работы конкретного непонятного вам механизма и у вас было бы достаточно знаний чтобы додумать, как работает приведённая конструкция в целом.

Comments

[campus1]

Окей. Я все понял, кроме этого args.concat(slice.call(arguments)). Зачем здесь конкатить, если можна просто использовать args

[Kovalsky]

campus1, args это аргументы переданные в myBind (без первого аргумента), а arguments это аргументы которые будут переданы в результирующую функцию. В функционал bind входит привязка не только контекста, но и аргументов:

s = console.log.bind(null, 1, 2);
s( 3 );
// 1, 2, 3

Если бы в привязываемую функцию передавались только args, то тогда у нас вообще не было бы возможности передавать аргументы, как-то так:

s = console.log.myBind(null, 1, 2);
s( 3 );
// 1, 2
s( 3, 4, 5 );
// 1, 2

[campus1]

Никита Полевой, Спасибо вам!
И еще вопросик, а можна ли как-то организовать что-бы повторно привязать контекст несколько раз. Что я имею ввиду:

let func = function() { return this.age; };
let obj1 = { age: 20 };
let obj2 = { age: 33 };

func = func.myBind (obj1);
func(); // => 20;

func = func.bind(obj2);
func(); // => тоже вернет 20, но надо что было вернуло 33

Если можна, то подскажите пожалуйста в каком направлении думать

[Kovalsky]

campus1, вообще достаточно просто при каждой привязке использовать исходную функцию, но при желании можно сохранять куда-нибудь контекст и при повторной привязке просто заменять.

[campus1]

Никита Полевой, Понял, спасибо!

[campus1]

Никита Полевой, Сделал как-то так...Методом тыка

Function.prototype.myBind = function(obj) {
    let fn = this.instance || this,
        slice = Array.prototype.slice,
        args = slice.call(arguments, 1); //
    let newFunc = function() {
        return fn.apply(obj, args.concat(slice.call(arguments))); //
    }
    newFunc.instance = fn;
    return newFunc;
}

[Kovalsky]

campus1, и слово "Сделал", и фраза "Методом тыка" подразумевает, что вы кое-как но всё же сделали, а эта функция не работает)

Послушайтесь совета сталкера, который он вам дал в комментариях ниже. Очень крутой совет, мне сразу в голову и не пришло.

[campus1]

Никита Полевой,

Function.prototype.myBind = function(thisArg) {
    function boun() {
        Array.prototype.unshift.apply(arguments, part);
        return self.apply(thisArg || this, arguments);
    }
    Array.prototype.shift.apply(arguments);
    var part = arguments,
        self = this.prototype ? this.prototype.constructor : thisArg;
    boun.prototype = self.prototype;
    return boun;
};

Какой-то адовый получается bind, без конкретной привязки))
Больше не знаю как перезаписать(

[Kovalsky]

campus1, ну, если работает, то хорошо. А что значит без конкретной привязки я не понял.

Бтв по поводу того что сказал сталкер - кажется там совета и не было никакого, я просто не прочитал толком и подумал что он предлагает использовать стрелочные функции для реализации перепривязки контекста в уже привязанной функции.

Я не очень понял эту акробатику с прототипами, но вы вполне можете сохранять оригинальную функцию куда-нибудь:

Function.prototype.myBind = function( context ) {
	var f,
		bound_args = Array.prototype.slice.call(arguments, 1),
		bound_function = function() {
			return f.apply(context, bound_args.concat(Array.prototype.slice.call(arguments)));
		};

	if (typeof this._original_ === 'function') {
		f = this._original_; 
	} else {
		f = this;
		bound_function._original_ = f;
	}

	return bound_function;
}

Answer 2

[Stalker_RED]

К прототипу функции добавляется новый метод myBind, который принимает на вход объект первым параметром.

Этот метод запоминает текущий контекст (fn), запоминает остальные аргументы, если они есть (args)
Для этого вызывается функция slice
С такими параметрами она вернет все аргументы, кроме первого.

Затем он возвращает функцию, которая запомненному контексту заменит this на переданный объект, и объединит аргументы переданные при создании, с теми, что будут переданы при вызове.

Я все понял, кроме этого args.concat(slice.call(arguments))

Объединяются аргументы переданные при создании и при его последующих вызовах.
https://jsfiddle.net/oceaL85e/

Comments

[campus1]

Спасибо!
а можна ли как-то организовать что-бы повторно привязать контекст несколько раз. Что я имею ввиду:

let func = function() { return this.age; };
let obj1 = { age: 20 };
let obj2 = { age: 33 };

func = func.myBind (obj1);
func(); // => 20;

func = func.bind(obj2);
func(); // => тоже вернет 20, но надо что было вернуло 33

Если можна, то подскажите пожалуйста в каком направлении думать

[Stalker_RED]

campus1, В таком варианте не получится
www.ecma-international.org/ecma-262/6.0/index.html...

Note 2: If Target is an arrow function or a bound function then the thisArg passed to this method will not be used by subsequent calls to F.

[campus1]

Stalker_RED, Хмм...у меня возникла мысль, а что если сделать что-то на подобии instance.

myBind.instance = this, и каждый раз проверять если ли тот instance.

Возможно какой-то бред сморозил))

[campus1]

Stalker_RED, Сделал как-то так...Методом тыка

Function.prototype.myBind = function(obj) {
    let fn = this.instance || this,
        slice = Array.prototype.slice,
        args = slice.call(arguments, 1); //
    let newFunc = function() {
        return fn.apply(obj, args.concat(slice.call(arguments))); //
    }
    newFunc.instance = fn;
    return newFunc;
}

[Anton Mashletov]

Stalker_RED, можно глупый вопрос? Почему используется:

slice = Array.prototype.slice,
 slice.call(arguments, 1); //

Почему нельзя просто вызывать arguments.slice? Ведь arguments же тоже массив?

[Kovalsky]

Anton Mashletov, "arguments же тоже массив" - у меня встречный глупый вопрос: если вам это правда интересно, то почему нельзя просто зайти в консоль и попробовать вызвать arguments.slice?) Сразу бы узнали ответ на свой вопрос: arguments не является экземпляром класса Array, у него нет метода slice.

[Anton Mashletov]

Никита Полевой, не настолько интересно

[campus1]

Anton Mashletov,
"arguments" - псевдомассив аргументов, поэтому у него нету тех методов, что имеет Array