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

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

定义对象方法

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

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

JS 自执行函数

由于自己js基础知识薄弱,很多js的知识还没有掌握,所以接下来会经常写一些关于js基础知识的博客,也算给自己提个醒吧。js自执行函数,听到这个名字,首先会联想到函数

学习函数式编程 Monad

在函数式编程中,Monad 是一种结构化程序的抽象,我们通过三个部分来理解一下。Monad 定义,Monad 使用场景,Monad 一句话解释

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

CSS calc()函数的用法

CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。如果你使用过 CSS 预处理器,比如 SASS

ES6函数的扩展

在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。与解构赋值默认值结合使用参数默认值可以与解构赋值的默认值结合使用。

理解与使用JavaScript中的回调函数

在JavaScript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回。

js实现KB、MB、GB、TB单位转换

当函数参数值小于等于1000时,参数除以1000,即可得到最小单位kb,赋值给变量_integer;当_integer值大于1000时,kb值除以1000,即可得到mb,赋值给变量_integer;以此类推。

理解 JavaScript Mutation 突变和 PureFunction 纯函数

不可变性、纯函数、副作用,状态可变这些单词我们几乎每天都会见到,但我们几乎不知道他们是如何工作的,以及他们是什么,他们为软件开发带来了什么好处。在这篇文章中,我们将深入研究所有这些,以便真正了解它们是什么以及如何利用它们来提高我们的Web应用程序的性能。

JS函数的三种方式

函数,一段能够自动完成某些功能的代码块,函数的出现,既解决了重复使用重一功能的需求,又可以避免代码的臃肿性。使用函数有两个要求:必须调用后才可以执行;函数名不要和关键字以及系统函数相同;

点击更多...

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