当前位置:网站首页>ES6中的函数进阶学习
ES6中的函数进阶学习
2022-07-07 07:20:00 【小白啥时候能进阶成功】
1、函数定义方式
//1.自定义函数(命名函数)
function fn(){
}
//2.函数表达式(匿名函数)
var fun = function(){
console.log("fun");
}
fun();
//3.利用new Function('参数1','参数2','函数体')
var f = new Function('a','b','console.log(a+b)');
f(1,2);
函数也属于对象。
2、函数的调用
//1.普通函数
function fn(){
console.log("this is a fun");
}
fn();//或采用fn.call();
//2.对象的方法
var o ={
sayHi :function(){
console.log("this is a object fun");
}
}
o.sayHi();
//3.构造函数
function Star(){
console.log('constructor fun');
}
let ldh = new Star();
//4.绑定事件函数
btn.onclick = function(){
console.log('btn click fun')
};//点击了按钮就可以调用这个函数
//5.定时器函数
setInterval(function(){console.log('setInterval fun')},1000);
//6.立即执行函数
(function(){
console.log('lijizhixing ');
})()
3、this的指向问题
//1.普通函数-this指向window
function fn(){
console.log('1fn:'+this);
}
window.fn();
//2.对象的方法-this指向o这个对象
var o ={
sayHi :function(){
console.log(this);
}
}
o.sayHi();
//3.构造函数-this指向ldh这个实例对象
function Star(){
console.log(this);
}
let ldh = new Star();
//4.绑定事件函数-this指向btn这个按钮
btn.onclick = function(){
console.log(this);
};
//5.定时器函数-this指向window
window.setTimeout(function(){console.log(this);},1000);
//6.立即执行函数-this指向window
(function(){
console.log(this);
})()
总结:
调用方式 | this指向 |
普通函数 | window |
构造函数 | 实例对象(原型对象中的方法也指向实例对象) |
对象方法 | 该方法所属对象 |
事件绑定 | 绑定事件对象 |
定时器 | window |
立即执行函数 | window |
4、改变函数内部this指向
常用的有call()、apply()、bind()三种方法
1、call方法
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的使用方法
//主要应用-继承
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方法
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的用法,后面参数必须为数组
//主要应用案例-利用Math求最大值
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方法(使用最多)
var o ={
name:'liming',
fun:function(){console.log('object');}
}
function fn(a,b)
{
console.log(this);
console.log(a+b);
}
//使用方法一
let newFn = fn.bind(o);//bind的用法,他不调用函数,返回由指定this的原函数的拷贝
newFn(2,3);
//使用方法二
let newFn2 = fn.bind(o,2,3);//bind的用法,他不调用函数,返回由指定this的原函数的拷贝
newFn2();
主要应用案例一
var o ={
name:'liming',
fun:function(){console.log('object');}
}
function fn(a,b)
{
console.log(this);
console.log(a+b);
}
//使用
let newFn = fn.bind(o);//bind的用法,他不调用函数,返回由指定this的原函数的拷贝
newFn(2,3);
//主要应用
btn.onclick = function(){
this.disabled = true;//这里的this指向按钮
setTimeout(function(){
this.disabled = false;//这里的this指向window
}.bind(this),3000);//bind绑定后,上面的this改为了按钮
//等价于
// let fun =function(){
// this.disabled = false;//这里的this指向window
// }.bind(this);
// setTimeout(fun,3000);//bind绑定后,上面的this改为了按钮
}
区别点:
- call和apply会调用函数,并且改变函数内部this指向。
- call和apply传递的参数不一样,call传递参数arg1,arg2...,apply必须是数组形式[arg1,arg2...]
- bind不会调用函数,可以改变函数内部的this指向
主要应用场景:
- call经常做继承
- apply经常和数组有关系。例如借助数学对象实现数组最大值最小值
- bind不调用函数,但是还想改变this指向。例如改变定时器内部的this指向。
边栏推荐
- 基础篇:带你从头到尾玩转注解
- Pit using BigDecimal
- 根据热门面试题分析Android事件分发机制(一)
- 【ORM框架】
- Basic use of JMeter to proficiency (I) creation and testing of the first task thread from installation
- MongoDB创建一个隐式数据库用作练习
- La différence entre viewpager 2 et viewpager et la mise en œuvre de la rotation viewpager 2
- What development models did you know during the interview? Just read this one
- China's first electronic audio category "Yamano electronic audio" digital collection is on sale!
- Win10安装VS2015
猜你喜欢
Web3.0 series distributed storage IPFs
Qualifying 3
喜马拉雅网页版每次暂停后弹窗推荐下载客户端解决办法
arcgis操作:dwg数据转为shp数据
[untitled]
Official media attention! The list of top 100 domestic digital collection platforms was released, and the industry accelerated the healthy development of compliance
Win10安装VS2015
基于智慧城市与储住分离数字家居模式垃圾处理方法
ORM--逻辑关系与&或;排序操作,更新记录操作,删除记录操作
基础篇:带你从头到尾玩转注解
随机推荐
**Grafana installation**
Delete a record in the table in pl/sql by mistake, and the recovery method
运用tensorflow中的keras搭建卷积神经网络
request对象对请求体,请求头参数的解析
AI moves from perception to intelligent cognition
JS逆向教程第一发
Check the example of where the initialization is when C initializes the program
中国首款电音音频类“山野电音”数藏发售来了!
Natapp intranet penetration
小程序弹出半角遮罩层
大佬们,请问 MySQL-CDC 有什么办法将 upsert 消息转换为 append only 消
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
C# Socke 服务器,客户端,UDP
[4g/5g/6g topic foundation-146]: Interpretation of white paper on 6G overall vision and potential key technologies-1-overall vision
Huffman encoded compressed file
Sword finger offer II 107 Distance in matrix
[4g/5g/6g topic foundation -147]: Interpretation of the white paper on 6G's overall vision and potential key technologies -2-6g's macro driving force for development
The industrial chain of consumer Internet is actually very short. It only undertakes the role of docking and matchmaking between upstream and downstream platforms
Can flycdc use SqlClient to specify mysqlbinlog ID to execute tasks
基于智慧城市与储住分离数字家居模式垃圾处理方法