js深入之call、apply和bind
一. call和apply
1. 代码完整实现
Function.prototype.mycall = function (context, ...argus) {
if (typeof this !== 'function') {
throw new TypeError('not funciton')
}
const fn = this
let result = null context = context || window
context.fn = fn
result = context.fn(...argus)
delete context.fn return result
} Function.prototype.myapply = function (context, ...argus) {
if (typeof this !== 'function') {
throw new TypeError('not funciton')
}
const fn = this
let result = null context = context || window
argus = argus && argus[0] || []
context.fn = fn
result = context.fn(...argus)
delete context.fn return result
}
2. 先来溜溜
- 案例一
class Member {
constructor (options) {
const {name, sex, age} = options
this.name = name
this.sex = sex
this.age = age
} introduce () {
console.log(`I'm ${this.name}, ${this.age}, ${this.sex}`)
}
} const member1 = new Member({
name: 'gina',
sex: 'girl',
age: 23
}) const member2 = new Member({
name: 'gun',
sex: 'boy',
age: 24
}) member2.introduce.mycall(member1) // I'm gina, 23, girl
member2.introduce.myapply(member1) // I'm gina, 23, girl
- 案例二
Math.max.myapply(null, [1,2,3,4]) // 4
Math.max.mycall(null, 1,2,3,4) // 4
3. 注意要点
- 开头需要做一个类型判断:
if (typeof this !== 'function') {
throw new TypeError('not funciton')
}
- 获取原始函数: 比如执行
Math.max.mycall(null, 1,2,3,4)
的时候,mycall函数内部的this指向了Math.max函数,所以我们可以通过const fn = this
获取到要执行的函数,然后将该函数绑定到传入的context
对象(context.fn = fn
),然后再把它删除掉delete context.fn
。
总体来说,call和apply的实现还是比较简单的。
二. bind
1. 完整代码实现
Function.prototype.mybind = function (context, ...argus) {
if (typeof this !== 'function') {
throw new TypeError('not funciton')
}
const fn = this
const fBound = function (...argus2) {
return fn.apply(this instanceof fBound ? this : context, [...argus, ...argus2])
}
fBound.prototype = Object.create(this.prototype)
return fBound
}
2. 边溜边说
- 案例一
const foo = {
v: 1
}; function bar() {
return this.v;
} const bindFoo = bar.mybind(foo); bindFoo() // 1
bind
函数返回的是一个可执行函数,所以return
了一个函数。此刻返回的函数,按正常来说,在执行的时候,this是指向执行处的当前上下文。但该案例中, mybind
需要满足bar在执行中返回值时,this
依然是指向 foo,所以我们在mybind
返回的函数中需要使用fn.apply
来保持上下文和执行mybind
的时候一致。
- 案例二
const foo = {
v: 1
}; function bar(name, age) {
console.log(this.v);
console.log(name);
console.log(age); } const bindFoo = bar.bind(foo, 'daisy');
bindFoo('18');
// 1
// daisy
// 18
mybind
需要做到可以接受传参,并且将参数给到bar
函数,后面再执行bindFoo
再传的参数,会接在之前传参的后面。所以mybind
源码中使用了[...argus, ...argus2]
来进行参数整合。
- 案例三
const value = 2; const foo = {
value: 1
}; function bar(name, age) {
this.habit = 'shopping';
console.log(this.value);
console.log(name);
console.log(age);
} bar.prototype.friend = 'kevin'; const bindFoo = bar.bind(foo, 'daisy'); const obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin
在执行const obj = new bindFoo('18')
这一 new
操作的时候,此刻this
应该指向当前对象obj
。所以mybind
在fn.apply
的第一个参数,做了这样的判断this instanceof fBound ? this : context
。
在const obj = new bindFoo('18')
内部执行到this instanceof fBound ? this : context
时,此刻this
指向obj
,fBound
其实也就是bindFoo
,this instanceof fBound
判断了obj
是不是继承自bindFoo
,也就是进行了构建函数new
操作。
- 案例4
function bar() {} bar.prototype.value = 2 const bindFoo = bar.mybind(null); bindFoo.prototype.value = 1; console.log(bar.prototype.value) // 2
mybind
执行后返回的函数fBound
修改prototype
的时候,不应该影响到fn.prototype
,两者应该是独立的。所以源码使用了fBound.prototype = Object.create(this.prototype)
, 而不是fBound.prototype = this.prototype
。
总得来说,bind
的实现考虑的点还是比较多的。
参考:
https://github.com/mqyqingfeng/Blog/issues/12
js深入之call、apply和bind的更多相关文章
- js里function的apply vs. bind vs. call
js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...
- js中call、apply、bind那些事
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- js中call、apply、bind那些事2
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- js中call、apply和bind到底有什么区别?
介绍 在js中,每个函数的原型都指向Function.prototype对象(js基于原型链的继承).因此,每个函数都会有apply,call,和bind方法,这些方法继承于Function. 它们的 ...
- JS中call、apply、bind使用指南,带部分原理。
为什么需要这些?主要是因为this,来看看this干的好事. box.onclick = function(){ function fn(){ alert(this); } fn();}; 我们原本以 ...
- js中call、apply、bind到底有什么区别?bind返回的方法还能修改this指向吗?
壹 ❀ 引 同事最近在看angularjs源码,被源码中各种bind,apply弄的晕头转向:于是他问我,你知道apply,call与bind的区别吗?我说apply与call是函数应用,指定thi ...
- JS中call()和apply()以及bind()的区别
一.方法定义: apply:调用一个对象的一个方法,用另一个对象替换当前对象.例如:B.apply(A, arguments);即A对象应用B对象的方法. call:调用一个对象的一个方法,用另一个对 ...
- JS中call()、apply()、bind()的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows( ...
- js中call、apply和bind的区别
在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...
- js中call,apply,bind方法的用法
call .apply.和bind 以上这三个方法都是js function函数当中自带的方法,用来改变当前函数this的指向. call()方法 语法格式: fun.call(thisArg[,ar ...
随机推荐
- Windows 10 版本信息
原文 https://technet.microsoft.com/zh-cn/windows/release-info Windows 10 版本信息 Microsoft 已更新其服务模型. 半年频道 ...
- Android零基础入门第73节:Activity初入门,创建和配置如此简单
Activity是Android应用的重要组成单元之一,也是Android应用最常见的组件之一.前面看到的示例通常都只包含一个Activity或一个AppCompatActivity,但在实际应用中这 ...
- Gps坐标有效性判定
百科:纬度 是指某点与地球球心的连线和地球赤道面所成的线面角,其数值在0至90度之间.位于赤道以北的点的纬度叫北纬,记为N:位于赤道以南的点的纬度称南纬,记为S. var regex = new Re ...
- Django预备知识
http协议 url: 协议://域名(IP)+端口(80)/路径?参数(a=1&b=2) 示例:https://www.baidu.com/s/?wd=aaa MVC M:mdoel 与数据 ...
- 优秀的Restful API应该是什么样的
1 你一直在错误的使用http协议 现在微服务真是火的一塌糊涂!大街小巷,逢人必谈微服务,各路大神纷纷忙着把自家的单体服务拆解成多个Web微小服务!而作为微服务之间通信的桥梁,Web API的设计就显 ...
- localstorage实现带过期时间的缓存功能
前言 一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存,减少对服务器的请求. 1.cookie数据存放在本地硬盘中,只要在过期时间之前,都是有效 ...
- 你必须了解的java内存管理机制(三)-垃圾标记
本文在个人技术博客不同步发布,详情可用力戳 亦可扫描屏幕右侧二维码关注个人公众号,公众号内有个人联系方式,等你来撩... 相关链接(注:文章讲解JVM以Hotspot虚拟机为例,jdk版本为1.8) ...
- Loadrunner做性能测试的主要步骤
Loadrunner做性能测试的主要步骤: Loadrunner将性能测试过程分为计划测试.测试设计.创建VU脚本.创建测试场景.运行测试场景和分析结果6个步骤. 1) 计划测试:主要进行测试需求的收 ...
- 【记录】mybatis中获取常量类中数据
部分转载,已注明来源: 1.mybatis中获取常量类中数据 <update id="refuseDebt"> UPDATE dt_debt a SET ...
- PHP输出缓冲及其应用
缓冲(buffer)是为了协调吞吐速度相差很大的设备之间数据传送而采用的技术,用来存放缓冲数据的区域叫缓冲区,在计算机科学领域,当数据从一个地方传送到另一个地方时,缓冲区被用来临时存储数据.与缓冲相似 ...