Подробное объяснение использования Apply and Call в JS

Предисловие

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

Функция вызова и применения точно такая же, но способ принятия параметров отличается.

Метод определение

применять

Метод Function.apply(obj,args) может получить два параметра:

OBJ: Этот объект заменит этот объект в классе функции

ARGS: Это массив или класс. Метод применения передает элементы в этой коллекции в качестве параметров для функции вызываемой.

вызов

Первый параметр метода вызова такой же, как и метод применения , за исключением того, что второй параметр является списком параметров

В безложении режима, когда наш первый параметр передается как нулевый или неопределенный

 var test = function () {console.log (this === window);} test.apply (null); // truetest.call (undefined); // true

Использование

Как «похитить» другие

В настоящее время на методе logname в Foo будет ссылаться Bar, это указывает на бар

 var foo = {name: "mingming", logname: function () {console.log (this.name); }} var bar = {name: "xiaowang"}; foo.logname.call (bar); // xiaowang

Осознавать наследование

 Функция животного (имя) {this.name = name; this.showname = function () {console.log (this.name); }} функция Cat (name) {Animal.call (this, name); } var cat = new Cat ("Black Cat"); Cat.showname (); // Черная кошка

В реальном развитии это часто встречается непреднамеренно меняющимися сценариями.

Есть местный веселый метод. Когда веселье называется обычной функцией, это внутреннее веселье указывает на окно , но мы часто хотим, чтобы оно указывало на узел #Test , см. Следующий код:

 window.id = "window"; document.queryselector ('#test'). onclick = function () {console.log (this.id); // тест var fun = function () {console.log (this.id); } fun (); // window}

Используя вызов, применить, мы можем легко решить эту проблему

 window.id = "window"; document.queryselector ('#test'). onclick = function () {console.log (this.id); // тест var fun = function () {console.log (this.id); } fun.call (this); // test}

Конечно, вы можете сделать это, но в строгом режиме Ecmascript 5 в этом случае было указано, что он не будет указывать на глобальный объект, но не определено:

 window.id = "window"; document.queryselector ('#test'). onclick = function () {var that = this; console.log (this.id); // тест var fun = function () {console.log (this.id); } fun (); // test}

 function func () {"strict" alert (this); // Вывод: неопределенная} func ();

Другое использование

Класс массив

Здесь объекты, которые соответствуют следующим условиям, называются классовыми массивами

1. Иметь атрибут длины

2. Храните данные в соответствии с индексом

3. push, pop и другие методы, которые не имеют массивов

Общие массивы классов включают аргументы и узлы!

 (function () {array.prototype.push.call (Arguments, 4); console.log (аргументы); // [1, 2, 3, 4]}) (1,2,3)

Таким образом, протолкните 4 в аргументы

Страница Array.prototype.push может реализовать комбинацию двух массивов

Метод push не обеспечивает массив, но он обеспечивает push (param1, param,… paramn), поэтому вы также можете установить и заменить массив, применяя, то есть:

 var arr1 = new Array ("1", "2", "3"); var arr2 = new Array ("4", "5", "6"); Array.prototype.push.apply (arr1, arr2); console.log (arr1); // ["1", "2", "3", "4", "5", "6"]

Это также может быть понято таким образом, ARR1 вызывает метод push , и параметры заменяются путем применения сборки массива в набор списков параметров.

Например, я хочу найти максимальное значение в массиве классов

 (function () {var maxnum = math.max.apply (null, аргументы); console.log (maxnum); // 56}) (34,2,56);

Судья Тип

 console.log (object.prototype.tostring.call (123)) // [номер объекта] console.log (object.prototype.tostring.call ('123')) // [object string] console.log (obj Не определено] console.log (object.prototype.tostring.call (true)) // [object boolean] console.log (object.prototype.tostring.call ({})) // [объект объекта] console.log (object.prototype.tostring.call ([]) // [объект. Array] console.log (object.prototype.tostring.call (function () {})) // [функция объекта]

Выше приведено полное содержание резюме использования применения и вызова. Все могут оставить сообщение для участия в обсуждении. Я также надеюсь, что эта статья будет полезна всем в изучении JavaScript.