当前位置:网站首页>Apprentissage avancé des fonctions en es6
Apprentissage avancé des fonctions en es6
2022-07-07 10:06:00 【Quand Xiaobai réussira - t - il?】
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.
边栏推荐
- Introduction to automated testing framework
- Deadlock caused by non clustered index in SQL Server
- Introduction to energy Router: Architecture and functions for energy Internet
- Enterprise practice | construction of banking operation and maintenance index system under complex business relations
- MySQL can connect locally through localhost or 127, but cannot connect through intranet IP (for example, Navicat connection reports an error of 1045 access denied for use...)
- ORM--数据库增删改查操作逻辑
- There is a problem using Chinese characters in SQL. Who has encountered it? Such as value & lt; & gt;` None`
- 字节跳动 Kitex 在森马电商场景的落地实践
- uboot机构简介
- 20排位赛3
猜你喜欢
随机推荐
Switching value signal anti shake FB of PLC signal processing series
Or in SQL, what scenarios will lead to full table scanning
C# 初始化程序时查看初始化到哪里了示例
The Himalaya web version will pop up after each pause. It is recommended to download the client solution
CentOS installs JDK1.8 and mysql5 and 8 (the same command 58 in the second installation mode is common, opening access rights and changing passwords)
20排位赛3
AI从感知走向智能认知
web3.0系列之分布式存储IPFS
Arcgis操作: 批量修改属性表
Why are social portals rarely provided in real estate o2o applications?
Win10安装VS2015
2020CCPC威海 J - Steins;Game (sg函数、线性基)
Win10 installation vs2015
Google Colab装载Google Drive(Google Colab中使用Google Drive)
Official media attention! The list of top 100 domestic digital collection platforms was released, and the industry accelerated the healthy development of compliance
【ORM框架】
sql 里面使用中文字符判断有问题,哪位遇到过?比如value<>`无`
Why does the starting service report an error when installing MySQL? (operating system Windows)
Introduction to energy Router: Architecture and functions for energy Internet
Software modeling and analysis