javascriptbind,JavaScriptbind函数
关于原生js中bind函数的简单实现
今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下,
if
(!Function.prototype.bind)
{
Function.prototype.bind
=
function
(oThis)
{
if
(typeof
this
!==
"function")
{
//
closest
thing
possible
to
the
ECMAScript
5
internal
IsCallable
function
throw
new
TypeError("Function.prototype.bind
-
what
is
trying
to
be
bound
is
not
callable");
}
var
aArgs
=
Array.prototype.slice.call(arguments,
1),
fToBind
=
this,
fNOP
=
function
()
{},
fBound
=
function
()
{
return
fToBind.apply(this
instanceof
fNOP
oThis
?
this
:
oThis
||
window,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype
=
this.prototype;
fBound.prototype
=
new
fNOP();
return
fBound;
};
}
这是官方文档上的实现,我分二个方面来谈我要说的东西,
第一个是参数,agruments的使用
var
aArgs
=
Array.prototype.slice.call(arguments,
1),这里是将bind函数的参数数组取出来,第一个参数不要(就是不要oThis)也就是要被绑定方法的那个对象,第二个是
aArgs.concat(Array.prototype.slice.call(arguments)));
这里是用了数组的方法,把参数插在参数数组后面,要注意,这个函数是要被return
出去然后执行的,他的参数数组是return出去的那个fBound函数的参数数组,所以上下两个参数数组是不一样的,有点像柯里化。
第二个是上下文,在其中上下文的变化比较难理解,bind函数主要就是为了绑定上下文来使用的
fToBind
=
this
这里是保存了对象的上下文,紧接着下面的apply方法让要被绑定的那个对象可以使用该上下文
fNOP.prototype
=
this.prototype;
fBound.prototype
=
new
fNOP();
这里是以fNOP为中介把this.prototype这个原对象的属性给fBound,确保fBound是在定义的时候的那个上下文里面执行。本来
bound.prototype
=
self.prototype就可以将原属性集成过来了,但是这样两个对象属性都指向同一个地方,修改
bound.prototype
将会造成self.prototype
也发生改变,这样并不是我们的本意。所以通过一个空函数
nop
做中转,能有效的防止这种情况的发生。
以上这篇关于原生js中bind函数的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
JS之bind浅析及应用场景
fn.bind(obj, args)
bind() 方法会创建一个函数,该函数的 this 指向了传入的第一个参数,当 bind() 的参数为空时, this 指向全局对象。如浏览器中的 window 。
因为 js 是一门 Duck typing 语言,所以我们可以通过 bind 实现一些共有方法。
有的时候我们需要针对特定的 this 调用某些方法。写起来比较麻烦,这个时候就可以使用 bind 创建一个 shortcut 方便调用。
bind 也可以绑定构造函数,但是当执行生成的函数时,会忽略this指向,即使在绑定时已经对其赋值。
js bind多参数的问题
,bind(),调用一个新创建的函数,其新函数的this值会被绑定到给定bind()的第一个参数。?
es6,参数表达,传参
bind(this),生成的新的updateChangedOptionAndMask,会把本身this的updateChangedOptionAndMask方法覆盖掉吗
不会覆盖,注入到this对象是一个新的引用,不是同一个东西,注入是一个未知的引用不能直接通过对象.的方法是使用,必须将他付给一个新的方法,才能使用。
var newfunc=func.bind(this,1,2);
生成一个新的方法,却不能想普通函数的参数传递调用他,而是将他们的参数累积起来。
js bind和unbind选择题,选什么?
选A
可以同时绑定鼠标事件和键盘事件。如下
$("input").bind({
keydown:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","blue");}
});
B、可以移除多个事件,也可以移除单个事件,后面部分错误。
C、有点模糊,如果是多选感觉也可以A、C。如果单选就是A。这个太模糊的说法了,如果合理的应该是:相反的,而不是对应的。
D、bind方法是绑定方法,不是做移除的。
javascript bind的用法
javascript的bind
bind主要是为了改变函数内部的this指向,这个是在ECMA5以后加入的,所以IE8一下的浏览器不支持
bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.
可以看这段实例:
var?logger?=?{
????x:?0,???????
????updateCount:?function(){
????????this.x++;
????????console.log(this.x);
????}
}
?
//?下面两段代码的实现是一样的
?
document.querySelector('button').addEventListener('click',?function(){
????logger.updateCount();
});
?//用这种方式让代码更简洁,当然这只是bind的一种场景
document.querySelector('button').addEventListener('click',?logger.updateCount.bind(logger));
javascript中apply,call和bind的区别
1 call(), apply(),bind()都属于Function.prototype的一个内置方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,主要就是围绕这this对象的改变操作。下面已代码逐一展示各自的用法。
2 var a = {
user:"call调用",
fn:function(){
console.log(this.user); //对应的user
}
}
var b = a.fn;
b.call(a);
意思是:call方法,给第一个参数添加要把b添加到哪个环境中,简单来说,this就会指向那个对象。
3 var a = {
user:"applay调用",
fn:function(){
console.log(this.user); // applay调用
}
}
var b = a.fn;
b.apply(a);
apply方法和call方法有些相似,它也可以改变this的指向;不同的是 ,但是不同的是,第二个参数必须是一个数组 如下代码
var a = {
user:"appy调用",
fn:function(e,ee){
console.log(this.user); // applay调用 第二个参数书数组
console.log(e+ee);
}
}
var b = a.fn;
b.apply(a,[10,1]);
4 上bind方法返回的是一个修改过后的函数
var a = {
user:"bind调用",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
b.bind(a);