В этой статье подробно представлены методы и принципы различных вызовов функций в JavaScript, что помогает понять функции JavaScript!
JavaScript, 5 способов вызовов функций
Снова и снова я обнаруживал, что безболлочный код JavaScript вызван тем, как не понимают, как работают функции JavaScript (кстати, большая часть этого кода написана мной). JavaScript имеет характер функционального программирования, который станет барьером для нашего прогресса, когда мы решим столкнуться с этим.
Как новички, давайте проверим пять вызовов функций. С поверхности мы будем думать, что эти функции очень похожи на функции в C#, но мы видим, что в будущем все еще есть очень важные различия. Игнорирование этих различий, несомненно, приведет к трудным ошибкам. Сначала давайте создадим простую функцию, которая будет использоваться ниже, и эта функция возвращает только текущее значение этого и двух предоставленных параметров.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
функция makearray (arg1, arg2) {
вернуть [это, arg1, arg2];
}
</script>
Наиболее часто используемый метод, но, к сожалению, глобальные вызовы функций
Когда мы изучаем JavaScript, мы узнаем, как определять функции, используя синтаксис в приведенном выше примере.
, Мы также знаем, что называть эту функцию очень просто, и все, что нам нужно сделать, это:
Кода -копия выглядит следующим образом:
Makearray ('One', 'два');
// => [window, 'One', 'два']
Подождите минуту. Что это за окно
Alert (typeof window.methodthatdoesntexist);
// => не определен
Alert (typeof window.makearray);
// =>
window.makearray ('One', 'два');
// => [window, 'One', 'два']
Я говорю, что наиболее распространенным методом вызова является неудачное, потому что он вызывает, что функция, которую мы объявляем, является глобальным по умолчанию. Мы все знаем, что глобальные члены не являются лучшей практикой для программирования. Это особенно правильно в JavaScript. Вы не будете сожалеть о том, чтобы избежать глобальных членов в JavaScript.
Функция JavaScript Правило 1
В функциях, которые не называются непосредственно явными объектами владельца, такими как myFunction (), приведут к тому, что это значение станет объектом по умолчанию (окно в браузере).
Функциональные вызовы
Давайте создадим простой объект сейчас, используйте функцию Makearray в качестве его метода. Мы будем использовать метод JSON для объявления объекта, и мы также будем называть этот метод
Кода -копия выглядит следующим образом:
// Создание объекта
var raymaker = {
SomeProperty: «Некоторое значение здесь»,
Сделать: Makearray
};
// Вызов метод MAKE ()
arraymaker.make ('one', 'два');
// => [Arraymaker, 'One', 'два']
// Альтернативный синтаксис с использованием квадратных кронштейнов
Arraymaker ['Make'] ('One', 'two');
// => [Arraymaker, 'One', 'два']
Смотрите разницу здесь, это значение становится самим объектом. Вы можете задаться вопросом, почему исходное определение функции не изменилось, почему это не окно. Ну, так и в JSavar выполняются функции. Функции являются стандартным типом данных в JavaScript или, если быть точным, объектом. Вы можете передать их или скопировать их. Это как если бы вся функция, а также список параметров и корпус функции копируются и присваиваются свойствам, производимому в Arraymaker, так что это похоже на определение Arraymaker, как это:
Кода -копия выглядит следующим образом:
var raymaker = {
SomeProperty: «Некоторое значение здесь»,
Make: function (arg1, arg2) {
вернуть [это, arg1, arg2];
}
};
Функция JavaScript Правило 2
В методе синтаксис вызова, такого как obj.myfunction () или obj ['myfunction'] (), значение этого является obj
Это основной источник ошибок в коде обработки событий. Взгляните на эти примеры
Кода -копия выглядит следующим образом:
<input type = "кнопка" value = "кнопка 1" id = "btn1" />
<input type = "кнопка" value = "кнопка 2" id = "btn2" />
<input type = "кнопка" value = "кнопка 3" id = "btn3" onclick = "buttonClicked ();"/>
<script type = "text/javascript">
function buttonClicked () {
var text = (это окно ===)? «окно»: this.id;
оповещение (текст);
}
var button1 = document.getElementbyId ('btn1');
var button2 = document.getElementById ('btn2');
button1.onclick = buttonclicked;
button2.onclick = function () {buttongClicked (); };
</script>
Нажатие на первую кнопку будет отображаться «btn», потому что это вызов метода, это объект, к которому он принадлежит (элемент кнопки). Нажатие на вторую кнопку будет отображаться «окно», потому что ButtonClicked называется непосредственно (в отличие от OBJ.ButtonClicked ().) Это то же самое, что и наша третья кнопка, которая помещает функцию обработки событий непосредственно на метку. Таким образом, результат нажатия третьей кнопки такой же, как и вторая.
Использование библиотеки JS, как JQuery, имеет преимущество. Когда обработчик событий определяется в JQUERY, библиотека JS поможет переопределить это значение, чтобы убедиться, что она содержит ссылки на текущий элемент источника события.
Кода -копия выглядит следующим образом:
// Использование jQuery
$ ('#btn1'). click (function () {
предупреждение (this.id); // jQuery гарантирует, что «это» будет кнопкой
});
Как jQuery перегружена ценность этого? Продолжить чтение
Два других: Apply () и Call ()
Чем больше вы используете функции JavaScript, тем больше вы обнаруживаете, что вам нужно передавать функции и вызывать их в разных контекстах. Точно так же, как Qjuery делает в функциях обработки событий, вам часто нужно сбросить это значение. Помните, что я сказал вам, в Javascript функции также являются объектами. Функциональные объекты содержат некоторые предопределенные методы, два из которых Apply () и Call (), которые мы можем использовать для сброса этого.
Кода -копия выглядит следующим образом:
var Gasguzzler = {Год: 2008, модель: 'Dodge Cailout'};
makearray.apply (Gasguzzler, ['One', 'two']);
// => [Gasguzzler, 'One', 'Two']
makearray.call (Gasguzzler, 'one', 'two');
// => [Gasguzzler, 'One', 'Two']
Эти два метода похожи, разница в разнице в следующих параметрах. Function.apply () использует массив для передачи функции, в то время как function.call () проходит эти параметры независимо. На практике вы обнаружите, что Apply () в большинстве случаев удобнее.
Jsavarscript function Правило 3
Если мы хотим перегрузить значение этого, не копируя функцию в метод, мы можем использовать myfunction.apply (obj) или myfunction.call (obj).
Конструктор
Я не хочу копаться в определении типов в JavaScript, но в этот момент нам нужно знать, что в JavaScript нет класса, и любой пользовательский тип требует функции инициализации. Также хорошей идеей определить ваш тип с помощью объекта прототипа (в качестве свойства функции инициализации). Давайте создадим простой тип
Кода -копия выглядит следующим образом:
// объявить конструктор
Функция Arraymaker (arg1, arg2) {
это.
this.TheArray = [this, arg1, arg2];
}
// Объявление метода экземпляра
Arraymaker.prototype = {
somemethod: function () {
оповещение ('somemethod называется');
},
getarray: function () {
вернуть это.
}
};
var am = new Arraymaker ('One', 'Two');
var ore = new Arraymaker ('First', 'Second');
am.getarray ();
// => [am, 'one', 'два']
Одним из очень важных и заслуживающих внимания является новый оператор, который появляется перед вызовом функции. Без этого ваша функция похожа на глобальную функцию, а свойства, которые мы создаем, будут созданы в глобальном объекте (окне), и вы не хотите этого делать. Другая тема заключается в том, что, поскольку в вашем конструкторе нет возвращаемого значения, если вы забудете использовать новый оператор, некоторые из ваших переменных будут назначены неопределенными. По этой причине это хорошая привычка начинать с заглавных букв. Это можно использовать в качестве напоминания, чтобы не забыть предыдущего нового оператора при вызовах.
С такой осторожностью код в функции инициализации аналогичен функции инициализации, которую вы написали на других языках. Значением этого будет объект, который вы создадите.
Функция JavaScript Правило 4
Когда вы используете функцию в качестве функции инициализации, например myFunction (), время выполнения JavaScript укажет значение этого как вновь созданный объект.
Я надеюсь, что понимание различий в различных методах вызовов функций уберет ваш код sjavaScript от ошибок, и некоторые такие ошибки убедится, что вы всегда знаете, что значение этого является первым шагом, чтобы избежать их.