Вот 5 концепций, которые необходимо знать разработчикам JavaScript.
Вот вторая часть предыдущего поста. Ссылка на предыдущий пост —
1.) Закрытие JavaScript
Замыкание – это комбинация функции и лексического окружения, в котором эта функция была объявлена.
Это внутренняя функция, которая имеет доступ к внешним (включающим) переменным функции — цепочке областей видимости. Замыкание имеет три цепочки областей видимости: оно имеет доступ к своей области видимости (переменные, определенные в фигурных скобках), оно имеет доступ к переменным внешней функции и имеет доступ к глобальным переменным.
Пример:
function User(name){
var displayName = function(greeting){
console.log(greeting+' '+name);
}
return displayName;
}
var myFunc = User('Raj');
myFunc('Welcome '); //Output: Welcome Raj
myFunc('Hello '); //output: Hello Raj
В приведенном выше примере у нас есть внешняя функция User(), которая возвращает внутреннюю функцию как displayName().Внутренняя функция будет иметь доступ к переменным в области видимости внешней функции даже после возврата внешней функции.
2.) Запоминание
Мемоизация — это метод программирования, который пытается повысить производительность функции за счет кэширования ее ранее вычисленных результатов. Поскольку объекты JavaScript ведут себя как ассоциативные массивы, они идеально подходят для использования в качестве кэшей. Каждый раз, когда вызывается мемоизированная функция, ее параметры используются для индексации кеша. Если данные присутствуют, то их можно вернуть, не выполняя всю функцию. Однако если данные не кэшируются, то функция выполняется, а результат добавляется в кэш.
Понятный пример Это поможет вам легко понять мемоизацию:
const memoizedAdd = () => {
let cache = {};
return (value) => {
if (value in cache) {
console.log('Fetching from cache');
return cache[value];
} else {
console.log('Calculating result');
let result = value + 10;
cache[value] = result;
return result;
}
}
}
// returned function from memoizedAdd
const newAdd = memoizedAdd();
console.log(newAdd(4)); //output: 14 calculated
console.log(newAdd(4)); //output: 14 cached
3.) Методы применения, вызова и привязки:
Традиционно в JS есть объект, свойства и методы, поэтому у каждого объекта есть свойства и методы.
В JavaScript мы можем творить чудеса, используя методы call, apply, bind,
Рассмотрим приведенное выше изображение. Object1 может иметь свои свойства, а Object2 может иметь свое свойство, поэтому мы можем написать общий метод для этих объектов и использовать его внутри него, используя метод call/apply/bind. Надеюсь, теперь вы понимаете, почему используется метод call/apply/bind.
давайте посмотрим на разницу и код для метода Call/Apply/Bind
- Метод вызова:
рассмотрите приведенный ниже код, obj имеет свойство num, используя метод вызова, мы можем связать obj для добавления функции,
var obj={
num: 2
}
var add = function(num2,num3,num4){
return this.num + num2 + num3 + num4;
}
var arr=[3,4,5];//Call method
console.log(add.call(obj,3,4,5)); //Output : 14//Apply method
console.log(add.apply(obj,arr)); //Output : 14//bind Method
var bound = add.bind(obj);
console.log(bound(3,4,5)); //output : 14
2. Применить метод
Точно так же работает и метод Apply, но единственное отличие состоит в том, что при использовании метода apply передаваемые аргументы могут быть массивом, см. приведенный ниже код.
3. Метод привязки:
Метод привязки возвращает экземпляр метода вместо значения результата, после чего необходимо выполнить связанный метод с аргументами.
В приведенном выше коде просто объясните, как использовать метод call/Apply/Bind с аргументом.
4.) Функция обратного вызова:
Функция обратного вызова означает ссылку на исполняемый код или фрагмент исполняемого кода, который передается в качестве аргумента другому коду.
Согласно приведенному выше определению, функция обратного вызова — это функция, передаваемая в другую функцию в качестве аргумента, которая затем вызывается внутри внешней функции для завершения какой-либо процедуры или действия.
function greeting(name) {
console.log('Hello ' + name);
}
function processUserInput(callback) {
//var name = prompt('Please enter your name.');
name = 'raja';
callback(name);
}
processUserInput(greeting); //output Hello Raja
В приведенной выше программе приветствие функции передается в качестве аргумента функции processUserInput, поэтому я надеюсь, что теперь вы поняли функцию обратного вызова в JavaScript.
5.) Понимание области:
Область видимости — это доступность переменных, функций и объектов в определенной части вашего кода во время выполнения. Другими словами, область видимости определяет видимость переменных и других ресурсов в областях вашего кода.
Согласно приведенному выше определению Scope, суть заключается в ограничении видимости переменных и не в том, чтобы все было доступно везде в вашем коде.
область действия определяется двумя основными способами:
- Глобальный охват
- Локальная область
var greeting='Welcome to blog';
(function(){
console.log(greeting); //Output: Welcome to blog
})();
учтите, что приведенная выше переменная приветствия кода должна быть глобальной областью действия, к ней можно получить доступ внутри функции,
(function(){
var greeting = 'Welcome to blog';
console.log(greeting); //Output: Welcome to blog
})();
console.log(greeting); //Output:Reference-Error greeting not defined
В приведенном выше коде для локальной области видимости
В переменных уровня области видимости в JavaScript ES6 обновлена проверка переменной подъема let, var, const type. Чтобы узнать область действия, вам также необходимо понять подъем.
Последние мысли
Что ж, вот еще одна статья о моих 5 лучших концепциях JavaScript, которые должен знать каждый программист JavaScript. Это поможет вам продвинуться по карьерной лестнице. Ссылка на предыдущую публикацию здесь —
Я надеюсь, что вы нашли эту статью полезной и узнали что-то новое. Поделитесь этой замечательной статьей со своими друзьями-веб-разработчиками😀. В ближайшее время напишу еще несколько статей на эту тему.
До встречи в моей следующей статье…
