关闭

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

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

定义对象方法

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

关闭

Js方法/函数重载的实现

函数重载这项特性允许创建数项名称相同但输入输出类型或个数不同的子程序函数重载是强类型语言的特性,虽然 js 是弱类型语言,我们可以通过一些方法实现函数重载。

JS如何重写一个函数?

分享一些自己在开发上遇到的问题,比如我们页面上用了大量的打印语句,但是在某些时候,我们不想要了。我们删除这里的代码,如果太多了,那工作量太大好累,想想都不想干

javascript中的回调函数

回调函数是每个 JS 开发人员都应该知道的概念之一。 回调用于数组,计时器函数,promise,事件处理程序等中。

JavaScript高阶函数

Javascript中的函数本质上都指向某个变量,既然变量可以指向函数,函数的参数可以接受变量,那么函数是不是可以可以作为另一个函数的入参?因为Javascript是一门弱类型语言,不会对函数输入值和函数的输出值进行强定义和类型检查

wxml页面中调用自定义的JavaScript函数

使用到wxs文件,然后在wxs文件里面添加numberToFix函数;然后在需要使用numberToFix方法的wxml页面引入该wxs文件,然后就可以通过{{numberToFix(persent)}}这种方式调用了

js类的constructor中不支持异步函数吗?

如果是普通函数,可以用async 和await来解决你的问题。但你这个是在constructor里,constructor 的作用是返回一个对像实例,如果加了async就变成返回一个promise了,所以这个方法行不通

js查找和筛选的几种方式

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。find() 方法为数组中的每个元素都调用一次函数执行;findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

js中sort函数用法总结_sort排序算法原理

js中sort方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。如果要得到自己想要的结果,不管是升序还是降序,就需要提供比较函数了。该函数比较两个值的大小,然后返回一个用于说明这两个值的相对顺序的数字

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

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

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

点击更多...

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