Comment utiliser les fonctions avancées en JavaScript

En JavaScript, les fonctions sont très puissantes. En plus des connaissances de base liées aux fonctions, maîtriser certaines fonctions avancées et les appliquer permettra non seulement de rationaliser le code JS, mais également d'améliorer les performances. editor Quelques fonctions couramment utilisées et importantes

En JavaScript, les fonctions sont très puissantes. Ce sont des objets de première classe qui peuvent également être utilisés comme méthodes d’un autre objet, peuvent également être passés en paramètres à une autre fonction, et pas seulement cela, ils peuvent également être renvoyés par une fonction ! On peut dire qu'en JS, les fonctions sont partout et omnipotentes, comparables à Monkey King ! Lorsque vous utilisez bien la fonction, cela peut vous aider à apprendre l'Occident et à rendre le code élégant et concis. Lorsque vous l'utilisez mal, vous subirez un désastre et créerez des problèmes ~

En plus des connaissances de base liées à. fonctions De plus, la maîtrise de certaines fonctions avancées et leur application rendront non seulement le code JS plus rationalisé, mais amélioreront également les performances. Voici quelques fonctions avancées couramment utilisées et importantes résumées par l'éditeur, ainsi que quelques idées personnelles, qui sont enregistrées ici. Si vous êtes débutant en JS, n'ayez pas peur du mot "avancé", car l'article intercale quelques connaissances de base comme les prototypes et ceci, et je pense que ce n'est pas difficile à comprendre. Si vous êtes un expert JS, vous pouvez également utiliser cet article pour rechercher et combler des lacunes.

Texte

Constructeur sans danger pour la portée

function Person(name,age){
 this.name = name;
 this.age = age;
}
var p1 = new Person("Claiyre",80);

Je crois que vous connaissez ce qui précède Le constructeur doit être familier, mais que se passera-t-il si un programmeur imprudent oublie d'ajouter new lors de l'appel de ce constructeur ?

var p3 = Person("Tom",30);
console.log(p3);    //undefined
console.log(window.name);  //Tom

En raison de l'utilisation de constructeurs non sécurisés, le code ci-dessus change accidentellement le nom de la fenêtre, car cet objet est lié au moment de l'exécution, et lors de l'utilisation de new pour appeler le constructeur, cela pointe vers new For l'objet créé, lorsque new n'est pas utilisé, cela pointe vers la fenêtre.

Étant donné que l'attribut name de window est utilisé pour identifier la cible et le cadre du lien, l'écrasement accidentel de cet attribut ici peut entraîner d'autres erreurs.

Le constructeur scope-safe confirmera d'abord que cet objet est une instance du type correct avant d'apporter des modifications, comme suit :

function Person(name,age){
 if(this instanceof Person){
 this.name = name;
 this.age = age;
 } else {
 return new Person(name,age);
 } 
}

Cela évite les modifications accidentelles ou les modifications de l'objet global Définir les propriétés.

Implémenter ce mode sans échec équivaut à verrouiller l'environnement dans lequel le constructeur est appelé, donc des problèmes peuvent survenir lors de l'emprunt du modèle d'héritage du constructeur. La solution est d'utiliser une combinaison de la chaîne de prototypes et du modèle de constructeur, c'est-à-dire un héritage combiné.

Si vous êtes un développeur de bibliothèque ou de framework JS, je pense que les constructeurs à portée sécurisée vous seront très utiles. Dans les projets où plusieurs personnes collaborent, afin d'éviter qu'elles ne modifient accidentellement l'objet global, des constructeurs à portée sécurisée doivent également être utilisés.

Fonction de chargement paresseux

En raison des différences de comportement entre les navigateurs, il peut y avoir de nombreuses instructions if dans le code qui détectent le comportement du navigateur. Mais si le navigateur de l'utilisateur prend en charge une certaine fonctionnalité, il la prendra toujours en charge, donc ces instructions if ne doivent être exécutées qu'une seule fois. Même s'il n'y a qu'un seul code d'instruction if, c'est plus rapide qu'aucun.

Le chargement paresseux signifie que la branche d'exécution de la fonction ne sera exécutée qu'une seule fois. Il existe deux façons d'implémenter le chargement paresseux. La première consiste à traiter la fonction lorsque la fonction est appelée pour la première fois et à utiliser celle détectée. résultats. Réécrivez la fonction d’origine.

function detection(){
 if(//支持某特性){
 detection = function(){
 //直接用支持的特性
 }
 } else if(//支持第二种特性){
 detection = function(){
 //用第二种特性
 }
 } else {
 detection = function(){
 //用其他解决方案
 }
 }
}

La deuxième façon d'implémenter le chargement paresseux est de spécifier la fonction appropriée lors de la déclaration de la fonction.

var detection = (function(){
 if(//支持某特性){
 return function(){
 //直接用支持的特性
 }
 } else if(//支持第二种特性){
 return function(){
 //用第二种特性
 }
 } else {
 return function(){
 //用其他解决方案
 }
 } 
})();

L'avantage de la fonction de chargement paresseux est qu'elle n'est sacrifiée que dans le fichier. première exécution. Un peu de performance, et plus de performance gaspillée plus tard.

Portée de liaison de fonction

En JS, la portée d'une fonction est liée dynamiquement lorsque la fonction est appelée, c'est-à-dire qu'on dit que l'intérêt de l'objet this d'une fonction est incertain, mais dans certains cas, nous devons fixer la portée d'exécution d'une certaine fonction et toujours pointer vers un certain objet. Que faire à ce moment-là ?

Dangdang~~Vous pouvez utiliser des fonctions pour lier des fonctions de portée

function bind(fn,context){
 return function(){
 return fn.apply(context,arguments);
 }
}

Utilisation :

var person1 = {
 name: "claiyre",
 sayName: function(){
 alert(this.name);
 }
}
var sayPerson1Name = bind(person1.sayName,person1);
sayPerson1Name(); //claiyre

La fonction d'appel et la fonction d'application peuvent temporairement modifier la fonction de la fonction Domain, utilisez la fonction bind pour obtenir une fonction liée à la portée

Fonction curry (curry)

Le concept de curry est très simple : appelez une fonction avec seulement quelques arguments et demandez à la fonction de renvoyer une autre fonction pour gérer les arguments restants. Cela peut être compris comme donnant à la fonction la possibilité de « charger ».

De nombreuses bibliothèques js encapsulent la fonction curry, qui peut être utilisée spécifiquement comme ceci.

var match = curry(function(what,str){
 return str.match(what)
}); 
var hasNumber = match(/[0-9]+/g);
var hasSpace = match(/\s+/g)
hasNumber("123asd");  //['123']
hasNumber("hello world!"); //null
hasSpace("hello world!"); //[' '];
hasSpace("hello");   //null
console.log(match(/\s+/g,'i am Claiyre')); //直接全部传参也可： [' ',' ']

Une fois qu'une fonction est curryée, nous pouvons l'appeler avec des arguments partiels et obtenir une fonction plus spécifique. Cette fonction plus spécifique nous aide à mémoriser les paramètres passés pour la première fois via la fermeture. Enfin, nous pouvons utiliser cette fonction plus spécifique pour faire ce que nous voulons~

Une façon plus simple d'implémenter le curry :

function curry(fn){
 var i = 0;
 var outer = Array.prototype.slice.call(arguments,1);
 var len = fn.length;
 return function(){
 var inner = outer.concat(Array.prototype.slice.call(arguments));
 return inner.length === len?fn.apply(null,inner):function (){
 var finalArgs = inner.concat(Array.prototype.slice.call(arguments));
 return fn.apply(null,finalArgs);
 }
 }
}

Fonction anti-rebond

Fonction anti-rebond, également connue sous le nom de « fonction anti-rebond ». Sa fonction est également très simple et directe, qui consiste à empêcher qu'une certaine fonction soit appelée en continu, provoquant le blocage ou le crash du navigateur. L'utilisation est la suivante :

var myFunc = debounce(function(){
 //繁重、耗性能的操作
}，250);
window.addEventListener('resize',myFunc);

像窗口的resize，这类可以以较高的速率触发的事件，非常适合用去抖函数，这时也可称作“函数节流”，避免给浏览器带来过大的性能负担。

具体的实现时，当函数被调用时，不立即执行相应的语句，而是等待固定的时间w,若在w时间内，即等待还未结束时，函数又被调用了一次，则再等待w时间，重复上述过程，直到最后一次被调用后的w时间内该函数都没有被再调用，则执行相应的代码。

实现代码如下：

function debounce(fn,wait){
 var td;
 return function(){
 clearTimeout(td);
 td= setTimeout(fn,wait);
 }
}

once函数

顾名思义，once函数是仅仅会被执行一次的函数。具体实现如下：

function once(fn){
 var result;
 return function(){
 if(fn){
 result = fn(arguments);
 fn = null;
 }
 return result;
 }
}
var init = once(function(){
 //初始化操作
})

在被执行过一次后,参数fn就被赋值null了，那么在接下来被调用时，便再也不会进入到if语句中了，也就是第一次被调用后，该函数永远不会被执行了。

还可以对上述once函数进行改进，不仅可以传入函数，同时还可以给传入的函数绑定作用域u，同时实现了bind和once。

function once(fn,context){
 var result;
 return function(){
 if(fn){
 result = fn.apply(context,arguments);
 fn = null;
 }
 return result;
 }
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何引用阿里字体图标的方法

有关Express中log4js实际用法

使用NodeJS如何实现WebSocket功能

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!