微信小程序中函数的分类以及var that=this的作用

普通函数与箭头函数

// 执行正常 function 方法名() 会直接将函数提升到顶部所以此步成功
normalFun(2);
// 执行失败 因var会将arrowFun变量提升但赋值仍在原本行无法在赋值前调用
// arrowfun();
// 箭头函数
var arrowFun = ()=>{console.log(this)}
// 正常函数
function normalFun(a){this.a = a; console.log(this)}
// 定义对象cat有两个属性分别保存箭头函数和正常函数所定义的函数
var cat = {
    arrowfun: arrowFun,
    normalfun: normalFun
}
// 箭头函数所使用的this不会因调用域不同发生改变(会指向创建时作用域的this)
arrowFun(); // this =  window
cat.arrowfun()  // this = window
// 正常函数所使用this会跟随调用域不同发生改变
normalFun(1); // this = window
cat.normalfun(1); // this = cat
// 执行正常且this指针将指向自身
// 使用new以后会变成一个对象无法以函数方式调用,newNormal()
var newNormal = new normalFun(1);
console.log(newNormal.a);
// 下行代码报错:Uncaught ReferenceError: arrowfun is not defined
// 因箭头函数无法使用new方法调用因箭头函数无构造方法
// var newArrow = new arrowfun(); 
总结: 
1. 定义方式不同 
    箭头函数 ()=>{}
    正常函数 function name(){}
2. this指向不同 
    箭头函数所使用的this不会因调用域不同发生改变(会指向创建时作用域的this)
    正常函数所使用this会跟随调用域不同发生改变
3. 构造函数不同
    箭头函数无构造函数无法使用new方式
    正常函数有构造函数可以使用new方式但new后不再是函数而是对象
4. 变量提升不同
    箭头函数因会使用var来保存,所以会先将var变量名提升但赋值不会提升,所以无法在赋值前调用
    正常函数会直接提升到最顶部,所以可以在声明前调用

var that=this;

对于普通函数来说我们想要在函数中使用this的话,我们就要避免和函数的this冲突,因此我们把this赋给另外一个变量that,这样就不会冲突了。
对于回调函数来说,我们尽量使用箭头函数,这样即使不把this赋给that也没有问题

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狴犴ys

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值