Comment définir la fonction javascript ? Utilisation courante des fonctions js

Ce que cet article vous apporte, c'est comment définir les fonctions javascript ? L'utilisation courante des fonctions js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Nous savons qu'il existe de nombreuses façons d'écrire des fonctions js, des déclarations de fonction, des expressions de fonction, des constructeurs de style fonction, des fonctions auto-exécutables, y compris des fonctions fléchées Es6, des méthodes d'écriture de classe, Fonction d'ordre élevé, fonction d'étranglement/fonction anti-tremblement, je vais maintenant commencer à parler de l'utilisation la plus basique des types ci-dessus.

Écriture déclarative de fonction

Cette méthode d'écriture est la méthode d'écriture la plus basique. Utilisez le mot-clé fonction pour définir la fonction Après. la fonction est déclarée. Elle ne sera pas exécutée immédiatement, elle sera appelée lorsque nous en aurons besoin. Cette fonction est globale. S'il existe deux fonctions déclaratives portant le même nom, la seconde écrasera la première.

   function   Test(){
    }　

Il y a une question d'entretien comme suit, portant sur le résultat :

function  test1(){
 alert('test1')  
} ;
test1() ;  
function  test1(){
 alert('test2')  
} ;

La réponse est : 'test2'

Comment écrire une fonction expressions

Définir une variable pointant vers une fonction, qui peut en fait être considérée comme une fonction anonyme. Ce type de fonction ne peut être appelé qu'après avoir été déclaré. Si elle est appelée avant d'être déclarée, une erreur sera signalée.

      var   test=function(){
     }

Il y a une question d'entretien comme suit, portant sur le résultat :

var test=function(){ alert('test1')  } ;
test() ; 
var test=function(){ alert('test2')  } ;

La réponse est : test1

Constructeur de style de fonction

via la fonction JavaScript Le constructeur (Function()) est instancié pour définir une fonction. Différentes variables sont définies en premier, et enfin la valeur de retour ou la sortie de la fonction est définie. Ce type de fonction n'est pas couramment utilisé.

var test= new Function("a", "b", "return a * b");
test();

Fonction auto-exécutable

Ce type de fonction n'a pas de nom, seulement un corps de déclaration, et est en fait une fonction auto-appelante anonyme. L'avantage de ce type de fonction est de garder les variables indépendantes et non polluées par des variables externes, formant ainsi un environnement d'exécution de fonction fermé.

s'écrit comme suit :

(function(){

})();
这种写法比较常见，比如Jquery框架里面就用到这种写法:
‘use strict’;

；(function(context,win){
})(Jquery||undefined,window)

Il existe également une méthode d'écriture de type fermeture Nous rencontrons souvent des questions d'entretien similaires à la méthode d'écriture suivante :

var ps=tr.getElementsByTagName("p");
for(var  i=0;i<ps.length;i++){
     (function(p){
      p.onclick=function(){
      alert(this.innerHTML);
      }
})(ps[i])
}

Fonction flèche

Cette méthode de déclaration est introduite dans Es6 La fonction flèche est une expression de fonction abrégée, et son interne ne pointe pas vers elle-même, mais vers l'objet de niveau supérieur de l'exécution en cours. environnement (par exemple, les composants window et React pointent vers le composant parent de classe du composant actuel) et les fonctions fléchées sont toujours anonymes. Il s'écrit comme suit :

const   test=()=>{
}

Par exemple, ceci dans la fonction ci-dessous pointe vers window

const  test={
       array:[1,2],
       show:()=>{
            console.log(this. array)
      }
}
test.show()；//undefined

et ceci dans onSearch du composant React ci-dessous pointe vers le composant Test. Grâce à cela, vous pouvez trouver les fonctions ou l'état et les accessoires définis sous le composant Test. Notez que le code commenté dans le constructeur consiste à pointer celui de onSearch vers le composant Test. Il est écrit différemment de la fonction flèche, mais a le même effet.

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

ClassMéthode d'écriture de classe

Js n'avait pas la notion de classe auparavant, certains attributs étaient montés dans des fonctions. Implémentez le concept de classes basées sur des fonctions sur des instances ou via des prototypes. Par exemple, la méthode d'écriture suivante

function  Test (){

this.name=’’;

//this.show=function(){

//}

}

Test.prototype.show=function(){

   Console.log(this.name)

}

new Test().show();

ES6 introduit le concept de classe en tant que modèle pour les objets pouvant être définis via le mot-clé class. Fondamentalement, la classe ES6 peut être considérée comme un simple sucre syntaxique. La plupart de ses fonctions peuvent être réalisées par ES5. La nouvelle méthode d'écriture de classe ne fait que rendre l'écriture de prototypes d'objets plus claire et plus proche de la syntaxe de la programmation orientée objet. >

Méthode d'écriture de base :

Notez que les méthodes d'écriture de ces deux méthodes dans cette classe sont différentes

class   test {
//第一种
Show() {
alert('show');
}
//第二种
//Show=()=>{
//}
}
var test1 = new test();
var  test2= new test();

La première méthode déclarée pointera vers le prototype de test

test1. Show=== test2.Show//true

La deuxième méthode déclarée pointera vers l'instance de test, et chaque instanciation générera une méthode Show.

test1. Show=== test2.Show//false

L'héritage est écrit comme suit, de sorte que newTest héritera de Show in test

S'il y a n'est pas newTest La déclaration de la méthode Show appellera la méthode Show dans le test de la classe parent. Si elle est déclarée, la méthode Show de newTest sera appelée. L'enfant appelle la méthode du parent en utilisant le mot-clé super pour y accéder, tel que

class    newTest  extends   test{
   Show() {
       super. Show();
       alert('newshow');
   }
}
 var  test=new  newTest  ();
 test. Show()

super Show();

• Fonction d'ordre supérieur
  La fonction d'ordre supérieur est appelée fonction d'ordre supérieur en anglais. Les fonctions JavaScript pointent en fait vers une variable. Étant donné que les variables peuvent pointer vers des fonctions et que les paramètres de fonction peuvent recevoir des variables, une fonction peut recevoir une autre fonction en tant que paramètre. Cette fonction est appelée fonction d'ordre supérieur. Pour faire simple, "une fonction d'ordre supérieur est une fonction qui peut prendre une fonction comme paramètre ou une fonction comme valeur de retour". En fait, l'application la plus typique est la fonction de rappel.

Les fonctions d'ordre élevé ont généralement les scénarios suivants

1. Rappel de fonction

2 Currying de fonction

$.get(‘’,{},function(data){

})

var   test=function(callback){
        callback.apply(this,arguments)

}

Premier dans une fonction La technique. Le fait de remplir plusieurs paramètres (puis de renvoyer une nouvelle fonction) s'appelle Currying. Cette définition peut être un peu difficile à comprendre. Regardons d'abord l'implémentation d'une simple fonction currying :

Ensuite, regardez. à l'appel à nouveau :

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

其实简单的解释就是currency函数里面定义一个局部变量arr数组,然后返回一个函数，返回的函数体里对变量arr进行了赋值，每次当函数传入参数的时候都会将参数push到arr里面，然后返回函数体，形成了一个闭包。当没有参数传入的时候就直接执行传入的sum函数，然后执行函数sum传入的的参数就是arr.

3.函数扩展

函数扩展一般是通过原型来扩展，传入一个回调函数，比如给Array扩展一个函数Filter代码如下:

Array.prototype.Filter=function(callback){
    …..
}

做过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;

函数节流/函数防抖

一般做前端时间比较长的人对这个概念比较熟了，但是刚接触的人估计会有点懵逼。

这两个概念都是优化高频率执行js代码的一种手段，来看下他们的基本概念

函数节流：函数在设定的时间间隔内最多执行一次

应用场景：高频率点击事件

var  isEnable=true;

document.getElementById("testSubmit").onclick=function(){  
if(!isEnable){           
return;
  }
  isEnable=false;
  setTimeout(function(){
        console.log("函数节流测试");
        isEnable = true;
  }, 500);
}

函数防抖：函数在一段时间内不再被调用的时候执行

应用场景：onresize onscroll事件，oninput事件

Var  timer=null;
Window. onscroll=function(){
     clearTimeout(timer);
     timer = setTimeout(function(){
     console.log("函数防抖测试");
    }, 500);
}

从上面两个事件可以看出来区别：

函数节流在第一次操作之后的500毫秒内再次点击就只执行一次，不会重置定时器，不会重新计时

函数防抖是在持续触发onscroll事件的时候会重置重置定时器，重新计时,直到不触发事件的500毫秒之后执行一次

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!