【JavaScript】你真的熟悉bind吗

这篇具有很好参考价值的文章主要介绍了【JavaScript】你真的熟悉bind吗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

引言

内容速递

看了本文您能了解到的知识!

在本篇文章中,将带你了解什么是bindbind的用途如何手写bind以及工作中实际使用bind的场景

在JavaScript中,bind()方法是用来创建一个新函数,并将其绑定到指定的对象上,从而在调用该函数时确保函数中的this关键字指向绑定的对象。

1、什么是bind

bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被指定 bind()的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

MDN文档:Function.prototype.bind()

2、bind的语法

语法:

function.bind(thisArg[, arg1[, arg2[, ...]]])

参数:

  • thisArg:被绑定到函数上的对象,即当调用绑定后的函数时,函数中的this关键字会指向该对象。如果thisArg参数为nullundefined,则this关键字将指向全局对象(在浏览器中通常是window对象)。

  • arg1, arg2, ...:要传递给函数的参数。这些参数将按照顺序传递给函数,并在调用函数时作为函数参数使用。

返回值:

返回一个原函数的拷贝,并拥有指定的this值和初始参数。

3、浅试一下bind

代码:

this.name = 'guizimo'
let obj = {
  name: 'zimo',
  getName: function() {return this.name}
}

console.log(obj.getName())    // zimo

let newGetName = obj.getName
console.log(newGetName())     // guizimo

let bindGetName = newGetName.bind(obj)
console.log(bindGetName())     // zimo

简述代码:

  1. 第一次打印zimo,可以理解为是打印对象内的一个属性,此时的this是指向obj对象

  2. 第二次打印guizimo,因为当前环境是对象外,因为当前执行的函数是newGetName(),因此函数内部的this指向全局对象。

  3. 通过bind生成一个新的拷贝函数,当前执行的函数bindGetName()this指向obj对象

4、手写bind

这是面试官最喜欢的环节了

思路:

  • bind()方法返回一个新函数,因此需要定义一个函数来返回新函数。
  • 在新函数中,需要使用apply()call()方法来调用原始函数并传递正确的this值和参数。
  • 新函数需要接受一个thisArg参数来指定要绑定的对象,并可以接受任意数量的其他参数。

代码:

/**
 * 手写bind
 * @returns {function(): any}
 */
Function.prototype.myBind = function () {
  // 处理函数
  let args = Array.from(arguments);
  let thisArg = args.shift();
  // 暂存this
  let thisFunc = this;
  // 因为需要构造函数,所以不能是匿名函数了
  const fBound = function () {
    const newArgs = args.concat(Array.from(arguments));
    // 判断是否为构造函数
    thisArg = this instanceof fBound ? this : thisArg;
    return thisFunc.apply(thisArg, newArgs);
  }
  // 直接将原函数的prototype赋值给绑定函数
  fBound.prototype = this.prototype;
  // 返回
  return fBound;
}

简述代码:

  1. 通过Array.from()arguments转化为数组对象,通过shift()取出thisArg
  2. 使用thisFunc暂存当前函数的this
  3. 创建一个闭包函数fBoundnewArgs接收合并处理的arguments
  4. 判断fBound是否为构造函数,如果是构造函数,返回闭包的this,反之,返回外部拿到的thisArg,使用thisArg来接收。
  5. 使用thisFunc.apply传递thisArg值和参数newArgs
  6. 直接将原函数的prototype赋值给fBound
  7. 返回fBound

5、使用场景

5.1、创建绑定函数

这是bind最基本的一种使用方式了,也就是创建一个新的函数

代码:

this.name = 'guizimo'
let obj = {
  name: 'zimo',
  getName: function() {return this.name}
}

console.log(obj.getName())    // zimo

let newGetName = obj.getName
console.log(newGetName())     // guizimo

let bindGetName = newGetName.bind(obj)
console.log(bindGetName())     // zimo

简述代码:

  1. 第一次打印zimo,可以理解为是打印对象内的一个属性,此时的this是指向obj对象
  2. 第二次打印guizimo,因为当前环境是对象外,因为当前执行的函数是newGetName(),因此函数内部的this指向全局对象。
  3. 通过bind生成一个新的拷贝函数,当前执行的函数bindGetName()this指向obj对象

5.2、创建偏函数

如果需要创建一个自定义函数,需要固定部分参数,那么bind就有它独特的作用了

代码:

function add (a, b) {
  return a + b
}

const res1 = add(1, 2)
console.log(res1)  // 3

// 创建一个偏函数,将1作为预设的参数
const addP = add.bind(null, 1)

const res2 = addP(2)
console.log(res2)  // 3

const res3 = addP(3)
console.log(res3)  // 4

const res4 = addP(4)
console.log(res4)  // 5

简述代码:

  1. 创建了一个add 函数,调用add(1, 2),正常打印3
  2. 创建一个偏函数addP,将1作为预设的参数,调用addP(2),也可以正常打印3,后续调用addP(3)addp(4),皆打印正确的数值,实现了对一个参数的固定

6、在工作中有遇到bind的使用场景吗

6.1、React中bind的场景

JSX中传递的事件不是一个字符串,而是一个函数(如:onClick={this.handleClick}),此时onClick即是中间变量,所以处理函数中的this指向会丢失。

代码:

<button onClick={this.handleClick.bind(this)}>点击</button>

//此时this指向是当前实例对象
handleAdd = () => {
    console.log(this)
    this.setState({
        ...
    })
}

解决这个问题就是给调用函数时bind(this),从而使得无论事件处理函数如何传递,this指向都是当前实例化对象。或者使用箭头函数声明一个函数,这样函数内的this也是指向当前实例。

6.2、在事件处理程序中访问事件目标的this值

在JavaScript中,需要在事件处理程序中访问事件目标的this值。在这种情况下,可以使用bind()方法将事件处理程序绑定到事件目标上,以便在调用事件处理程序时,this关键字始终指向事件目标。

代码:

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  // 在这里可以使用 this 访问按钮元素的属性和方法
}.bind(button));

博客说明与致谢

文章所涉及的部分资料来自互联网整理,其中包含自己个人的总结和看法,分享的目的在于共建社区和巩固自己。

引用的资料如有侵权,请联系本人删除!

感谢勤劳的自己,个人博客,GitHub,公众号【归子莫】,小程序【子莫说】

如果你感觉对你有帮助的话,不妨给我点赞鼓励一下,好文记得收藏哟!

幸好我在,感谢你来!文章来源地址https://www.toymoban.com/news/detail-594350.html

到了这里,关于【JavaScript】你真的熟悉bind吗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javaScript手写专题——实现instanceof/call/apply/bind/new的过程/继承方式

    目录 原型链相关 手写instanceof 实现一个_instance方法,判断对象obj是否是target的实例  测试  手写new的过程 实现一个myNew方法,接收一个构造函数以及构造函数的参数,返回构造函数创建的实例对象 测试myNew方法 手写类的继承 ES6:class+extends实现继承 组合继承:调用两次父类

    2024年04月14日
    浏览(92)
  • 【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind

    🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结) 🧑‍💼个人简介:大三学生,一个不甘平庸的平凡人🍬 👉

    2024年02月21日
    浏览(78)
  • 记录--你真的能区分JavaScript的各种导入导出方式吗?

    我们在无论是在查阅别人的代码,还是在实际项目开发的过程中,肯定都会使用导入导出的功能,有时候我们会搞混这几种方式到底有什么区别,今天我们就来细致的区分一下: 我们都知道最常见的几种导出方式无非是 export , exports , export default , module.exports 这几种,常

    2024年02月08日
    浏览(35)
  • JavaScript的选择结构你真的了解吗?(看完这一篇就够了)

    ​🌈个人主页:前端青山 🔥系列专栏:JavaScript篇 🔖 人终将被年少不可得之物困其一生 依旧 青山 ,本期给大家带来JavaScript篇专栏内容:JavaScript-选择结构 目录 选择结构 实现选择结构的语句 三元(目)运算符 案例 判断一个年份是闰年还是平年 判断一个数是偶数还是奇数

    2024年02月04日
    浏览(37)
  • JavaScript【History 对象、Cookie 对象 、封装cookie操作、apply、call和bind函数、面向对象简介、new 命令】(十八)

    目录 History 对象 History.back()  History.forward()  History.go() 

    2024年02月12日
    浏览(52)
  • JavaScript的基本内容学习

    概要 前端的组成 层次 作用 HTML(结构层) 利用语义化标签搭建网页 CSS(样式层) 利用样式进行美化网页、进行网页布局 JavaScript(行为层) 可以给网页添加动态效果 JavaScript 是一种高级、解释型的编程语言,由网景公司(Netscape)在1995年开发,现由ECMA国际通过ECMAScript标准规范进行

    2024年01月19日
    浏览(43)
  • JavaScript 动态生成内容的过程

            网页使用 JavaScript 动态生成内容的过程涉及到 JavaScript 脚本与网页的 HTML 和 CSS 的交互。基本过程如下: 浏览器加载 HTML :首先,浏览器加载网页的 HTML 内容,这构成了页面的基本结构。 执行 JavaScript :随后,浏览器执行嵌入或链接在 HTML 中的 JavaScript 脚本。这些脚

    2024年01月21日
    浏览(34)
  • javascript获取设置输入框内容

    代码, 运行如下;  单击按钮;    

    2024年02月13日
    浏览(50)
  • JavaScript丨使用正则截取字符串内容

    参考来源: JS 正则截取字符串 - 义美-小义 - 博客园 js正则去除双引号和斜杠_周达的博客-CSDN博客_js去掉斜杠 js将字符串中所有反斜杠替换成正斜杠/_Name is Q的博客-CSDN博客_js字符串替换斜杠

    2024年02月10日
    浏览(34)
  • JavaScript 获取 input 输入框内容的方法

    在 JavaScript 中获取 input 输入框内容的方法有以下几种: 使用 document.getElementById 方法获取输入框元素,再通过 value 属性获取输入框内容。示例代码如下 var input = document.getElementById(\\\"myInput\\\"); var inputValue = input.value;   使用 document.querySelector 方法获取输入框元素,再通过 value 属性

    2024年02月05日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包