内置函数提供的显式绑定

最近在开发中遇到使用arr.map(module.fun) 这样的写法时(在一个模块调用了另外一个模块的方法), 造成了函数中this丢失的问题, 显示为undefined, 因此去查阅一番资料,发现了一个不常用到的知识点: javascript内置函数提供的显式绑定

拿Array.prototype.map()举个栗子

注意提供的第二个参数 thisArg

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg]);

假如你用来map的函数是一个纯函数(不包含this),那么你不显式地为该函数指定this, 也不会出啥问题

let obj = {
    val: 1,
    fun: func
};
function func(a) {
    return 2 * a;
}
let arr = [1, 2, 3];
let new_arr = arr.map(obj.fun); // no problem [2, 4, 6]

一旦你map的函数里包含了this, 那么你最好显式地给它指定正确的this, 否则会出现你意想不到的情况

'use strict'
let obj = {
    val: 1,
    val2: 2,
    fun: func,
};
function func(a) {
    return 2 * (a + this.val2);
}
let arr = [1, 2, 3];
let new_arr = arr.map(obj.fun); // Uncaught TypeError: Cannot read property 'val2' of undefined
// 非严格模式应该会绑定到window上 map后的结果是[NaN, NaN, NaN] let true_arr = arr.map(obj.fun, obj); // 第二个参数为函数指定了this map后的结果是我们想要的[6, 8, 10] // 当然下面这种写法也没有问题, 原理是this的显式绑定
let true_arr2 = arr.map(function (item) {
    return obj.fun(item); // fun被obj调用, 因此函数里的this被绑定到obj
});
// [6, 8, 10]

javascript内置函数提供的显式绑定的更多相关文章

  1. 深入理解java内置锁(synchronized)和显式锁(ReentrantLock)

    多线程编程中,当代码需要同步时我们会用到锁.Java为我们提供了内置锁(synchronized)和显式锁(ReentrantLock)两种同步方式.显式锁是JDK1.5引入的,这两种锁有什么异同呢? ...

  2. JavaScript 内置函数有什么?

    javaScript内置函数 1.Date:日期函数 属性:constructor 所修立对象的函数参考prototype 能够为对象加进的属性和方法 方法:getDay() 返回一周中的第几天(0- ...

  3. 关于gcc内置函数和c隐式函数声明的认识以及一些推测

    最近在看APUE,不愧是经典,看一点就收获一点.但是感觉有些东西还是没说清楚,需要自己动手验证一下,结果发现需要用gcc,就了解一下. 有时候,你在代码里面引用了一个函数但是没有包含相关的头文件,这个 ...

  4. Kettle中JavaScript内置函数说明

    本文链接:https://blog.csdn.net/u010192145/article/details/102220563 我们在使用JavaScript组件的时候,在左侧核心树对象栏中可以看到K ...

  5. javascript内置函数

    1.Date:日期函数属性(1):constructor 所修立对象的函数参考prototype 能够为对象加进的属性和方法办法(43):getDay() 返回一周中的第几天(0-6)getYear( ...

  6. python高级内置函数和各种推导式的介绍:一行搞定的代码

    一.知识要点 all 都为真 any 有真的 min 最小的 max 最大的 sum 求和 reversed 反转 sorted 排序 zip 对应合并 [] 列表推倒式 () 生成器 {} 字典推倒 ...

  7. javascript内置函数:toString()

    不同对象有不同的实现方式. 1.Number对象: 语法:numberObject.toString([radix]) 参数:radix,可选/Number类型,指定的基数(进制数),支持[2,36] ...

  8. 拓展javascript内置函数

    1.获取字符串字节数 //获取字符串字节数 //方法一 /* */ String.prototype.getBytesLength = function () { var length = 0; fo ...

  9. JavaScript原生函数(内置函数)

    1.JavaScript原生函数(内置函数) JavaScript原生函数(内置函数)有: String() Number() Boolean() Array() Object() Function( ...

随机推荐

  1. Codeforces Round #643 (Div. 2)(C ~ E)

    C. Count Triangles 题目链接 : https://codeforces.com/contest/1355/problem/C 题目大意 : 给你 A , B , C , D 问有多少 ...

  2. JSP+Servlet+JDBC+mysql实现的学生成绩管理系统

    项目简介 项目来源于:https://gitee.com/zzdoreen/SSMS 本系统基于JSP+Servlet+Mysql 一个基于JSP+Servlet+Jdbc的学生成绩管理系统.涉及技术 ...

  3. 让写作省心一点——Markdown和CSS实践

    1 引言 今天这篇推送和以往不太一样,乍一看就能发现格式有了变化.没错,这是我专门设计的品牌模板,也就是本公众号以后创作的文章可直接套用,获得一致的风格样式. 除此以外,文章里的全部元素(包括标题.表 ...

  4. 根据name获取控件

    javascript: document.getElementsByName("name")[index]; jquery: $("tr[name='name']&quo ...

  5. UVA10529 Dumb Bones (完成度:40%)

    题目链接:https://vjudge.net/problem/UVA-10529 知识点: 概率与期望,DP. 题目大意: 现要放置 \(n\) 个多米诺骨牌,且每放置一块多米诺骨牌有 \(P_l\ ...

  6. EventBus/EventQueue 再思考

    EventBus/EventQueue 再思考 Intro 之前写过两篇文章,造轮子系列的 EventBus/EventQueue,回想起来觉得当前的想法有点问题,当时对 EvenStore 可能有点 ...

  7. vscode环境配置(一)——C Program运行

    ctrl + shift +p 打开应用商店 搜索 C/C++  和 Code Runner(一键编译运行)  

  8. ShoneSharp语言(S#)的设计和使用介绍系列(6)— 字符串String

    ShoneSharp语言(S#)的设计和使用介绍 系列(6)— 字符串String 作者:Shone 声明:原创文章欢迎转载,但请注明出处,https://www.cnblogs.com/ShoneS ...

  9. golang如何优雅的编写事务代码

    目录 前言 需求 烂代码示例 重构套路 一.提前返回去除if嵌套 二.goto+label提取重复代码 三.封装try-catch统一捕获panic 前言 新手程序员概有如下特点 if嵌套特别多.重复 ...

  10. (板子)缩点 + DAG上的DP(深搜)luogu P3387

    板子传送门 根据题目意思,我们只需要找出一条点权最大的路径就行了,不限制点的个数.那么考虑对于一个环上的点被选择了,一整条环是不是应该都被选择,这一定很优,能选干嘛不选.很关键的是题目还允许我们重复经 ...