一、this显示绑定

this显示绑定,顾名思义,它有别于this的隐式绑定,而隐式绑定必须要求一个对象内部包含一个指向某个函数的属性(或者某个对象或者上下文包含一个函数调用位置),并通过这个属性间接调用这个函数,从而把this简介/隐式绑定到这个对象上。但是this的隐式绑定存在一个绑定对象丢失问题,如下面代码所示:

function afun() {
console.log(this.a);
} var obj = {
a: 1,
afun: afun
}; var a = "hello"; setTimeout(obj.afun, 100);//"hello"

出人意料的是,控制台打印出来的结果是全局变量a的结果,而不是拥有指向函数属性的对象的a的值,这就是隐式绑定的对象丢失,回调函数丢失绑定对象是非常常见的。

但是,显示绑定仍然不能解决绑定对象丢失的问题,但是显示绑定的一个变种,即硬绑定可以解决绑定对象丢失。

在此之前,我们先来看看什么是显示绑定。

我们可以通过使用函数的call()和apply()方法实现this显示绑定,绝大多数内置函数和自定义函数都可以调用这两种方法。他们均接收两个参数

  • 参数:

    • thisArg: 要绑定到调用者this的对象。

      • arg1, arg2, ...(call):指定的参数列表,即要传给调用者的参数。比如a.call(obj, args)/a.apply(obj, args),args为参数传给调用者函数a作为该函数的实参。
      • argsArray(apply):一个数组或者类数组对象,如果该参数的值为 nullundefined,则表示不需要传入任何参数。
    • 返回值:调用者函数若有返回值则返回该值,没有返回值则返回undefined。

来看下面的代码:

function bfun() {
return this.a;
} var obj1 = {
a: "hello"
}; console.log(bfun.apply(obj1), bfun.call(obj1));//"hello" "hello"

若传入的第一个参数时一个原始值呢?来看下面的代码:

function bfun() {
return this;
} console.log(bfun.apply(3));//[Number: 2]

没错,原始值被转换成了它的对象形式,也就是new Number(),这被成为"装箱"。

但是,我们前面提到过,this显示绑定虽然强大,但是仍然不能解决this绑定丢失问题。下面我们来解释硬绑定,即显示绑定的一个变种,它能完美解决this绑定丢失问题。

二、硬绑定

先来看看下面的代码:

function cfun() {
console.log(this.a)//"hello"
return this.a;
} var obj2 = {
a: "hello"
}; var fn = function() {
return cfun.apply(obj2);
};
console.log(fn());//"hello" setTimeout(fn, 100);//"hello"

可以看到,硬绑定确实解决了this绑定丢失,但值得注意的是,通过apply()绑定的this对象,无法二次更改绑定对象:

function f() {
console.log( this.a );
}
var obj = {
a:2
};
var b = function() {
f.call( obj );
};
b(); // 2 b.call( window ); // 2

硬绑定的一个典型应用场景是创建一个包裹函数,传入所有的参数给调用者函数并返回接收到的所有值。

function dfun(v) {
return (v[0] + this.a);
} var obj3 = {
a: 10
}; var fn1 = function() {
return dfun.call(obj3, arguments);
} var result = fn1(6);
console.log(result);//16

对于arguments而言,call()和apply()的不同之处在于他们的参数类型不同:

function efun(v) {
console.log(..v)//6 10 11
return (v);
} var obj4 = {
a: 10
}; var fn1 = function() {
return efun.apply(obj3, arguments);
} var result = fn1([6, 10, 11]);
console.log(result);//[6, 10, 11]

也就是说call()的参数类型是Object,它传入的参数列表会被转换为键为'0'(随传入参数数量递增),值为传入参数的对象;而apply()的参数类型则是数组或者类数组。

function dfun(v) {
return (v);
} var obj3 = {
a: 10
}; var fn1 = function() {
return dfun.call(obj3, arguments);
} var result = fn1(6, 19, 1, 1);
console.log(result);//[Arguments]{'0':6,'1':19,2':1,3':1}
console.log(typeof result);//'object'

最强大的一种方法是将包裹函数创建为可以重复使用的辅助函数,封装可重复使用的硬绑定。

function ffun(v) {
return this.a * v;
} var obj5 = {
a: 5,
}; var fn2 = function(fn, obj) {
return function() {
return fn.apply(obj, arguments);
}
} var bind = fn2(ffun, obj5);
console.log(bind(10));//50

由于硬绑定十分常用,但通过包裹函数创建可重复使用的硬绑定比较麻烦,所以ES5提供了一个实现相同功能的方法bind()。用法如下:

function hfun(v) {
return this.a * v;
} var obj6 = {
a: 6
}; var bind = hfun.bind(obj6);
console.log(bind(4));//24

可以看到,我们再无需构建一个包裹函数来手动调用call或apply方法,只需要提供调用者和绑定到调用者this的对象即可。

我们可能发现了一个奇怪的现象,通过apply()和call()方法绑定的对象在传参给调用者时,需要设置一个参数占位,但bind()方法则不用,这是因为他们的返回值不同,bind()方法会返回一个经过硬编码的新函数,它会把传入参数设置为this的上下文并调用原始函数。可以理解bind使用方法为bind(obj)(args)。而对于call()和apply()方法而言,一旦调用此方法,就会立刻返回调用者函数的返回值,所以此时就需要同时传入参数给方法的参数占用符,然后被函数参数读取。值得注意的是,bind方法的参数和call方法类似。

this硬绑定的更多相关文章

  1. 深入理解this机制系列第一篇——this的4种绑定规则

    × 目录 [1]默认绑定 [2]隐式绑定 [3]隐式丢失[4]显式绑定[5]new绑定[6]严格模式 前面的话 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅 ...

  2. js中this的绑定

    人们对于this的绑定常常有两个误解,一:指向函数本身,二:指向函数作用域.这两种想法都是错的,this并不指向函数本身,也不指向函数作用域. function foo(){ this.count++ ...

  3. 理解javascript this 的绑定过程

    在理解this 的绑定过程之前,首先要理解调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置).只有仔细分析调用位置才能回答这个问题:这个this 到底引用的是什么?通常来说,寻找调用位 ...

  4. JS绑定种类汇总

    这里是<你不知道的JS>中常见的this绑定种类分享: 1)默认绑定: function foo(){ console.log(this.a); } var a = 2; foo(); 解 ...

  5. 【javascript】函数中的this的四种绑定形式

    目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...

  6. this的四种绑定形式

    一 , this的默认绑定 当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象. 一个例子 function fire ...

  7. 2.2 .this的绑定规则

    2.this的绑定规则 1.默认绑定 function foo( ) { console.log(this.a); } var a=1; foo(); 在代码中,foo()函数不带任何修饰的引用进行调 ...

  8. 【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~

       javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this   一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最 ...

  9. js中this的绑定规则及优先级

    一.   this绑定规则 函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条. 1.1 默认绑定 看下面代码: function foo() { cons ...

随机推荐

  1. 意向不到的Dubug妙招

    1.直接dubug到想要到达的位置,直接点击旁边的数字即可. 2.debug后不想重新启动,想重新进入再执行一次debug,可以使用drop frame来删除当前栈,跳到之前的栈再一次进入这个栈. 注 ...

  2. 个人开源项目如何上传maven中央仓库

    最近在写一些开源项目,想把自己写的东西放到maven中央仓库,提供给更多的人使用.所以写这一篇文章,记录一下自研开源项目jar包上传同步maven中央仓库成功的整个过程,这其中还是有不少的坑的. 目录 ...

  3. BootStrap详解

    1. bootstrap的安装和使用 官网: https://getbootstrap.com/ 中文网: https://www.bootcss.com/ 菜鸟驿站教程网: https://www. ...

  4. 在Kubernetes上部署k6的详细步骤

    k6介绍 k6是一款使用go语言编写的开源测试工具,支持用户编写测试脚本,解决了JMeter不易代码化的缺点.它的主要特点有 提供了友好的 CLI 工具 使用 JavaScript 代码编写测试用例 ...

  5. V8中的快慢属性(图文分解更易理解)

    出于好奇:js中使用json存数据查找速度快,还是使用数组存数据查找快? 探究V8中对象的实现原理,熟悉数组索引属性.命名属性.对象内属性.隐藏类.描述符数组.快慢属性等等. D8调试工具使用请来这里 ...

  6. (原创)【MAUI】在窗口(页面)关闭后获取其返回值

    一.前言 作为一名 Winform 和 WPF 的老用户,没想到 MAUI 上变化那么大. 就像传统的窗口,我弹出一个模式窗口,关闭窗口后是可以获取到窗口的返回值的,即: DialogResult.后 ...

  7. 使用MindSpore计算旋转矩阵

    技术背景 坐标变换.旋转矩阵,是在线性空间常用的操作,在分子动力学模拟领域有非常广泛的应用.比如在一个体系中切换坐标,或者对整体分子进行旋转平移等.如果直接使用Numpy,是很容易可以实现的,只要把相 ...

  8. 文件分享工具ShareLocalFile不需要云盘的实时上传下载文件的云盘工具可以搜索整个网络的文件

    工具的下载地址:https://comm.zhaimaojun.cn/AllSources/ToolDetail/?tid=9693 这是一个未来的项目,可以分享我们的文件,目前由于个人的技术水平限制 ...

  9. SwiftUI实战教程-土豆List

    代码库 教程中的项目代码都保存在这里:https://gitee.com/KINGWDY_admin/swiftui01 前言 在这一章节中,我们会使用List控件做一个土豆List,实现了列表填充. ...

  10. 操作系统学习笔记5 | 用户级线程 && 内核级线程

    在上一部分中,我们了解到操作系统实现多进程图像需要组织.切换.考虑进程之间的影响,组织就是用PCB的队列实现,用到了一些简单的数据结构知识.而本部分重点就是进程之间的切换. 参考资料: 课程:哈工大操 ...