当前位置:网站首页>Advanced function learning in ES6
Advanced function learning in ES6
2022-07-07 10:06:00 【When can Xiaobai advance to success】
1、 Function definition
//1. Custom function ( Name the function )
function fn(){
}
//2. Function expression ( Anonymous functions )
var fun = function(){
console.log("fun");
}
fun();
//3. utilize new Function(' Parameters 1',' Parameters 2',' The body of the function ')
var f = new Function('a','b','console.log(a+b)');
f(1,2);
Functions also belong to objects .
2、 Function call
//1. Ordinary function
function fn(){
console.log("this is a fun");
}
fn();// Or adopt fn.call();
//2. Object method
var o ={
sayHi :function(){
console.log("this is a object fun");
}
}
o.sayHi();
//3. Constructors
function Star(){
console.log('constructor fun');
}
let ldh = new Star();
//4. Binding event functions
btn.onclick = function(){
console.log('btn click fun')
};// Click the button to call this function
//5. Timer Functions
setInterval(function(){console.log('setInterval fun')},1000);
//6. Immediate execution function
(function(){
console.log('lijizhixing ');
})()
3、this Direction problem of
//1. Ordinary function -this Point to window
function fn(){
console.log('1fn:'+this);
}
window.fn();
//2. Object method -this Point to o This object
var o ={
sayHi :function(){
console.log(this);
}
}
o.sayHi();
//3. Constructors -this Point to ldh This instance object
function Star(){
console.log(this);
}
let ldh = new Star();
//4. Binding event functions -this Point to btn This button
btn.onclick = function(){
console.log(this);
};
//5. Timer Functions -this Point to window
window.setTimeout(function(){console.log(this);},1000);
//6. Immediate execution function -this Point to window
(function(){
console.log(this);
})()
summary :
Call mode | this Point to |
Ordinary function | window |
Constructors | Instance object ( The methods in the prototype object also point to the instance object ) |
Object methods | The object of this method |
Event binding | Bind event object |
Timer | window |
Immediate execution function | window |
4、 Change function interior this Point to
Commonly used call()、apply()、bind() Three methods
1、call Method
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);//call How to use
// Main application - Inherit
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、apply Method
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]);//apply Usage of , The following parameters must be arrays
// Main application cases - utilize Math For maximum
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、bind Method ( Most used )
var o ={
name:'liming',
fun:function(){console.log('object');}
}
function fn(a,b)
{
console.log(this);
console.log(a+b);
}
// Use method 1
let newFn = fn.bind(o);//bind Usage of , He doesn't call functions , Returns the specified this Copy of the original function of
newFn(2,3);
// Use method 2
let newFn2 = fn.bind(o,2,3);//bind Usage of , He doesn't call functions , Returns the specified this Copy of the original function of
newFn2();
Main application case 1
var o ={
name:'liming',
fun:function(){console.log('object');}
}
function fn(a,b)
{
console.log(this);
console.log(a+b);
}
// Use
let newFn = fn.bind(o);//bind Usage of , He doesn't call functions , Returns the specified this Copy of the original function of
newFn(2,3);
// Main application
btn.onclick = function(){
this.disabled = true;// there this Pointing button
setTimeout(function(){
this.disabled = false;// there this Point to window
}.bind(this),3000);//bind After binding , above this Change to button
// Equivalent to
// let fun =function(){
// this.disabled = false;// there this Point to window
// }.bind(this);
// setTimeout(fun,3000);//bind After binding , above this Change to button
}
Difference point :
- call and apply Will call functions , And change the inside of the function this Point to .
- call and apply The parameters passed are different ,call Pass parameters arg1,arg2...,apply Must be in array form [arg1,arg2...]
- bind Does not call function , You can change the internal of a function this Point to
Main application scenarios :
- call Often do inheritance
- apply Often associated with arrays . For example, with the help of mathematical objects to achieve the maximum and minimum values of arrays
- bind Don't call functions , But also want to change this Point to . For example, change the timer's internal this Point to .
边栏推荐
- Detailed explanation of diffusion model
- 终于可以一行代码也不用改了!ShardingSphere 原生驱动问世
- 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)
- Flinkcdc failed to collect Oracle in the snapshot stage. How do you adjust this?
- Using keras in tensorflow to build convolutional neural network
- The Himalaya web version will pop up after each pause. It is recommended to download the client solution
- 官媒关注!国内数字藏品平台百强榜发布,行业加速合规健康发展
- Pytest learning - dayone
- Guys, have you ever encountered the case of losing data when Flink CDC reads mysqlbinlog? Every time the task restarts, there is a probability of losing data
- Huffman encoded compressed file
猜你喜欢
The landing practice of ByteDance kitex in SEMA e-commerce scene
虚数j的物理意义
How will fashion brands enter the meta universe?
Elaborate on MySQL mvcc multi version control
Arthas simple instructions
字节跳动 Kitex 在森马电商场景的落地实践
ORM模型--数据记录的创建操作,查询操作
一大波开源小抄来袭
Sqlplus garbled code problem, find the solution
arcgis操作:dwg数据转为shp数据
随机推荐
Introduction to automated testing framework
MongoDB创建一个隐式数据库用作练习
Arcgis操作: 批量修改属性表
In addition to the objective reasons for overtime, what else is worth thinking about?
ES6中的函数进阶学习
Software modeling and analysis
Memory ==c language 1
CDZSC_2022寒假个人训练赛21级(2)
Delete a record in the table in pl/sql by mistake, and the recovery method
2016 CCPC Hangzhou Onsite
内存==c语言1
C socke server, client, UDP
How to become a senior digital IC Design Engineer (5-2) theory: ULP low power design technology (Part 1)
剑指 Offer II 107. 矩阵中的距离
Before joining the chain home, I made a competitive product analysis for myself
反卷积通俗详细解析与nn.ConvTranspose2d重要参数解释
洛谷P2482 [SDOI2010]猪国杀
一大波开源小抄来袭
Huffman encoded compressed file
有没有大佬帮忙看看这个报错,有啥排查思路,oracle cdc 2.2.1 flink 1.14.4