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 + item);
    }
};
console.log(this === window); //true
obj.sum();//报错:Uncaught TypeError: Cannot read property 'reduce' of undefined at Object.sum

  运行时 this.array 是未定义的,调用 obj.sum 的时候,执行上下文里面的 this 仍然指向的是 window,原因是箭头函数把函数上下文绑定到了 window 上,this.array 等价于 window.array,显然后者是未定义的。

  修改方式:使用函数表达式或者方法简写(ES6 中已经支持)来定义方法,这样能确保 this 是在运行时是由包含它的上下文决定的。代码如下:

let obj = {
    array: [1, 2, 3],
    sum() {
        console.log(this === window); // false
        return this.array.reduce((result, item) => result + item);
    }
};
console.log(this === window); //true
console.log(obj.sum());//6

2.定义原型方法

  同样的规则适用于原型方法(prototype method)的定义,使用箭头函数会导致运行时的执行上下文错误。比如下面代码:

function Cat(name) {
    this.name = name;
}

Cat.prototype.sayCatName = () => {
    console.log(this === window); // => true
    return this.name;
};

const cat = new Cat('Tom');
console.log(cat.sayCatName()); // undefined

  使用传统的函数表达式就能解决问题,代码如下所示:

function Cat(name) {
    this.name = name;
}

Cat.prototype.sayCatName = function () {
    console.log(this === window); // => false
    return this.name;
}

const cat = new Cat('Tom');
console.log(cat.sayCatName()); // Tom

  sayCatName 变成普通函数之后,被调用时的执行上下文就会指向新创建的 cat 实例。

3. 定义事件回调函数

  箭头函数在声明的时候就绑定了执行上下文,要动态改变上下文是不可能的,在需要动态上下文的时候它的弊端就凸显出来。

  比如在客户端编程中常见的 DOM 事件回调函数(event listenner)绑定,触发回调函数时 this 指向当前发生事件的 DOM 节点,而动态上下文这个时候就非常有用,比如下面这段代码试图使用箭头函数来作事件回调函数。

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    console.log(this === window); // true
    this.innerHTML = 'Clicked button';
});

  在全局上下文下定义的箭头函数执行时 this 会指向 window,当单击事件发生时,this.innerHTML 就等价于 window.innerHTML,而后者是没有任何意义的。

  使用函数表达式就可以在运行时动态的改变 this,修正后的代码:

const button = document.getElementById('myButton');
button.addEventListener('click', function () {
    console.log(this === button); // true
    this.innerHTML = 'Clicked button';
});

4. 定义构造函数

  构造函数中的 this 指向新创建的对象,当执行 new Car() 的时候,构造函数 Car 的上下文就是新创建的对象,也就是说 this instanceof Car === true。显然,箭头函数是不能用来做构造函数, 实际上 JS 会禁止你这么做,如果你这么做了,它就会抛出异常。

  比如下面的代码就会报错:

const Message = (text) => {
    this.text = text;
};
const helloMessage = new Message('Hello World!');//报错: Throws "TypeError: Message is not a constructor"

  构造新的 Message 实例时,JS 引擎抛了错误,因为 Message 不是构造函数。可以通过使用函数表达式或者函数声明来声明构造函数修复上面的例子。

const Message = function(text) {
    this.text = text;
};
const helloMessage = new Message('Hello World!');
console.log(helloMessage.text); // 'Hello World!'

以上就是JavaScript哪些场景不能使用箭头函数的详细内容,更多关于JavaScript不能使用箭头函数的资料请关注我们其它相关文章!

(0)

相关推荐

  • JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法.分享给大家供大家参考,具体如下: 箭头函数在 JavaScript 里面,是 ES6(ES2015)才加入进来的.因为函数里有个像箭头一样的符号:=>,所以叫箭头函数,英文经常也会称为 Fat arrow functions,胖乎乎的箭头函数.这种函数也称为 lambda 表达式.箭头函数不能当作构造函数使用. 语法 一个箭头函数看起来像这样: const

  • 浅谈箭头函数写法在ReactJs中的使用

    ES7中的箭头函数写法真的是很方便,而现今ReactJs又非常流行而且好用,非常适合有Java面向对象经验的同学学习和使用,在使用Reacjs构建组件时,如果想要使用箭头函数写法定义函数该怎么办呢? 首先,如果你直接在React组件中使用箭头函数写法定义函数,编译是不会通过的,会报出语法错误. ERROR in ./modules/Repos.js Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lesso

  • JS中箭头函数与this的写法和理解

    前言 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进.this作为JavaScript中比较诡异的存在,许多文章对于this的解释也不尽相同,本篇文章试图厘清JS中函数与this的关系. 一.JS中函数的写法 1.常规函数的写法 在ES6语法之前,JS中的函数由function关键字.params参数和被花括号包裹的函数体组成.为了与后面说到的箭头函数相区别,我们先把这样的函数叫做常规函数,常规函数既可以用声明式写法也可以用赋

  • JavaScript ES6箭头函数使用指南

    胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性.有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上下文. 箭头函数的产生,主要由两个目的:更简洁的语法和与父作用域共享关键字this.接下来,让我们来看几个详细的例子. 新的函数语法 传统的JavaScript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须

  • JavaScript基础之this和箭头函数详析

    箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this. 由于箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this),他们的第一个参数会被忽略. 前言 阅读下面的内容要先看下<你不知道的javascript(上)>中的第二部分:this和对象原型(里面对于this指向的理论部分主要来源于该书). 问题 这周在写代码的时候,听同事在说箭头函数无法更改this的指向,并且使用下面代码进行验证: // (1)

  • 深入理解JavaScript 箭头函数

    JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法.通常,在JavaScript中,可以通过两种方式创建函数: 函数语句. 函数表达式. 可以如下所示创建函数语句: function add(num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum); 也可以创建相同功能的函数表达式,如下所示: var add = function (nu

  • JavaScript箭头函数_动力节点Java学院整理

    ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arrow Function 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句

  • JS箭头函数和常规函数之间的区别实例分析【 5 个区别】

    本文实例讲述了JS箭头函数和常规函数之间的区别.分享给大家供大家参考,具体如下: 在 JavaScript 中,你可以通过多种方式去定义函数. 第一种常用的方法是使用关键字 function: // 函数声明 function greet(who) { return `Hello, ${who}!`; } // 函数表达式 const greet = function(who) { return `Hello, ${who}`; } 代码中的函数声明和函数表达式被称为"常规函数". 从

  • JavaScript箭头函数中的this详解

    前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log("Hello, Fundebug!"); } 箭头函数指的是用=>定义的函数: var hello = () => { console.log("Hello, Fundebug!"); } JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不

  • JavaScript中的函数申明、函数表达式、箭头函数

    JavaScript中的函数可以通过几种方式创建,如下. // 函数声明 function getName() { return 'Michael' } // 函数表达式 const getName = function() { return 'Michael' } // 箭头函数(同样也是表达式) const getName = () => { return 'Michael' } 函数声明和表达式之间的差别是 JavaScript 解释器中存在一种变量声明被提升的机制,也就是说函数声明会被提

随机推荐