Умное использование Apply, Call и Bind в JavaScript

применить, позвонить

В JavaScript вызовы и применение существуют, чтобы изменить контекст (контекст) функции, когда она работает. Другими словами, это изменить направление этого внутри корпуса функции.

Основная особенность JavaScript заключается в том, что функции имеют концепции «контекста определения» и «контекста времени выполнения» и «контекста» могут быть изменены ».

Давай сначала получим каштан:

 function fruits () {} fruits.prototype = {color: "red", say: function () {console.log ("my color is" + this.color);}} var apple = new Fruits; Apple.say (); // мой цвет красный

Но если у нас есть объект banana = {color: "желтый"}, и мы не хотим переопределить метод Say для него, тогда мы можем использовать метод SAIP Apple или применить:

 Banana = {color: "желтый"} apple.say.call (банан); // мой цвет - hellowapple.say.apply (банан); // мой цвет желтый

Следовательно, можно увидеть, что этот вызов и применение, похоже, динамически изменяют это. Когда объект не имеет определенного метода (банановый не говорит о методе в этом каштане), но другие есть (Apple имеет метод SAKE в этом каштане), мы можем использовать вызов или применить для работы с другими методами объекта.

Разница между применением и вызовом

Как для применения, так и для вызова функции точно одинаковы, но методы принятия параметров различны. Например, существует функция, определенная следующим образом:

 var func = function (arg1, arg2) {};

Вы можете назвать это следующим образом:

 func.call (this, arg1, arg2); func.apply (это, [arg1, arg2])

Там, где это контекст, который вы хотите указать, это может быть любой объект JavaScript (все в JavaScript является объектом), вызов должен пройти параметры по порядку и применять средства для размещения параметров в массив.

В JavaScript количество параметров функции не исправлено, поэтому, если вы хотите сказать применимые условия, используйте вызов, когда ваши параметры четко известны.

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

Чтобы консолидировать и углубить память, ниже приведены некоторые распространенные применения:

Добавить в массивы

 var array1 = [12, "foo", {name "Joe"}, -2458]; var array2 = ["doe", 555, 100]; Array.prototype.push.apply (Array1, Array2); / * Array1 Значение -[12, "foo", {name "joe"}, -2458, "doe", 555, 100] *//

Получите максимальные и минимальные значения в массиве

 var numbers = [5, 458, 120, -215]; var maxinnumbers = math.max.apply (математика, числа), // 458maxinnumbers = math.max.call (Math, 5, 458, 120, -215); // 458

Само число не имеет максимального метода, но математика имеет его, поэтому мы можем использовать его метод с вызовом или применением.

Убедитесь, является ли это массивом (при условии, что метод ToString () не был переписан)

 functionisArray (obj) {return object.prototype.tostring.call (obj) === '[object array]';}

Класс (псевдо) массив с использованием метода массива

 var domnodes = array.prototype.slice.call (document.getelementsbytagname ("*"));

В JavaScript существует структура объекта, называемая псевдо-арайей. Что более особенное, так это объект аргументов, и есть также те, кто называет getelementsbytagname, document.childnodes и т. Д., Которые возвращают объекты Nodelist, все принадлежат псевдо-аражам. Вы не можете использовать Push, POP и другие методы под массивом.

Но мы можем преобразовать array.prototype.slice.call в реальный массив с объектом с атрибутом длины, чтобы домины могли применять все методы в массиве.

Глубоко понимать и использовать применить и звонить

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

Определите метод журнала, чтобы он мог прокси -консоли. Общее решение:

 function log (msg) {console.log (msg);} log (1); // 1log (1,2); // 1

Приведенный выше метод может решать самые основные потребности, но когда количество пройденных параметров неясно, приведенный выше метод потерпит неудачу. В настоящее время вы можете рассмотреть вопрос о использовании Apply или Call. Обратите внимание, что количество параметров, передаваемых здесь, неясно, поэтому лучше всего использовать. Метод заключается в следующем:

 function log () {console.log.apply (консоль, аргументы);}; log (1); // 1log (1,2); // 1 2

Следующим требованием является добавление «(приложение)» в какое -то сообщение, например:

 log ("Привет, мир"); // (приложение) привет мир

Как сделать это более элегантно? В настоящее время вам нужно подумать, что параметр аргументов представляет собой псевдо-апинку, которая преобразуется в стандартный массив через массив.

 function log () {var args = array.prototype.slice.call (arguments); args.unshift ('(app)'); console.log.apply (console, args);};

связывать подробное объяснение

После разговора о применении и позвоните, давайте поговорим о Bind. Метод bind () очень похож на применение и вызов, а также может изменить указание на это в корпусе функции.

Объяснение MDN: метод bind () создаст новую функцию, называемую функцией привязки. Когда вызывается эта функция связывания, функция связывания будет использовать первый параметр метода bind (), когда она создается как этот, а также второй параметр метода bind () и последующие параметры плюс параметры самого выполнения функции связывания в качестве параметров исходной функции, чтобы вызвать исходную функцию.

Давайте посмотрим, как его использовать. В общем мономерном режиме мы обычно используем _this, что, я и т. Д. Чтобы сохранить это, чтобы мы могли продолжать ссылаться на его после изменения контекста. Так:

 var foo = {bar: 1, eventbind: function () {var _this = this; $ ('. someclass'). On ('click', function (event) {/ * act на событие */console.log (_this.bar); // 1});}}

Из-за механизма, специфичного для Javascript, контекстная среда изменилась в EventBind: function () {} до $ ('. SomeClass'). On ('click', function (event) {}). Приведенные выше методы использования переменных для сохранения это полезны, и нет проблем. Конечно, использование bind () может решить эту проблему более элегантно:

 var foo = {bar: 1, eventbind: function () {$ ('. someclass'). On ('click', function (event) {/ * act на событие */console.log (this.bar); //1 ).bindd(This);}}

В приведенном выше коде bind () создает функцию. Когда это событие клика будет называться, его ключевое слово будет установлено значение, передаваемому (здесь относится к параметрам, передаваемым при вызове bind ()). Поэтому здесь мы передаем желаемый контекст, который (на самом деле foo) в функцию bind (). Затем, когда выполняется функция обратного вызова, это указывает на объект Foo. Еще один простой каштан:

 var bar = function () {console.log (this.x);} var foo = {x: 3} bar (); // undefinedvar func = bar.bind (foo); func (); // 3

Здесь мы создаем новую функцию. При использовании bind () для создания функции привязки, когда она выполнена, это будет установлено на Foo, а не глобальную область, как при вызове Bar ().

Есть интересный вопрос. Если bind () два раза в строке или Bind () - три раза подряд, то каково выходное значение? Так:

 var bar = function () {console.log (this.x);} var foo = {x: 3} var sed = {x: 4} var func = bar.bind (foo) .bind (sed); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //?

Ответ заключается в том, что оба раза все равно будут выходить из 3 и 5 и 5. Причина в том, что в JavaScript несколько раз Bind () является недействительной. По более глубокой причине реализация bind () эквивалентна использованию функции для обертывания вызова / применения внутри. Второй bind () эквивалентен обертыванию первого bind (), поэтому привязка после второго времени не может вступить в силу.

применить, звонить, сравнить

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

 var obj = {x: 81,}; var foo = {getx: function () {return this.x;}} console.log (foo.getx.bind (obj) ()); //81Console.log(foo.getx.call(Obj)); //81-console.log(foo.getx.apply(obj)); //81-console.log(foo.getx.apply(obj)); //81-console.log(foo.getx.apply(obj)); // 81

Все три выхода составляют 81, но обратите внимание на тот, который использует метод bind (), который впоследствии имеет больше скобок.

То есть разница в том, что когда вы хотите изменить контекст, не выполнять немедленно, а обратные вызовы, используйте метод bind (). Apply/Call выполняет функцию немедленно.

Давайте снова подведем итоги:

• Применить, вызовать, связывать все, чтобы изменить указание этого объекта функции;

• Первые параметры применения, вызовы и связывания - это объекты, на которые хочет указывать, то есть контекст, который вы хотите указать;

• Применить, вызовать и привязать все использование последующих параметров для передачи параметров;

• Bind возвращает соответствующую функцию, которую легко позвонить позже; Применить и звонить сразу.

Выше приведено умное использование Apply, Call и Bind в JavaScript, введенном вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!