时间:2021-05-25
前言
bind()接受无数个参数,第一个参数是它生成的新函数的this指向,比如我传个window,不管它在何处调用,这个新函数中的this就指向window,这个新函数的参数就是bind()的第二个、第三个、第四个....第n个参数加上它原本的参数。(行吧,我自己都蒙圈了)
示例介绍
我们还是看看栗子比较好理解,举个bind()最基本的使用方法:
this.x = 9; var module = { x: 81, getX: function() { return this.x; }};module.getX(); // 返回 81var retrieveX = module.getX;retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域// 创建一个新函数,将"this"绑定到module对象// 新手可能会被全局的x变量和module里的属性x所迷惑var boundGetX = retrieveX.bind(module);boundGetX(); // 返回 81这里很明显,我们在window对象下调用retrieveX,得到的结果肯定是window下的x,我们把module对象绑定到retrieveX的this上,问题就解决了,不管它在何处调用,this都是指向module对象。
还有bind()的其他参数,相信第一次接触bind()的朋友看到上面的定义都会蒙圈。
还是举个栗子:
function list() { return Array.prototype.slice.call(arguments);}var list1 = list(1, 2, 3); // [1, 2, 3]// 创建一个拥有预设初始参数的函数var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]list函数很简单,把传入的每个参数插入到一个数组里,我们用bind()给list函数设置初始值,因为不用改变list中this的指向,所以直接传undefined,从第二个参数开始,就是要传入list函数的值,list2和list3的返回值很好的说明了一切。
我自己一般使用的bind()的场景是配合setTimeout函数,因为在执行setTimeout时,this会默认指向window对象,在使用bind()之前,我是这么做的:
function Coder(name) { var that = this; that.name = name; that.getName = function() { console.log(that.name) }; that.delayGetName = function() { setTimeout(that.getName,1000) }; } var me = new Coder('Jins') me.delayGetName()//延迟一秒输出Jins在函数内顶层定义一个that缓存this的指针,这样不论怎么调用,that都是指向 Coder的实例,但是多定义一个变量总是让人不太舒服。
使用bind()就简单多了:
function Coder(name) { this.name = name; this.getName = function() { console.log(this.name) }; this.delayGetName = function() { setTimeout(this.getName.bind(this),1000) }; } var me = new Coder('Jins') me.delayGetName()//延迟一秒输出Jins这样就OK了,直接把setTimeout的this绑定到外层的this,这肯定是我们想要的!
最后附上参考地址:
Function.prototype.bind()
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
自定义指令:以v开头,如:v-mybind。代码示例:directives:{mybind:{bind:function(el){el.value="thisi
1、通过映射的方式,给对象绑定多个事件。2、示例代码:复制代码代码如下:映射方式绑定不同事件$(function(){$(".txt").bind({focus
复制代码代码如下:$(function(){$(window).bind('scroll',function(){if($(document).scrollTo
复制代码代码如下://ECMAScript5Function.prototype.bind函数兼容处理(function(){if(!Function.prot
在Javascript中,Function是一种对象。Function对象中的this指向决定于函数被调用的方式。使用apply,call与bind均可以改变函