js中什么时候不能使用箭头函数

目录
  • 箭头函数
  • 箭头函数有什么缺点?
  • 什么时候不能使用箭头函数?
    • 1. 对象方法中,不适用箭头函数
    • 为什么对象方法中,箭头函数的this指向不是这个对象?
    • 2. 原型方法中,不适用箭头函数
    • 3. 构造函数也不行!
    • 4. 动态上下文中的回调函数
    • 5. Vue 生命周期和 method 中也不能使用箭头函数
  • 划重点

箭头函数

箭头函数是和我们工作密切相关的东西;可以说箭头函数的诞生,给我们的工作带来了极大的便利。但是箭头函数有什么缺点?什么时候不能使用箭头函数? 这你了解吗?
我们觉得箭头函数很高级,可以规避 this 的问题,所有的场景下都是用箭头函数。在不能使用的场景下使用了,出现了问题,你还不知道是什么问题,那这不是瞎添乱吗!是不是!

这里给大家先提出一个问题:

const obj = {
    name: '张三',
    getName() {
        return this.name
    },
    getName1: () => {
        return this.name
    }
}
obj.__proto__.getName2 = function() {
    return this.name
}
obj.__proto__.getName3 = () => {
    return this.name
}
console.log('普通函数',obj.getName())
console.log('普通函数',obj.getName2())
console.log('箭头函数',obj.getName1())
console.log('箭头函数',obj.getName3())

大家觉得会输出什么呢?

先悄悄思考一下!

3,2,1 公布答案!

如果答错了,也别灰心,毕竟网络有着35的延迟,影响着你的操作和思考,看完这篇文章,保证你就不会答错了!

箭头函数有什么缺点?

  • 没有 arguments,如果要用,可以用 rest 参数代替。 这里我们定义一个箭头函数和一个普通函数还有一个使用 rest 参数的箭头函数:

    const fn1 = () => {
        console.log('arguments', arguments)
    }
    fn1(100, 200)
    
    function fn2(){
        console.log('arguments', arguments)
    }
    fn2(100, 200)
    
    const fn3 = (...values) => {
        console.log('values', values)
    }
    fn3(100, 200)
    

  • 无法通过 apply、call、bind 改变this指向 这里我们在定义一个箭头函数和一个普通函数
    const fn3 = () => {
        console.log('this', this)
    }
    fn3()
    
    function fn4(){
        console.log('this', this)
    }
    fn4()
    

    箭头函数的this就是他父容器的this,不是在执行的时候确定的,而是在定义的时候确定的。

  • 如上图,我们可以发现,箭头函数的两次执行的 this 都是指向了 Windows使用call并没有发生改变,而普通函数第一次是指向了Windows第二次则是变成了我们传入的

什么时候不能使用箭头函数?

1. 对象方法中,不适用箭头函数

const obj = {
    name: '张三',
    getName() {
        return this.name
    },
    getName1: () => {
        return this.name
    }
}

我们在对象中定义了普通函数:getName箭头函数 getName1,接下来我们来调用一下:

console.log('普通函数',obj.getName())
console.log('箭头函数',obj.getName1())

这里给大家默想3s输出什么?

公布答案:

我们发现箭头函数好像并没有获取到值诶!

为什么对象方法中,箭头函数的this指向不是这个对象?

  • this 永远指向函数的调用者
  • 在箭头函数中,this 指向的是定义时所在的对象,而不是使用时所在的对象。换句话说,箭头函数没有自己的 this,而是继承父作用域中的 this。

obj.getName()this指向函数的调用者,也就是obj实例,因此this.name = "张三"

getName1()通过箭头函数定义,而箭头函数是没有自己的this,会继承父作用域的this

因此obj.getName1()执行时,此时的作用域指向window,而window没有定义age属性,所有报空。

从例子可以得出:对象中定义的函数使用箭头函数是不合适的

2. 原型方法中,不适用箭头函数

const obj = {
    name: '张三',
}
obj.__proto__.getName = function() {
    return this.name
}
obj.__proto__.getName1 = () => {
    return this.name
}

我们又又又在对象中定义了普通函数:getName箭头函数 getName1,接下来我们来调用一下:

console.log(obj.getName())
console.log(obj.getName1())

这里再再再给大家默想3s输出什么?

bang bang bang 公布答案:

为什么?

出现问题的原因是this指向window对象,这和使用箭头函数在对象中定义方法十分类似。

3. 构造函数也不行!

我们又又又定义了普通的构造函数:Foo箭头函数 Foo1,接下来我们来调用一下:

function Foo (name, sex) {
    this.name = name
    this.sex = sex
}
const Foo1 = (name, sex) => {
    this.name = name
    this.sex = sex
}
console.log('普通的构造函数:', new Foo('张三', '男'))
console.log('箭头函数:', new Foo1('张三', '男'))

不仅不行,还报错了呢!

为什么?

构造函数是通过 new 关键字来生成对象实例,生成对象实例的过程也是通过构造函数给实例绑定 this 的过程,而箭头函数没有自己的 this。因此不能使用箭头作为构造函数,也就不能通过 new 操作符来调用箭头函数。

4. 动态上下文中的回调函数

比如,我们需要给一个按钮添加点击事件:

const btn1 = document.getElementById('btn1')
btn1.addEventListener('click', () => {
    this.innerHTML = 'clicked'
})

如果我们在回调中不需要使用到 this,那就啥问题也没有,但是!使用到了 this,那么问题就大大的了!

为什么呢?

箭头函数的 this 指向的是他的父作用域(这里就指向了 window),而不是指向这个button。这时候我们需要使用普通函数才可以。

5. Vue 生命周期和 method 中也不能使用箭头函数

为什么不行呢?

Vue 本质上是一个对象,我们说过对象方法中,不适用箭头函数。他的本质上的和对象方法中,不适用箭头函数是一样的。

那么我有一个问题: Vue不行,作为大热框架之一的 react 行吗?

回答是: react 行

因为 Vue组件本质上是一个 JS 对象;React 组件(非Hooks)他本质上是一个 ES6 的 class

不信的话我们测试一下就知道了

class Man {
    constructor(name, city) {
        this.name = name
        this.city = city
    }
    getName = () => {
        return this.name
    }
}
const f = new Man('李四','上海')
console.log(f.getName())

划重点

  • 要熟练使用箭头函数,也要对函数 this(重点) 敏感
  • Vue组件本质上是一个 JS 对象;React 组件(非Hooks)他本质上是一个 ES6 的 class,两者不同

到此这篇关于js中什么时候不能使用箭头函数的文章就介绍到这了,更多相关js 箭头函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解JavaScript什么情况下不建议使用箭头函数

    目录 this指向原理 问题的由来 内存的数据结构 函数 环境变量 箭头函数的缺点 不适用的场景 总结 箭头函数作为ES6新增的语法,在使用时不仅能使得代码更加简洁,而且在某些场景避免this指向问题.但是箭头函数不是万能的,也有自己的缺点以及不适用的场景,虽然可以解决this只想问题,但是也可能会带来this指向问题.具体场景具体分析,本文就深入探讨箭头函数. 箭头函数没有自己的this,其this取决于上下文中定义的this. this指向原理 问题的由来 学懂 JavaScript 语言,

  • JavaScript哪些场景不能使用箭头函数

    目录 1. 定义对象方法 2.定义原型方法 3. 定义事件回调函数 4. 定义构造函数 1. 定义对象方法  JS 中对象方法的定义方式是在对象上定义一个指向函数的属性,当方法被调用的时候,方法内的 this 就会指向方法所属的对象. let obj = { array: [1, 2, 3], sum: () => { console.log(this === window); // true return this.array.reduce((result, item) => result

  • js中什么时候不能使用箭头函数

    目录 箭头函数 箭头函数有什么缺点? 什么时候不能使用箭头函数? 1. 对象方法中,不适用箭头函数 为什么对象方法中,箭头函数的this指向不是这个对象? 2. 原型方法中,不适用箭头函数 3. 构造函数也不行! 4. 动态上下文中的回调函数 5. Vue 生命周期和 method 中也不能使用箭头函数 划重点 箭头函数 箭头函数是和我们工作密切相关的东西:可以说箭头函数的诞生,给我们的工作带来了极大的便利.但是箭头函数有什么缺点?什么时候不能使用箭头函数? 这你了解吗?我们觉得箭头函数很高级,

  • JS中setTimeout的巧妙用法前端函数节流

    什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等等事情,那么这时候窗口缩放的时候,有可能连续发多个请求,这并不是我们想要的,或者是说我们常见的鼠标移入移出tab切换效果,有时候连续且移动的很快的时候,会有闪烁的效果,这时候我们就可以使用函数节流来操作.大家都知道,DOM的操作会很消耗或影响性能的,如果是说在窗口缩放的时候,为元素绑定大量的dom操作的话,会引发大量的连续计算,比如

  • 关于JS中setTimeout()无法调用带参函数问题的解决方法

    本文实例分析了JS中setTimeout()无法调用带参函数问题的解决方法.分享给大家供大家参考,具体如下: 解决方法:重写setTimeout() 方法,需要用到闭包函数.如下: var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay){ if (typeof fRef == 'function') { var argu = Array.prototype.slice.call(arguments, 2);

  • js中escape对应的C#解码函数 UrlDecode

    js中escape对应的C#解码函数 System.Web.HttpUtility.UrlDecode(s) //注意编码 需要注意的几点: 1.HttpUtility.UrlEncode,HttpUtility.UrlDecode是静态方法,而Server.UrlEncode,Server.UrlDecode是实例方法. 2.Server是HttpServerUtility类的实例,是System.Web.UI.Page的属性. 3.用HttpUtility.UrlEncode编码后的字符串和

  • JS中注入eval, Function等系统函数截获动态代码

    现在很多网站都上了各种前端反爬手段,无论手段如何,最重要的是要把包含反爬手段的前端javascript代码加密隐藏起来,然后在运行时实时解密动态执行. 动态执行js代码无非两种方法,即eval和Function.那么,不管网站加密代码写的多牛,我们只要将这两个方法hook住,即可获取到解密后的可执行js代码. 注意,有些网站会检测eval和Function这两个方法是否原生,因此需要一些小花招来忽悠过去. 挂钩代码 首先是eval的挂钩代码: (function() { if (window._

  • JS中处理与当前时间间隔的函数代码

    复制代码 代码如下: <script type="text/javascript"> //计算一个日期字符串与当前日期相差值 //输入的参数形式如:2012-12-12 12:12:12 //返回相差值的字符串 function GetDateDiff(datetime) { // 可以将2012 - 12 - 12 12 : 12 : 12字符串转为JS中的时期对象, // 因为默认情况下只把持2000 / 05 / 05这样形式的字符串转为时间对象 var dateBe

  • JS中如何实现Laravel的route函数详解

    大家应该都知道在Laravel的路由模块里,我们可以给每一个路由设定一个名字,比如: Route::get('/blog/{blog}', 'BlogController@show')->name('blog.show') 然后就可以通过 route('blog.show', ['blog' => 1]) 来获取到这个路由的访问地址,后端跳转可以用 return redirect()->route('blog.show', ['blog' => 1]); 这样做的好处是如果发生ur

  • js中格式化日期时间型数据函数代码

    例如: 现有一字符串为: var dt="2010-1-1 12:20:20"; 第一步:将其转换成日期时间型数据 复制代码 代码如下: var newDt=new Date(dt.replace("-","/")); 第二步:格式化数据成"yyyy-MM-dd" (1)扩展Date 复制代码 代码如下: Date.prototype.format = function(format){ var o = { "M+

  • JS什么场景不适合箭头函数

    概述 这些年来,ES6 将js的可用性提升到一个新的水平时: 箭头函数.类等等,这些都很棒. 箭头函数是最有价值的新功能之一,有很多好文章描述了它的上下文透明性和简短的语法. 但每个事务都有两面.通常,新特性会带来一些混乱,其中之一就是箭头函数被误导了.本文将介绍一些场景,在这些场景中,你应该绕过箭头函数,转而使用良好的旧函数表达式或较新的简写语法.并且要注意缩短代码,因为这会影响代码的可读性. 定义对象上的方法 在js中,方法是存储在对象属性中的函数.当调用该方法时,this将指向该方法所属的

  • angular.js和vue.js中实现函数去抖示例(debounce)

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间.本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖. angular.js中解决方案 把去抖函数写成一个service,方便多处调用: .factory('debounce', ['$timeout','$q', function($timeou

随机推荐