【前端入门】巨坑!JavaScript'this'的函数内部调用深坑!学习高阶函数的第一天!

123 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情

  • 函数方法
  • 高阶函数1

函数的‘方法’

在一个对象中绑定函数,称为这个对象的方法,this是一个特殊变量,一个关键字,它始终指向当前对象。

JavaScript的函数内部如果调用了this,那么这个this到底指向谁?

答案是,视情况而定!

以例题为例子:

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var ABC = {
    name: 'ABC',
    birth: 2020,
    age: getAge
};

ABC.age(); // 2, 正常结果
getAge(); // NaN

如果以对象的方法形式调用,比如ABC.age(),该函数的this指向被调用的对象。 如果单独调用函数,比如getAge(),此时,该函数的this指向全局对象,也就是window

要保证this指向正确,必须用obj.xxx()的形式调用! 这里就是只能人名.age调用了

保证正确且便捷的方法

大神们推荐,用一个that变量首先捕获this

age: function () {
    var that = this; // 在方法内部一开始就捕获this
    function getAgeFromBirth() {
        var y = new Date().getFullYear();
        return y - that.birth; // 用that而不是this
    }
    return getAgeFromBirth();
}

var that = this,在最开头就先牢牢抓住this的对象,后面可以放心用that来在方法内部定义其他函数

高阶函数 map & reduce& filter

其实学习高阶函数,就是让函数的参数能够接收别的函数。

map函数大概意思就像下图,分别作用于一个数组里,按顺序。map()传入的参数是函数对象本身。map()作为高阶函数,事实上它把运算规则抽象了

image.png (来源廖雪峰大神的官方网站)

function pow(x) {
    return x * x;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);

答案:1, 4, 9, 16, 25, 36, 49, 64, 81

reduce函数大概意思是将Array的reduce()把一个函数作用在这个Array[x1, x2, x3...]上,把结果继续和序列的下一个元素做累积计算。可以用来做疯狂求和、求积数

filter函数重点在于需要提供一个筛选过滤的函数,它用于把Array的某些元素过滤掉,然后返回剩下的元素。filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

mark一下一些做题时的特别点:

!== 表示左右两边不等时,输出true,反之亦然
=== 表示左右两边相等时,输出true,反之亦然
%   表示求除以并求余数

以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)

附上学习链接,感谢这些大佬出题和解答:

www.liaoxuefeng.com/wiki/102291…

wangdoc.com/javascript/…