Позавчера я пошел на собеседование, и gg спросил меня о некоторых знаниях js. Был вопрос об использовании метода вызова и применения. Хотя я использовал метод вызова 365 дней назад, я все еще не мог ответить на него. в то время я подведу итог сегодня.
вызовите и примените, их функция — привязать функцию к другому объекту для запуска.
Определения формата и параметров обоих:
call( thisArg [, arg1, arg2, ... ] ); // Список параметров, arg1, arg2, ...
apply(thisArg [, argArray] ); // массив параметров, argArray
Указатель this внутри двух вышеупомянутых функций будет назначен thisArg, который может реализовать цель запуска функции как метода другого объекта.
1. Простое использование вызова
Для начала давайте рассмотрим простой пример (вызов):
Скопируйте код кода следующим образом:
<!тип документа html>
<html>
<голова>
<title> позвонить-подать заявку </title>
</голова>
<тело>
<input type="text" id="idTxt" value="input text">
<тип сценария="текст/javascript">
значение var = «глобальная переменная»;
функция mFunc()
{
this.value = "член var";
}
функция gFunc()
{
оповещение(это.значение);
}
window.gFunc();// показываем gFunc, глобальную переменную
gFunc.call(window); // показываем gFunc, глобальную переменную
gFunc.call(new mFunc()); // показываем mFunc, член var
gFunc.call(document.getElementById('idTxt'));// показываем элемент, вводим текст
</скрипт>
<script Language="JavaScript">
вар func = новая функция()
{
this.a = "функция";
}
вар func2 = функция (x)
{
вар а = "функ2";
предупреждение(this.a);
предупреждение (х);
}
func2.call(func, "func2");// показываем func и func2
</скрипт>
</тело>
</html>
Тогда результаты работы будут следующими:
глобальная переменнаяглобальная переменная
член вар
ввод текста
функция
функция2
Тестовая среда: Google Chrome10.0.648.45.
Наконец, проанализируйте результаты
1. Окно глобального объекта вызывает функцию gFunc, которая указывает на объект окна, поэтому this.value является глобальной переменной.
2. Функция gFunc вызывает метод вызова. По умолчанию он указывает на первый объект окна параметров, поэтому this.value также является глобальной переменной.
3. Функция gFunc вызывает метод вызова. По умолчанию используется первый параметр new mFunc(), который является объектом mFunc. Следовательно, this.value является переменной-членом mFunc.
4. Функция gFunc вызывает метод вызова. По умолчанию это указывает на первый элемент управления вводом текста, то есть элемент управления с id='idTxt'. Следовательно, this.value — это текст ввода значения элемента управления вводом.
5. Функция func2 вызывает метод вызова. По умолчанию это первый параметр объекта функции func, поэтому this.value — это this.a, то есть func.
6. Функция func2 вызывает метод вызова. Второй параметр принадлежит параметру объекта функции func2, поэтому alert(x) — это второй параметр func2.
2. Использование и улучшение наследования вызовов
js использует вызов для имитации наследования
Тестовый код:
Скопируйте код кода следующим образом:
<!тип документа html>
<html>
<голова>
<title> вызов – подать заявку на наследование </title>
</голова>
<тело>
<тип сценария="текст/javascript">
функция baseA()// базовый класс A
{
this.member = "член базыA";
this.showSelfA = функция()
{
окно.alert(this.member);
}
}
функция baseB()// базовый класс B
{
this.member = "член baseB";
this.showSelfB = функция()
{
окно.alert(this.member);
}
}
function ExtendAB()//Наследуем класс от A и B
{
baseA.call(this);// вызов A
baseB.call(this); // вызов B
}
окно.онлоад = функция()
{
вар расширить = новое расширениеAB ();
Extend.showSelfA();//покажем A
Extend.showSelfB();//покажем B
}
</скрипт>
</тело>
</html>
Результаты бега следующие:член базы B
член базы B
Тестовая среда: Google Chrome10.0.648.45.
Анализ результатов:
Ожидаемым результатом должен быть вывод члена baseA и члена baseB, но фактический результат — это член baseB и член baseB.
(Он был протестирован в IE9, 8, 6, Maxthon, Chrome, FF, Opera, Safari, 360 и других браузерах, и результат последний: член baseB)
На данный момент машина не ошибается, что требует от нас проведения глубокого анализа.
Мы можем легко подумать, что это вызвано этим. This дважды указывает на объект baseB, но так ли это на самом деле?
Чтобы разобраться в сути, мы воспользовались инструментом отладки браузера Chrome для установки точек останова и отладки и обнаружили, что:
Когда вызывается метод Extend.showSelfA();, это указывает наextendAB (а не на объект baseB, как мы предполагали дважды).
Настоящая причина заключается в том, что член-переменная-член объекта ExtendAB перезаписывается членом-членом BaseB, когда он создается с помощью baseB.call(this); то есть член-член ExtendAB назначается из члена BaseA в член базы B.
Конечно, мы также можем немного изменить приведенный выше код baseA, чтобы проверить правильность нашего анализа отладки:
Скопируйте код кода следующим образом:
функция baseA()// базовый класс A
{
this.memberA = "член baseA" // член изменен наmemberA, чтобы отличить элемент в baseB;
this.showSelfA = функция()
{
window.alert(this.memberA); // Отображение члена A);
}
}
Снова запустите браузеры, такие как Chrome, результаты следующие:
член базыA
член базы B
Результаты совпадают с нашими ожиданиями, а информация об отладке Chrome также подтверждает нашу правильность:
Улучшения наследования (прототип)
Вышеупомянутый метод моделирования наследования после тщательного анализа не является лучшим.
Поскольку каждый раз, когда метод-член определяется в функции (классе), он вызывает копирование экземпляра, поэтому вы можете использовать прототип-прототип для внесения улучшений.
Примеры улучшений следующие:
Скопируйте код кода следующим образом:
<!тип документа html>
<html>
<голова>
<title> вызов – подать заявку на прототип </title>
</голова>
<тело>
<тип сценария="текст/javascript">
варКласс = {
создать: function()// создать функцию
{
функция возврата()
{
this.initialize.apply(это, аргументы);
}
}
};
var Person = Class.create();// Создать класс Person
Person.prototype = {// инициализация прототипа
инициализировать: функция (obj1, obj2)
{
this.obj1 = obj1;
this.obj2 = obj2;
},
showSelf: функция()
{
alert("obj: " + this.obj1 + " и " + this.obj2);
}
}
// экземпляр класса
var person = new Person("man", "women");// два параметра
person.showSelf();// показываем человека
</скрипт>
</тело>
</html>
Результаты бега следующие:
объект: мужчины и женщины