In diesem Artikel erfahren Sie, wie Sie Javascript-Funktionen definieren. Die allgemeine Verwendung von js-Funktionen hat einen gewissen Referenzwert. Ich hoffe, dass es für Sie hilfreich ist.
Wir wissen, dass es viele Möglichkeiten gibt, js-Funktionen, Funktionsdeklarationen, Funktionsausdrücke, Konstruktoren im Funktionsstil, selbstausführende Funktionen, einschließlich Es6-Pfeilfunktionen, Schreibmethoden für Klassenklassen, zu schreiben Funktion hoher Ordnung, Funktionsdrosselung/Funktion Anti-Shake, jetzt werde ich über die grundlegendste Verwendung der oben genannten Typen sprechen.
Funktionsdeklaratives Schreiben
Diese Schreibmethode ist die grundlegendste Schreibmethode. Verwenden Sie das Schlüsselwort Funktion, um die Funktion danach zu definieren Die Funktion wird deklariert. Sie wird nicht sofort ausgeführt, sondern aufgerufen, wenn wir sie benötigen. Diese Funktion ist global. Wenn es zwei deklarative Funktionen mit demselben Namen gibt, überschreibt die zweite die erste.
function Test(){
} Nach dem Login kopieren
Es gibt eine Interviewfrage wie folgt, in der nach der Ausgabe gefragt wird:
function test1(){
alert('test1')
} ;
test1() ;
function test1(){
alert('test2')
} ;Nach dem Login kopieren
Die Antwort lautet: 'test2'
Wie schreibe ich Funktionsausdrücke
Definieren Sie eine Variable, die auf eine Funktion zeigt, die tatsächlich als anonyme Funktion betrachtet werden kann. Diese Art von Funktion kann nur aufgerufen werden, nachdem sie deklariert wurde. Wenn sie vor der Deklaration aufgerufen wird, wird ein Fehler gemeldet.
var test=function(){
}Nach dem Login kopieren
Es gibt eine Interviewfrage wie folgt, in der nach der Ausgabe gefragt wird:
var test=function(){ alert('test1') } ;
test() ;
var test=function(){ alert('test2') } ;Nach dem Login kopieren
Die Antwort lautet: test1
Funktionsstilkonstruktor
Durch JavaScript Funktionskonstruktor (Function ()) Definiert eine Funktion, definiert zunächst verschiedene Variablen und definiert schließlich den Rückgabewert oder die Ausgabe der Funktion. Diese Art von Funktion wird nicht häufig verwendet.
var test= new Function("a", "b", "return a * b");
test();Nach dem Login kopieren
Selbstausführende Funktion
Diese Art von Funktion hat keinen Namen, nur einen Deklarationskörper und ist eigentlich eine anonyme selbstaufrufende Funktion. Der Vorteil dieser Art von Funktion besteht darin, dass die Variablen unabhängig bleiben und nicht durch externe Variablen verunreinigt werden, wodurch eine geschlossene Funktionsausführungsumgebung entsteht.
wird wie folgt geschrieben:
(function(){
})();
这种写法比较常见，比如Jquery框架里面就用到这种写法:
‘use strict’;
；(function(context,win){
})(Jquery||undefined,window)Nach dem Login kopieren
Es gibt auch eine abschließende Schreibweise. Wir stoßen häufig auf Interviewfragen wie die folgende Schreibweise:
var ps=tr.getElementsByTagName("p");
for(var i=0;i<ps.length;i++){
(function(p){
p.onclick=function(){
alert(this.innerHTML);
}
})(ps[i])
}Nach dem Login kopieren
Pfeil Funktion
Diese Deklarationsmethode wird in Es6 eingeführt. Die Pfeilfunktion ist ein Kurzfunktionsausdruck, und ihr interner Wert verweist nicht auf sich selbst, sondern auf das Objekt der obersten Ebene der aktuellen Ausführungsumgebung (z. B. Fenster). , reagieren Die Komponente zeigt auf die übergeordnete Klassenkomponente der aktuellen Komponente) und Pfeilfunktionen sind immer anonym. Es wird wie folgt geschrieben:
const test=()=>{
}Nach dem Login kopieren
Zum Beispiel zeigt dies in der Funktion unten auf window
const test={
array:[1,2],
show:()=>{
console.log(this. array)
}
}
test.show()；//undefinedNach dem Login kopieren
, und dies in onSearch der Reaktionskomponente unten verweist auf die Testkomponente die Testkomponente durch die unten definierten Funktionen oder Zustände und Requisiten. Beachten Sie, dass der im Konstruktor kommentierte Code dies von onSearch auf die Testkomponente verweisen soll. Er ist anders geschrieben als die Pfeilfunktion, hat aber den gleichen Effekt.
import {Button} from 'antd'
class Test extends Component {
constructor(props) {
super(props);
//this.onSearch = this.onSearch.bind(this)
}
//onSearch(){
console.log(this);
//}
onSearch=()=>{
console.log(this);
}
render() {
return ( < p >
<Button onClick={this.onSearch}>测试</Button>
< /p>
)
}
}Nach dem Login kopieren
KlasseWie man Klassen schreibt
Vorher gab es in Js kein Klassenkonzept. Einige Attribute wurden auf Instanzen von Funktionen gemountet . Oder implementieren Sie das Konzept funktionsbasierter Klassen durch Prototypen. Beispielsweise führt die folgende Schreibmethode
function Test (){
this.name=’’;
//this.show=function(){
//}
}
Test.prototype.show=function(){
Console.log(this.name)
}
new Test().show();Nach dem Login kopieren
ES6 das Konzept der Klasse als Vorlage für Objekte ein. Klassen können über das Schlüsselwort class definiert werden. Grundsätzlich kann die ES6-Klasse nur als syntaktischer Zucker betrachtet werden. Die neue Klassenschreibmethode macht das Schreiben von Objektprototypen klarer und ähnelt eher der Syntax der objektorientierten Programmierung >
Grundlegende Schreibmethode:
class test {
//第一种
Show() {
alert('show');
}
//第二种
//Show=()=>{
//}
}
var test1 = new test();
var test2= new test();Nach dem Login kopieren
Beachten Sie, dass die Schreibmethoden dieser beiden Methoden in dieser Klasse unterschiedlich sind
Die erste deklarierte Methode zeigt auf den Prototyp-Prototyp von test
test1. Show=== test2.Show//true
Die zweite deklarierte Methode zeigt auf die Instanz von test, und für jede Instanziierung wird eine Show-Methode generiert.
test1. Show=== test2.Show//false
Die Vererbung wird wie folgt geschrieben, sodass newTest Show in test erbt
class newTest extends test{
Show() {
super. Show();
alert('newshow');
}
}
var test=new newTest ();
test. Show()Nach dem Login kopieren
Wenn nein Wenn Show in der newTest-Methode deklariert ist, wird die Show-Methode in der übergeordneten Klasse test aufgerufen. Wenn sie deklariert ist, wird die Show-Methode von newTest aufgerufen. Das untergeordnete Element ruft die Methode des übergeordneten Elements mit dem Schlüsselwort „super“ auf, um darauf zuzugreifen, z. B.
super Show();
Funktionen höherer Ordnung werden im Englischen als Funktion höherer Ordnung bezeichnet. JavaScript-Funktionen verweisen tatsächlich auf eine Variable. Da Variablen auf Funktionen verweisen können und Funktionsparameter Variablen empfangen können, kann eine Funktion eine andere Funktion als Parameter empfangen. Diese Funktion wird als Funktion höherer Ordnung bezeichnet. Einfach ausgedrückt: „Eine Funktion höherer Ordnung ist eine Funktion, die eine Funktion als Parameter oder eine Funktion als Rückgabewert annehmen kann.“ Tatsächlich ist die Callback-Funktion die typischste Anwendung.
Funktionen höherer Ordnung haben im Allgemeinen die folgenden Szenarien
1. Funktionsrückruf
$.get(‘’,{},function(data){
})
var test=function(callback){
callback.apply(this,arguments)
}Nach dem Login kopieren
2. Füllen Sie zunächst einige Funktionen in a aus Funktion Die Technologie des Parametrisierens (und anschließenden Zurückgebens einer neuen Funktion) wird als Currying bezeichnet. Diese Definition ist möglicherweise etwas schwer zu verstehen. Schauen wir uns zunächst die Implementierung des einfachen Funktionscurrying an:
var currency=function(fn){
var self=this;
var arr=[];
return function(){
if(arguments.length==0){
return fn.apply(this,arr );
}else{
[].push.apply(arr,arguments);
return arguments.callee;
}
}
}Nach dem Login kopieren
und werfen Sie dann einen Blick darauf beim Anruf:
var sum=function(){
var total=0;
var argArr=arguments;
for (var i = 0; i < argArr.length; i++) {
total+=argArr[i];
}
return total;
}
var test= currency(sum);
test(100,200);
test(300)
alert(test());Nach dem Login kopieren
其实简单的解释就是currency函数里面定义一个局部变量arr数组,然后返回一个函数，返回的函数体里对变量arr进行了赋值，每次当函数传入参数的时候都会将参数push到arr里面，然后返回函数体，形成了一个闭包。当没有参数传入的时候就直接执行传入的sum函数，然后执行函数sum传入的的参数就是arr.
3.函数扩展
函数扩展一般是通过原型来扩展，传入一个回调函数，比如给Array扩展一个函数Filter代码如下:
Array.prototype.Filter=function(callback){
…..
}Nach dem Login kopieren
做过react 开发的都知道有高阶组件的概念，其实高阶组件是通过高阶函数演变的，只不过传入的参数是组件，然后返回值是一个组件，来看下面的一段代码
export default simpleHoc(Usual);
import React, { Component } from 'react';
const simpleHoc = WrappedComponent => {
console.log('simpleHoc');
return class extends Component {
render() {
return <WrappedComponent {...this.props}/>
}
}
}
export default simpleHoc;Nach dem Login kopieren
函数节流/函数防抖
一般做前端时间比较长的人对这个概念比较熟了，但是刚接触的人估计会有点懵逼。
这两个概念都是优化高频率执行js代码的一种手段，来看下他们的基本概念
函数节流：函数在设定的时间间隔内最多执行一次
应用场景：高频率点击事件
var isEnable=true;
document.getElementById("testSubmit").onclick=function(){
if(!isEnable){
return;
}
isEnable=false;
setTimeout(function(){
console.log("函数节流测试");
isEnable = true;
}, 500);
}Nach dem Login kopieren
函数防抖：函数在一段时间内不再被调用的时候执行
应用场景：onresize onscroll事件，oninput事件
Var timer=null;
Window. onscroll=function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log("函数防抖测试");
}, 500);
}Nach dem Login kopieren
从上面两个事件可以看出来区别：
函数节流在第一次操作之后的500毫秒内再次点击就只执行一次，不会重置定时器，不会重新计时
函数防抖是在持续触发onscroll事件的时候会重置重置定时器，重新计时,直到不触发事件的500毫秒之后执行一次
Das obige ist der detaillierte Inhalt vonWie definiere ich eine Javascript-Funktion? Allgemeine Verwendung von JS-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
