首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS 手写: call、apply、bind

# Try it bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。...当使用 bind 在 setTimeout 中创建一个函数(作为回调提供)时,作为 thisArg 传递的任何原始值都将转换为object。...# 描述 bind() 函数会创建一个新的绑定函数(bound function,BF)。...# 示例 # 创建绑定函数 bind() 最简单的用法是创建一个函数,不论怎么调用,这个函数都有同样的 this 值。...只要将这些参数(如果有的话)作为 bind() 的参数写在 this 后面。当绑定函数被调用时,这些参数会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们后面。

1.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js call()、apply()、bind()用法和区别

    return num1 + num2; } const obj = {}; getSum.apply(obj, [1, 2]); // this指向: obj return: 3 3. bind...() 语法: fun.bind(thisArg,[arg1,arg2,…]) fun: 表示一个函数 thisArg: this要指向的对象,如果是null 和 undefined,则指向window全局对象...特性: fun.bind(thisArg,arg1,arg2,…) 不会立即调用fun函数,会返回一个新的指定了this的函数; bind方法将一个函数的对象上下文从初始的上下文改变为由 thisArg...(obj, 1, 2); // 返回的是一个新的指定了this的函数 newFun(); // 3 4. call()、apply()和bind()的应用 1. call() call 常用来继承,因为...() 如果我们想改变某个函数内部的this指向,但又不需要立即调用该函数,此时用bind: 点击 let

    1.1K30

    js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call、apply、bind的问题,比如… 怎么利用call、apply来求一个数组中最大或者最小值 如何利用call、apply来做继承 apply...(坑爹了,这好像在让巧媳妇去做无米之炊),不过没关系,call、apply、bind可以帮我们干这件事。...所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的.. call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind...67,5,7,6,-8,687);Math.min.apply(Math, arr);Math.min.call(Math, 34,5,3,6,54,6,-67,5,7,6,-8,687); 将伪数组转化为数组 js...Array.prototype.slice.call(arrayLike); 上面arr便是一个包含arrayLike元素的真正的数组啦( 注意数据结构必须是以数字为下标而且一定要有length属性 ) 数组追加 在js

    1.7K50

    手写JS函数的call、apply、bind

    之所以要写这篇,是因为曾经面试被要求在白纸上手写bind实现  结果跟代码一样清晰明确,一阵懵逼,没写出来!  下面,撸起袖子就是干!~  把call、apply、bind一条龙都整一遍!...arg1 + arg2)}const _this = { name: 'YIYING' }// 参数为数组;方法立即执行fun.ownApply(_this, [1, 2])// 输出:YIYING3bind...定义与使用Function.prototype.bind(): developer.mozilla.org/zh-CN/docs/…// Function.prototype.bind()样例function...console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 只变更fun中的this指向,返回新function对象const newFun = fun.bind...(_this)newFun(1, 2)// 输出:YIYING3手写实现/** * 自定义bind实现 * @param context 上下文 * @returns {Function} */

    1.1K30

    手写JS函数的call、apply、bind

    之所以要写这篇,是因为曾经面试被要求在白纸上手写bind实现  结果跟代码一样清晰明确,一阵懵逼,没写出来!  下面,撸起袖子就是干!~  把call、apply、bind一条龙都整一遍!...const _this = { name: 'YIYING' }// 参数为数组;方法立即执行fun.ownApply(_this, [1, 2])// 输出:YIYING3参考:前端手写面试题详细解答bind...定义与使用Function.prototype.bind(): developer.mozilla.org/zh-CN/docs/…// Function.prototype.bind()样例function...console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 只变更fun中的this指向,返回新function对象const newFun = fun.bind...(_this)newFun(1, 2)// 输出:YIYING3手写实现/** * 自定义bind实现 * @param context 上下文 * @returns {Function} */

    1.2K20

    js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call、apply、bind的问题,比如… 怎么利用call、apply来求一个数组中最大或者最小值 如何利用call、apply来做继承 apply...// 1 call person.showName.call(animal); // 2 apply person.showName.apply(animal); // 3 bind person.showName.bind...所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的.. call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind...8,687); Math.min.apply(Math, arr); Math.min.call(Math, 34,5,3,6,54,6,-67,5,7,6,-8,687); 将伪数组转化为数组 js...Array.prototype.slice.call(arrayLike); 上面arr便是一个包含arrayLike元素的真正的数组啦( 注意数据结构必须是以数字为下标而且一定要有length属性 ) 数组追加 在js

    1.6K60

    js原生函数之call和apply,bind

    js原生函数中的call和apply都不陌生,这两个方法的作用相似,接受两类参数。 第一类是context(上下文),传入的参数作为执行函数的上下文,也是要传入的第一个参数。...说了call和apply,也是要介绍一下bind的。...bind方法用于明确指定调用 this 方法。在作用域方面,类似于 call 和 apply 。当你将一个对象绑定到一个函数的 this对象时,你就会用到 bind。...后来想到了bind,作为和call的对比也就加了进来,之前没想到bind除了thisArg外还可以继续接受其他参数,因为之前看别人写的bind方法模拟不是这样的, 原来我看到的别人写的bind实现原理代码是这样的...想不到最终收获的是bind

    89000

    js的this、call、apply、bind、继承、原型链

    本文来自我的github 0.前言 这些都是js基础进阶的必备了,有时候可能一下子想不起来是什么,时不时就回头看看基础,增强硬实力。...this指向就那么几种: new 关键字 指向new 创建的对象 function F() { this.name = 1 } var f = new F() call、apply、bind...前两者都是一样,只是参数表现形式不同,bind表示的是静态的前两者,需要手动调用 a.call(b,args)让函数a执行上下文指向b,也就是b的属性就算没有a函数,也能像b.a(args)这样子调用...+ ')')//将参数传递进去调用 } delete ctx[hash]//删除临时增加的属性 return result } apply也是同理,而且少了数组这一步,更加简单接下来我们看一下bind...后,以后无论怎么用call、apply、bind,this指向都不会变,都是第一次bind的上下文 3.从call到继承 首先,js没有严格意义上的子类父类,实现继承是依靠原型链来实现类似于所谓的类的效果

    96010

    js基础-关于call,apply,bind的一切

    函数原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比较浅显,所谓js基础扎实,绕不开这些基础常用的...目录 call,apply,bind的基本介绍 call/apply/bind的核心理念:借用方法 call和apply的应用场景 bind的应用场景 中高级面试题:手写call/apply、bind...调用call/apply/bind的必须是个函数 call、apply和bind是挂在Function对象上的三个方法,只有函数才有这些方法。...关于js事件循环机制不理解的同学,可以看我这篇博客:Js 的事件循环(Event Loop)机制以及实例讲解 那么如何使他输出: 1,2,3,4,5呢?...回调函数this丢失的解决方案: bind绑定回调函数的this指向: 这是典型bind的应用场景, 绑定this指向,用做回调函数。

    1.4K21

    js中this指向问题及call,apply,bind的区别

    js中this指向问题及call,apply,bind的区别# 1 this指向# 1.1 what is 'this'?...,后续的传参都是作为函数形参的值 不同点: call的后续传参是一个一个传,然后顺序对应;apply的后续传参是以数组的形式,解析的时候也是跟call一样顺序对应; call、apply没有返回值,而bind...b = { name: '二二', age: '24' } a.say() a.say.call(b, '男', '爬山') a.say.apply(b, ['男', '密室逃脱']) // bind...可以向cally一样传参,例如: a.say.bind(b, '男', 'UNO')() // 但由于bind返回的仍然是一个函数,所以我们还可以在函数调用的时候再进行传参。...例如: a.say.bind(b)('男', 'UNO') 运行的结果如下: 3 小结# 关于this指向、call、apply、bind的记录本篇就总结到这里,在日常使用脚手架、组件开发时可能会用的地方比较少

    1.2K20
    领券