So verwenden Sie erweiterte Funktionen in JavaScript

Funktionen sind in JavaScript sehr leistungsfähig. Durch die Beherrschung einiger erweiterter Funktionen und deren Anwendung wird der JS-Code nicht nur schlanker, sondern auch die Leistung verbessert Editor Einige häufig verwendete und wichtige Funktionen

In JavaScript sind Funktionen sehr leistungsfähig. Es handelt sich um erstklassige Objekte, die auch als Methoden eines anderen Objekts verwendet werden können, auch als Parameter an eine andere Funktion übergeben werden können und nicht nur das, sie können auch von einer Funktion zurückgegeben werden! Man kann sagen, dass in JS Funktionen überall und allmächtig sind, vergleichbar mit Monkey King! Wenn Sie die Funktion gut nutzen, kann sie Ihnen helfen, den Westen zu erlernen und den Code elegant und prägnant zu gestalten. Wenn Sie sie schlecht nutzen, werden Sie eine Katastrophe erleiden und Ärger machen~

Zusätzlich zu den damit verbundenen Grundkenntnissen Funktionen Darüber hinaus führt die Beherrschung einiger erweiterter Funktionen und deren Anwendung nicht nur dazu, dass der JS-Code schlanker aussieht, sondern verbessert auch die Leistung. Im Folgenden werden einige häufig verwendete und wichtige erweiterte Funktionen vom Herausgeber zusammengefasst, sowie einige persönliche Erkenntnisse, die hiermit aufgezeichnet werden. Wenn Sie ein JS-Anfänger sind, haben Sie keine Angst vor dem Wort „Fortgeschritten“, da der Artikel einige Grundkenntnisse wie Prototypen usw. durchsetzt, und ich glaube, dass es nicht schwer zu verstehen ist. Wenn Sie ein JS-Experte sind, können Sie diesen Artikel auch nutzen, um Lücken zu finden und zu schließen.

Text

Bereichssicherer Konstruktor

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

Ich glaube, Sie sind mit dem oben Gesagten vertraut Konstruktor Die Funktion muss bekannt sein, aber was passiert, wenn ein unvorsichtiger Programmierer beim Aufruf dieses Konstruktors vergisst, new hinzuzufügen?

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

Aufgrund der Verwendung unsicherer Konstruktoren ändert der obige Code versehentlich den Namen des Fensters, da dieses Objekt zur Laufzeit gebunden ist und bei Verwendung von new zum Aufrufen des Konstruktors auf das neu erstellte For verweist Objekte, wenn new nicht verwendet wird, verweist dies auf window.

Da das Namensattribut des Fensters zur Identifizierung des Linkziels und des Frames verwendet wird, kann ein versehentliches Überschreiben dieses Attributs hier zu anderen Fehlern führen.

Bereichssichere Konstruktoren bestätigen zunächst, dass dieses Objekt eine Instanz des richtigen Typs ist, bevor sie Änderungen vornehmen, wie folgt:

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

Dadurch wird vermieden, dass Eigenschaften des globalen Objekts versehentlich geändert oder festgelegt werden.

Die Implementierung dieses abgesicherten Modus entspricht dem Sperren der Umgebung, in der der Konstruktor aufgerufen wird. Daher können beim Ausleihen des Konstruktor-Vererbungsmusters Probleme auftreten. Die Lösung besteht darin, eine Kombination aus der Prototypkette und dem Konstruktormuster zu verwenden. das heißt, kombinierte Vererbung.

Wenn Sie eine JS-Bibliothek oder ein Framework-Entwickler sind, glaube ich, dass bereichssichere Konstruktoren für Sie sehr nützlich sein werden. In Projekten, in denen mehrere Personen zusammenarbeiten, sollten auch bereichssichere Konstruktoren verwendet werden, um zu verhindern, dass sie versehentlich das globale Objekt ändern.

Lazy-Loading-Funktion

Aufgrund von Verhaltensunterschieden zwischen Browsern kann es viele if-Anweisungen im Code geben, die das Browserverhalten erkennen. Wenn der Browser des Benutzers jedoch eine bestimmte Funktion unterstützt, wird er diese immer unterstützen, sodass diese if-Anweisungen nur einmal ausgeführt werden müssen. Selbst wenn es nur einen if-Anweisungscode gibt, ist dieser schneller als keiner.

Lazy Loading bedeutet, dass der Zweig der Funktionsausführung nur einmal ausgeführt wird. Es gibt zwei Möglichkeiten, Lazy Loading zu implementieren. Die erste besteht darin, die Funktion beim ersten Aufruf zu verarbeiten und die erkannte Funktion zu verwenden Ergebnisse. Schreiben Sie die ursprüngliche Funktion neu.

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

Die zweite Möglichkeit, Lazy Loading zu implementieren, besteht darin, die entsprechende Funktion bei der Deklaration der Funktion anzugeben

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

Der Vorteil der Lazy Loading-Funktion besteht darin, dass sie bei der ersten Ausführung nur wenig Leistung einbüßt , und dann wird es keinen unnötigen Leistungsverbrauch mehr geben.

Funktionsbindungsbereich

In JS wird der Umfang einer Funktion dynamisch gebunden, wenn die Funktion aufgerufen wird, das heißt Der Sinn dieses Objekts einer Funktion ist ungewiss, aber in einigen Fällen müssen wir den Ausführungsbereich einer bestimmten Funktion festlegen und immer auf ein bestimmtes Objekt zeigen. Was ist zu diesem Zeitpunkt zu tun?

Dangdang~~Sie können Funktionen verwenden, um Bereichsfunktionen zu binden

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

Verwendung:

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

Die Aufruffunktion und die Apply-Funktion können den Umfang der Funktion vorübergehend ändern, verwenden bind Die Funktion kann eine bereichsgebundene Funktion erhalten

Funktion Curry (Curry)

Das Konzept von Curry ist einfach: einfach übergeben Rufen Sie a an Funktion mit einigen Argumenten und lassen Sie die Funktion dann eine andere Funktion zurückgeben, um die verbleibenden Argumente zu verarbeiten. Dies kann so verstanden werden, dass der Funktion die Möglichkeit zum „Laden“ gegeben wird.

Viele js-Bibliotheken kapseln die Curry-Funktion, die speziell auf diese Weise verwendet werden kann.

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')); //直接全部传参也可： [' ',' ']

Sobald eine Funktion festgelegt ist, können wir sie mit Teilargumenten aufrufen und erhalten eine spezifischere Funktion. Diese spezifischere Funktion hilft uns, uns an die Parameter zu erinnern, die zum ersten Mal durch den Abschluss übergeben werden. Schließlich können wir diese spezifischere Funktion verwenden, um zu tun, was wir wollen~

Eine einfachere Möglichkeit, Curry zu implementieren:

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);
 }
 }
}

Entprellfunktion

Entprellfunktion, auch „Entprellfunktion“ genannt. Seine Funktion ist auch sehr einfach und direkt, nämlich zu verhindern, dass eine bestimmte Funktion kontinuierlich aufgerufen wird, was dazu führt, dass der Browser einfriert oder abstürzt. Die Verwendung ist wie folgt:

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功能

Das obige ist der detaillierte Inhalt vonSo verwenden Sie erweiterte Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!