Apprentissage avancé des fonctions en es6

1、Définition de la fonction

//1.Fonction personnalisée（Fonctions nommées）
function fn(){

}
//2.Expression de la fonction（Fonction anonyme）
var fun = function(){
	console.log("fun");
}
fun();
//3.Utilisationnew Function('Paramètres1','Paramètres2','Corps fonctionnel')
var f = new Function('a','b','console.log(a+b)');
f(1,2);

La fonction appartient également à l'objet.

2、Appel de fonction

//1.Fonction normale
function fn(){
	console.log("this is a fun");
}
fn();//Ou adoptionfn.call();
//2.Méthode de l'objet
var o ={
	sayHi :function(){
		console.log("this is a object fun");
	}
}
o.sayHi();
//3.Constructeur
function Star(){
	console.log('constructor fun');
}
let ldh = new Star();
//4.BIND Event Function
btn.onclick = function(){
	console.log('btn click fun')
};//Cette fonction peut être appelée en cliquant sur le bouton
//5.Fonction Timer
setInterval(function(){console.log('setInterval fun')},1000);
//6.Exécuter la fonction maintenant
(function(){
	console.log('lijizhixing ');
})()

3、thisProblème de pointage

//1.Fonction normale-thisPointagewindow
function fn(){
	console.log('1fn:'+this);
}
window.fn();
//2.Méthode de l'objet-thisPointageoCet objet
var o ={
	sayHi :function(){
		console.log(this);
	}
}
o.sayHi();
//3.Constructeur-thisPointageldhCet objet d'instance
function Star(){
	console.log(this);
}
let ldh = new Star();
//4.BIND Event Function-thisPointagebtnCe bouton
btn.onclick = function(){
	console.log(this);
};
//5.Fonction Timer-thisPointagewindow
window.setTimeout(function(){console.log(this);},1000);
//6.Exécuter la fonction maintenant-thisPointagewindow
(function(){
	console.log(this);
})()

Résumé：

Mode d'appel	thisPointage
Fonction normale	window
Constructeur	Objet instance（ Les méthodes de l'objet prototype pointent également vers l'objet instance ）
Méthode objet	Objet auquel appartient la méthode
Liaison de l'événement	Lier l'objet de l'événement
Minuterie	window
Exécuter la fonction maintenant	window

4、Modifier l'intérieur de la fonctionthisPointage

Les plus courants sont:call()、apply()、bind()Trois approches

1、callMéthodes

var o ={
	name:'liming',
	fun:function(){console.log('object');}
}
function fn(a,b)
{
	console.log(this);
	console.log(a+b);
}
fn.call(o,1,2);//callComment utiliser
//Principales applications-Succession
function Father(uname,age)
{
    this.uname = uname;
    this.age = age;
}

function Son(uname,age)
{
    Father.call(this,uname,age);
    console.log('this name:'+this.uname);
}
let son1 = new Son('liming',18);

2、applyMéthodes

var o ={
	name:'liming',
	fun:function(){console.log('object');}
}
function fn(a,b)
{
	console.log(this);
	console.log(a+b);
}
fn.apply(o,[2,3]);//applyUtilisation de, Les paramètres suivants doivent être un tableau 
// Principaux cas d'application -UtilisationMathMax
var arr =[1,3,5,66,23,123];
let maxNum = Math.max.apply(Math,arr);
let minNum = Math.min.apply(Math,arr);
console.log("maxNum:"+maxNum+',minNum:'+minNum);

3、bindMéthodes（Utilisation maximale）

var o ={
	name:'liming',
	fun:function(){console.log('object');}
}
function fn(a,b)
{
	console.log(this);
	console.log(a+b);
}
//Méthode d'utilisation I
let newFn = fn.bind(o);//bindUtilisation de, Il n'appelle pas la fonction ,Renvoie la valeur spécifiée parthis Copie de la fonction originale de 
newFn(2,3);
//Méthode d'utilisation II
let newFn2 = fn.bind(o,2,3);//bindUtilisation de, Il n'appelle pas la fonction ,Renvoie la valeur spécifiée parthis Copie de la fonction originale de 
newFn2();

Cas d'application principal I

var o ={
    name:'liming',
    fun:function(){console.log('object');}
}
function fn(a,b)
{
    console.log(this);
    console.log(a+b);
}
//Utiliser
let newFn = fn.bind(o);//bindUtilisation de, Il n'appelle pas la fonction ,Renvoie la valeur spécifiée parthis Copie de la fonction originale de 
newFn(2,3);
//Principales applications
btn.onclick = function(){
    this.disabled = true;//Ici.thisPointer vers le bouton
    setTimeout(function(){
        this.disabled = false;//Ici.thisPointagewindow
    }.bind(this),3000);//bindAprès la liaison,Au - dessusthis Changer en bouton 
    //Équivalent à
    // let fun =function(){
    //     this.disabled = false;//Ici.thisPointagewindow
    // }.bind(this);
    // setTimeout(fun,3000);//bindAprès la liaison,Au - dessusthis Changer en bouton 
}

Points de différenciation：

• callEtapplyLa fonction est appelée,Et changer l'intérieur de la fonctionthisPointage.
• callEtapplyLes paramètres passés sont différents,callParamètres de passagearg1,arg2...,applyDoit être sous forme de tableau[arg1,arg2...]
• bindLa fonction n'est pas appelée,Il est possible de modifier lethisPointage

Principaux scénarios d'application：

• callHériter souvent
• applySouvent associé à un tableau. Par exemple, en utilisant un objet mathématique pour atteindre la valeur maximale minimale d'un tableau
• bindNe pas appeler la fonction,Mais je veux aussi changerthisPointage. Par exemple, changer l'intérieur d'un minuteur thisPointage.