引子

读完《你不知道的JavaScript--上卷》中关于this的介绍和深入的章节后,对于this的指向我用这篇文章简单总结了一下。接着我就想着能不能利用this的相关知识,模拟实现一下javascript中比较常用到的call、apply、bind方法呢?

于是就有了本文,废话不多说全文开始!

隐式丢失

由于模拟实现中有运用到隐式丢失, 所以在这还是先介绍一下。

隐式丢失是一种常见的this绑定问题, 是指: 被隐式绑定的函数会丢失掉绑定的对象, 而最终应用到默认绑定。说人话就是: 本来属于隐式绑定(obj.xxx this指向obj)的情况最终却应用默认绑定(this指向全局对象)。

常见的隐式丢失情况1: 引用传递

var a = 'window'
function foo() {
console.log(this.a)
}
var obj = {
a: 'obj',
foo: foo
} obj.foo() // 'obj' 此时 this => obj
var lose = obj.foo
lose() // 'window' 此时 this => window

常见的隐式丢失情况2: 作为回调函数被传入

var a = 'window'
function foo() {
console.log(this.a)
}
var obj = {
a: 'obj',
foo: foo
} function lose(callback) {
callback()
} lose(obj.foo) // 'window' 此时 this => window // ================ 分割线 ===============
var t = 'window'
function bar() {
console.log(this.t)
} setTimeout(bar, 1000) // 'window'

对于这个我总结的认为(不知对错): 在排除显式绑定后, 无论怎样做值传递,只要最后是被不带任何修饰的调用, 那么就会应用到默认绑定

进一步的得到整个实现的关键原理: 无论怎么做值传递, 最终调用的方式决定了this的指向

硬绑定

直观的描述硬绑定就是: 一旦给一个函数显式的指定完this之后无论以后怎么调用它, 它的this的指向将不会再被改变

硬绑定的实现解决了隐式丢失带来的问题, bind函数的实现利用就是硬绑定的原理

// 解决隐式丢失
var a = 'window'
function foo() {
console.log(this.a)
}
var obj = {
a: 'obj',
foo: foo
} function lose(callback) {
callback()
} lose(obj.foo) // 'window' var fixTheProblem = obj.foo.bind(obj)
lose(fixTheProblem) // 'obj'

实现及原理分析

模拟实现call

// 模拟实现call
Function.prototype._call = function ($this, ...parms) { // ...parms此时是rest运算符, 用于接收所有传入的实参并返回一个含有这些实参的数组
/*
this将会指向调用_call方法的那个函数对象 this一定会是个函数
** 这一步十分关键 ** => 然后临时的将这个对象储存到我们指定的$this(context)对象中
*/
$this['caller'] = this
//$this['caller'](...parms) // 这种写法会比上面那种写法清晰
$this.caller(...parms) // ...parms此时是spread运算符, 用于将数组中的元素解构出来给caller函数传入实参
/*
为了更清楚, 采用下面更明确的写法而不是注释掉的
1. $this.caller是我们要改变this指向的原函数
2. 但是由于它现在是$this.caller调用, 应用的是隐式绑定的规则
3. 所以this成功指向$this
*/
delete $this['caller'] // 这是一个临时属性不能破坏人为绑定对象的原有结构, 所以用完之后需要删掉
}

模拟实现apply

// 模拟实现apply  ** 与_call的实现几乎一致, 主要差别只在传参的方法/类型上 **
Function.prototype._apply = function ($this, parmsArr) { // 根据原版apply 第二个参数传入的是一个数组
$this['caller'] = this
$this['caller'](...parmsArr) // ...parmsArr此时是spread运算符, 用于将数组中的元素解构出来给caller函数传入实参
delete $this['caller']
}

既然_call与_apply之前的相似度(耦合度)这么高, 那我们可以进一步对它们(的相同代码)进行抽离

function interface4CallAndApply(caller, $this, parmsOrParmArr) {
$this['caller'] = caller
$this['caller'](...parmsOrParmArr)
delete $this['caller']
} Function.prototype._call = function ($this, ...parms) {
var funcCaller = this
interface4CallAndApply(funcCaller, $this, parms)
} Function.prototype._apply = function ($this, parmsArr) {
var funcCaller = this
interface4CallAndApply(funcCaller, $this, parmsArr)
}

一个我认为能够较好展示_call 和 _apply实现原理的例子

var myName = 'window'
var obj = {
myName: 'Fitz',
sayName() {
console.log(this.myName)
}
} var foo = obj.sayName var bar = {
myName: 'bar',
foo
} bar.foo()

模拟实现bind

// 使用硬绑定原理模拟实现bind
Function.prototype._bind = function ($this, ...parms) {
$bindCaller = this // 保存调用_bind函数的对象 注意: 该对象是个函数
// 根据原生bind函数的返回值: 是一个函数
return function () { // 用rest运算符替代arguments去收集传入的实参
return $bindCaller._apply($this, parms)
}
}

一个能够展现硬绑定原理的例子

function hardBind(fn) {
var caller = this
var parms = [].slice.call(arguments, 1)
return function bound() {
parms = [...parms, ...arguments]
fn.apply(caller, parms) // apply可以接受一个伪数组而不必一定是数组
}
} var myName = 'window'
function foo() {
console.log(this.myName)
}
var obj = {
myName: 'obj',
foo: foo,
hardBind: hardBind
} // 正常情况下
foo() // 'window'
obj.foo() // 'obj' var hb = hardBind(foo)
// 可以看到一旦硬绑定后无论最终怎么调用都不能改变this指向
hb() // 'window'
obj.hb = hb // 给obj添加该方法用于测试
obj.hb() // 'window' // 在加深一下印象
var hb2 = obj.hardBind(foo)
hb2() // 'obj' // 这里调用this本该指向window

总体实现(纯净版/没有注释)

function interface4CallAndApply(caller, $this, parmsOrParmArr) {
$this['caller'] = caller
$this['caller'](...parmsOrParmArr)
delete $this['caller']
} Function.prototype._call = function ($this, ...parms) {
var funcCaller = this
interface4CallAndApply(funcCaller, $this, parms)
} Function.prototype._apply = function ($this, parmsArr) {
var funcCaller = this
interface4CallAndApply(funcCaller, $this, parmsArr)
} Function.prototype._bind = function ($this, ...parms) {
$bindCaller = this
return function () {
return $bindCaller._apply($this, parms)
}
} // ============ 测试 ===============
var foo = {
name: 'foo',
sayHello: function (a, b) {
console.log(`hello, get the parms => ${a} and ${b}`)
}
} var bar = {
name: 'bar'
} foo.sayHello._call(bar, 'Fitz', 'smart')
foo.sayHello._apply(bar, ['Fitz', 'smart']) var baz = foo.sayHello._bind(bar, 'Fitz', 'smart')
baz() var testHardBind = foo.sayHello._bind(bar, 'hard', 'bind')
testHardBind._call(Object.create(null)) // hello, get the parms => hard and bind 测试_bind的硬绑定

写在最后

我只是一个正在学习前端的小白,有不对的地方请各位多多指正

如果感觉对您有启发或者帮助,也烦请您留言或给我个关注, 谢谢啦!

简单模拟实现javascript中的call、apply、bind方法的更多相关文章

  1. javascript中的call(),apply(),bind()方法的区别

    之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...

  2. 深入浅出:了解JavaScript中的call,apply,bind的差别

     在 javascript之 this 关键字详解文章中,谈及了如下内容,做一个简单的回顾:         1.this对象的涵义就是指向当前对象中的属性和方法.       2.this指向的可变 ...

  3. 别真以为JavaScript中func.call/apply/bind是万能的!

    自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去 ...

  4. 浅析 JavaScript 中的 Function.prototype.bind() 方法

    Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...

  5. JavaScript 中的 Function.prototype.bind() 方法

    转载自:https://www.cnblogs.com/zztt/p/4122352.html Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个 ...

  6. Javascript中this作用域以及bind方法的重写

    这是一个最近遇到的笔试题,出于尊重,不会说出该公司的名字,源于自身比较少,笔试题是将bind方法用ES3重写,使用bind这个方法,导致一时半会懵了,只记得bind可以改变this的作用域. 作为查漏 ...

  7. Javascript中call,apply,bind方法的详解与总结

    在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...

  8. Javascript中call,apply,bind的区别

    一.探索call方法原理 Function.prototype.call = function(obj) { // 1.让fn中的this指向obj // eval(this.toString().r ...

  9. JavaScript中call,apply,bind方法的区别

    call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...

随机推荐

  1. NGK与AOFEX交易所达成战略合作,BGV即将上线A网!

    据NGK官方消息,NGK官方已经与英国伦敦知名交易所AOFEX交易所达成战略合作,将于12月2日全球首发BGV,现已开启充值服务.同时,在12月3日15:00,用户可以参与BGV交易:在12月4日15 ...

  2. 死磕以太坊源码分析之EVM指令集

    死磕以太坊源码分析之EVM指令集 配合以下代码进行阅读:https://github.com/blockchainGuide/ 写文不易,给个小关注,有什么问题可以指出,便于大家交流学习. 以下指令集 ...

  3. Python数据结构与算法_删除排序数组中的重复项(06)

    给定一个排序数组,你需要在 原地 删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成. ...

  4. Differences between Stack and Heap

    本文转载自Differences between Stack and Heap Stack vs Heap So far we have seen how to declare basic type ...

  5. 【SVM】kaggle之澳大利亚天气预测

    项目目标 由于大气运动极为复杂,影响天气的因素较多,而人们认识大气本身运动的能力极为有限,因此天气预报水平较低,预报员在预报实践中,每次预报的过程都极为复杂,需要综合分析,并预报各气象要素,比如温度. ...

  6. 微信小程序开发小技巧:

    小技巧:输入view.tabs_content就可以生成下面的代码. 输入p10,就可以得到: 输入jc:c得到:文字水平对齐 输入d:f得到: 输入ai:c得到: 输入bb得到: currentCo ...

  7. Gitlab与Sonarqube整合-代码提交自动检测

    目录 概述 准备工作 postgres sonarqube gitlab gitlab-runner Gitlab-runner容器 注册Gitlab-runner Sonarqube gitlab ...

  8. 后端程序员之路 39、一个Protocol Buffer实例

    实际工作的Protocol Buffer使用经验 # 写proto文件- 协议版本 项目用的是protobuf2,所以要指定 syntax = "proto2";- 包名 pack ...

  9. java帝国的诞生

    Java : 一个帝国的诞生 C语言帝国的统治 现在是公元1995年, C语言帝国已经统治了我们20多年, 实在是太久了. 1972年, 随着C语言的诞生和Unix的问世, 帝国迅速建立统治, 从北美 ...

  10. rabbitmq如何保证消息可靠性不丢失

    目录 生产者丢失消息 代码模拟 事务 confirm模式确实 数据退回监听 MQ事务相关软文推荐 MQ丢失信息 消费者丢失信息 之前我们简单介绍了rabbitmq的功能.他的作用就是方便我们的消息解耦 ...