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

时间: 2018-11-15阅读: 1060标签: 函数

定义对象方法

js中对象方法的定义方式是在对象上定义一个指向函数的属性,当方法被调用的时候,方法内的this就会指向方法所属的对象。


1定义字面量方法

//1.定义字面量方法
const calculator = {
    array:[1,2,3],
    sum: ()=>{
        console.log(this,window);
        return this.array.reduce((result, item) => result+item);
    }
}
console.log(this,window);
calculator.sum()

因为运行的时候this.array未定义,调用calculator.sum时,执行上下文里的this仍指向的是window,原因是箭头函数把函数上下文绑定到了window上,this.array==window.array,后者又是未定义,所以会报错。


解决办法是使用普通函数,这样可以确保this是在运行时由包含它的上下文决定的:

const calculator = {
    array:[1,2,3],
    sum(){
        console.log(this,window);
        return this.array.reduce((result, item) => result+item);
    }
}
console.log(this,window);
calculator.sum();


2 定义原型方法

定义原型方法时,使用箭头函数会导致运行时的执行上下文错误

let Cat = (name)=>{
    this.name = name;
}
Cat.prototype.sayCatName = ()=>{
    console.log(this, window);
    return this.name;
}
 
const cat = new Dat('Kitty');
cat.sayCatName();//undefined
let Cat = function(name){
    this.name = name;
}
Cat.prototype.sayCatName = function(){
    console.log(this, window);
    return this.name;
}
 
const cat = new Cat('Kitty');
cat.sayCatName();//undefined


3 定义事件回调函数

箭头函数定义的上下文是不能改的,这样执行的时候this就等同于window,这样的话是没有任何意义的

var btn = document.getElementById('btn');
btn.addEventListener('click',()=>{
    console.log(this, window);
    this.innerhtml = 'click btn';
})
btn.addEventListener('click',function(){
    console.log(this, window);
    this.innerhtml = 'click btn';
})


4 定义构造函数

const Book = (name)=>{
    this.name = name;
}
 
const book = new Book('John');
console.log(book.name);//arrow.html:75 Uncaught TypeError: Book is not a constructor
const Book = function(name){
    this.name = name;
}
 
const book = new Book('John');
console.log(book.name);


5 追求过短的代码

刻意追求过短的代码,可能会给代码阅读和逻辑理解带来困难。

const multiply = (a, b) => b === undefined ? b => a * b : a * b;
const double = multiply(2);
double(3);      // => 6
multiply(2, 3); // => 6
function multiply(a, b) {
    if (b === undefined) {
        return function (b) {
            return a * b;
        }
    }
    return a * b;
}
 
const double = multiply(2);
double(3); // => 6
multiply(2, 3); // => 6


来源:https://www.cnblogs.com/huyanluanyu/archive/2018/11/14/9958676.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1345

关闭

高阶函数

filter用于对数组进行过滤。 它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意:filter()不会对空数组进行检测、不会改变原始数组

js函数常见的写法以及调用方法

本文详细的介绍了5种js函数常见的写法以及调用的方法,平时看别人代码的时候总是看到各种不同风格的js函数的写法。不明不白的,找了点资料,做了个总结,需要的小伙伴可以看看,做个参考

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

箭头函数带来了很多便利。恰当的使用箭头函数可以让我们避免使用早期的.bind()函数或者需要固定上下文的地方并且让代码更加简洁。箭头函数也有一些不便利的地方。我们在需要动态上下文的地方不能使用箭头函数:定义需要动态上下文的函数

玩转Js函数式编程

最近和一些同学讨论了函数式编程,很多同学总觉得听起来很高大上,但用起来却无从下手。于是我抽时间捋了捋,将平时工作中用到的函数式编程案例和思想整理了出来

Vue.js render函数那些事儿

大多时候,我会使用template, vue单文件去渲染组件。虽然知道Vue中有个render函数,但却很少在项目中去主动使用它。使用最多的地方是在使用一些UI框架的时候,比如iview table中的按钮操作,会使用到render函数

javascript函数记忆

记忆的定义基本上描述了实施该技术的有用方案。 当您拥有一个昂贵的函数时,如果给定相同的参数,该函数将始终导致相同的值,则缓存结果并在下次调用它时返回缓存的值非常有效。 这样,宝贵的时间不会浪费在重新计算值上

JavaScript中函数的调用和this的指向

普通函数调用 this 指向 window,方法调用 this 指向 调用该方法的对象,作为构造函数的调用 构造函数内部的this指向由该构造函数创建的对象,作为事件的处理函数 触发该事件的对象

云函数

云函数提供了一种 直接在云上运行,无状态的、短暂的、由事件触发的代码 的能力。ServerLess,即无服务器架构,也叫轻服务,它包含两个部分,如下:

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

8个CSS函数的小技巧

CSS现在已经能实现比网站开发者预料到的更多的功能,并且随着时间的推移,样式表语言越来越强大,能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!