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

js原生函数之call和apply,bind

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

86900

JS 手写: call、apply、bind

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

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

彻底弄清 this call apply bind 以及原生实现

Photo by Anas Alshanti on Unsplash 有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生...JS 去实现这几个功能 this 指向问题 this this 的指向在严格模式和非严格模式下有所不同;this 究竟指向什么是,在绝大多数情况下取决于函数如何被调用 全局执行环境的情况: 非严格模式下...20190306230406.png 原生实现 call apply bind new 文章上半部分讲解了 this 的指向以及如何使用 call bind apply 方法修改 this 指向;文章下半部分我们用...JS 去自己实现这三种方法 myCall 首先 myCall 需要被定义在 Function.prototype 上这样才能在函数上调用到自定义的 myCall 方法 然后定义 myCall 方法,该方法内部...20190307232419.png 小结 到此为止 this 指向问题 如何修改 this 如何使用原生 JS 实现 call apply bind 和 new 方法 再遇到类似问题,基本常见的情况都能应付得来了

36310

彻底弄清 this call apply bind 以及原生实现

Photo by Anas Alshanti on Unsplash 有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生...JS 去实现这几个功能 this 指向问题 this this 的指向在严格模式和非严格模式下有所不同;this 究竟指向什么是,在绝大多数情况下取决于函数如何被调用 全局执行环境的情况: 非严格模式下...20190306230406.png 原生实现 call apply bind new 文章上半部分讲解了 this 的指向以及如何使用 call bind apply 方法修改 this 指向;文章下半部分我们用...JS 去自己实现这三种方法 myCall 首先 myCall 需要被定义在 Function.prototype 上这样才能在函数上调用到自定义的 myCall 方法 然后定义 myCall 方法,该方法内部...20190307232419.png 小结 到此为止 this 指向问题 如何修改 this 如何使用原生 JS 实现 call apply bind 和 new 方法 再遇到类似问题,基本常见的情况都能应付得来了

39220

js书写原生ajax,JS 原生ajax写法

原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习 序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用 一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户,使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦

15.3K40

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一条龙都整一遍!...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

之所以要写这篇,是因为曾经面试被要求在白纸上手写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} */

1K30

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
领券