何时不使用箭头函数

举报
搞前端的半夏 发表于 2022/01/23 22:14:10 2022/01/23
【摘要】 箭头函数不会取代普通函数!就像flexbox和gridbox的出现并没有完全取代float布局。本文主要介绍几个不使用箭头函数的场景。 点击事件处理函数假设有一个按钮,当点击按钮的时候,会变成绿色。button { font-size: 20px;}.toggle { background: green;}<button id="toggle">变色</button>如果我们使用箭头: ...

箭头函数不会取代普通函数!就像flexbox和gridbox的出现并没有完全取代float布局。本文主要介绍几个不使用箭头函数的场景。

点击事件处理函数

假设有一个按钮,当点击按钮的时候,会变成绿色。

button {
	font-size: 20px;
}
.toggle {
	background: green;
}

<button id="toggle">变色</button>

image-20220123212022401

如果我们使用箭头:

   const button = document.querySelector("#toggle");
      button.addEventListener("click", () => {
        this.classList.toggle("toggle");
      });

当我们点按钮,会直接报错:

image-20220123212045225

提示我们在this上找不到toggle。在肩头函数上输出this,会发现,此时的this是window对象。this并没有指向button。

image-20220123212348268

我们将箭头函数改成普通函数。

const button = document.querySelector("#toggle");
    button.addEventListener("click", function () {
   		 console.log(this);
    this.classList.toggle("toggle");
});

此时this指向button,并且button变成绿色:

image-20220123212609153

image-20220123212623162

对象方法

我们有一个对象,它内部有一个函数,可以用来给变量赋值。

const user = {
    name: '搞前端的半夏',
    changeName: () => {
        this.name='新名字';
    }
}

当我们执行user.changeName(),希望改变name,但是并没有。

image-20220123213011730

将箭头函数替换成普通函数。可以成功修改name的值!

const user = {
    name: '搞前端的半夏',
    changeName: function() {
        this.name='新名字';
    }
}

image-20220123213219758

原型方法

我们定义一个User类。

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

我们通过User类,创建user。

const user = new User('搞前端的半夏',18);

输出user可以看到,name和age成功赋值。

image-20220123214936258

下面我们在User.prototype添加一个箭头方法。

User.prototype.consoleUser=()=>{
 console.log(this.name+"的年龄是"+this.age)
}

当我们使用user调用consoleUser并没有输出结果。

image-20220123215616046

将箭头函数修改成普通函数:

User.prototype.consoleUser=funtion(){
 console.log(this.name+"的年龄是"+this.age)
}

image-20220123215802975

当需要使用arguments时

上面的几个场景,都有this有关,这个场景是跟函数的arguments参数有关。

定义一个箭头函数:

const consoleArgs = ()=> {
    const args = Array.from(arguments);
    console.log(args)
     args.forEach(item => {
      console.log(item);   
 })
}

调用此函数

consoleArgs(1,2,3)

image-20220123220451427

此时直接报错,提示arguments没有定义。

当修改为普通函数:则可以正常输出

const consoleArgs = function() {
    const args = Array.from(arguments);
    console.log(args)
     args.forEach(item => {
      console.log(item);   
 })
}

image-20220123220620374

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。