首页 技术 正文
技术 2022年11月17日
0 收藏 603 点赞 4,702 浏览 2257 个字

理解建议:如果对this指向规则不了解的话,建议先了解this指向规则,最好还能对call和apply的使用和内部原理也有所了解,不然直接研究bind还是会有些难度的。

一、bind()的使用

//html
<button id="btn"></button>
//js
var list = {
init:function(){
this.ms = "duyi";
this.dom = document.getElementById("btn");
this.bindEvent();
},
bindEvent:function(){
this.dom.onclick = this.showMessage.bind(this);
},
showMessage:function(){
alert(this.ms);
}
}
list.init();

在单对象编程中,有一种非常典型的bind()的应用,就以上面的示例来说,当出现给DOM绑定事件回调函数时,又还需要继续保持函数的this指向原来的对象,就可以按照示例的这种方式来实现:this.dom.onclick = this.showMessage.bind(this);

我们知道call和apply可以改变函数执行的this指向,但是call和apply都是立即执行该函数,而bind是将this指向绑定到指定的对象上,并且返回函数并维持this指向这个对象。接下来再来看看bind的参数设置示例:

function show(x,y,z,w){
console.log(this,x,y,z,w);
}
var DuyiO = {
x : 20
}
var newShow = show.bind(DuyiO,"1","2",3);
newShow(4);//Object {x: 20} "1" "2" 3 4

bind的参数和call非常类似,唯一的区别就在于除了调用bind时传入参数外,还可以在正式执行时传入参数,两次传入参数以拼接的方式作为函数执行的实参。但是需要注意的是,第一个参数作为函数的this指向对象必须要在调用bind方法时传入,如果调用bind方法不传入任何参数,函数的this指向就会绑定到window上。比如下面这种情况:

var newShow = show.bind();
newShow(DuyiO,"1","2",3,4);//Window {…} Object {x: 20} "1" "2" 3

最后还有一个基本上不会被应用到的功能,就是返回的函数被new关键字用来创建一个新的对象,而构造函数还是原函数本身(第二个示例中的show)。这个功能在模仿bind源码不能100%实现,但是也可以间接的实现其需要的功能。

二、bind手写实现

1.首先实现函数调用bind修改this指向即参数设置:

 Function.prototype.MyBind = function(target){
var self = this;
var args = [].slice.call(arguments,1);
var f = function(){
return self.apply( target || window,args );
}
return f;
}

2.接着再来实现函数正式调用执行时传入设置:

 Function.prototype.MyBind = function(target){
var self = this;
var args = [].slice.call(arguments,1);
var f = function(){
var _arg = [].slice.call(arguments,0);
return self.apply( target || window,args.concat(_arg) );
}
return f;
}

3.最后实现当返回函数被new操作符引用作为构造函数依然指向原函数(模拟实现功能):

 Function.prototype.MyBind = function(target){
var self = this;
var args = [].slice.call(arguments,1);
var temp = function(){};
var f = function(){
var _arg = [].slice.call(arguments,0);
return self.apply(this instanceof temp ? this : ( target || window ),args.concat(_arg) );
}
temp.prototype = self.prototype;
f.prototype = new temp();
return f;
}

这个模拟实现主要有两个关键点需要重点理解:

a.代码第七行中的this instanceof temp ? this : ( target || window ):当返回函数f被new作为构造函数引用时,这时候this指向了函数执行时内部隐式添加在变量对象上的this(这里不清楚的话可以参考JavaScript中的this指向规则),当然普通调用执行就是指向self。

b.代码第九行和第十行为什么需要改变f的原型,这就是我前面讲的模拟实现方法构造,我们知道bind在JS内部实现的是其返回函数还是那个原来的函数,这里我们多加了一层f来实现的,所以在函数被当做构造函数的时候,将f的原型指向self也可以实现其功能,但是构造的实例对象是基于f实现的,最终构造原型链还是指向self原型,该有的方法属性依然都会有。只是在原型链上多了f这个包装层。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,071
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,549
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,397
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,174
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,809
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,889