javascript中bind函数的效应实例介绍

2019-09-08 06:09 来源:未知
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button {background-color:#0f0;}
</style>
</head>
<body>
<button id="button"> 按钮 </button>
<input type="text">
<script>
var button = document.getElementById("button");
button.onclick = function() {
alert(this.id); // 弹出button
};
//可以看出上下文的this 为button
</script>
</body>
</html>

javascript中bind函数的意义实例介绍,javascriptbind

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button {background-color:#0f0;}
</style>
</head>
<body>
<button id="button"> 按钮 </button>
<input type="text">
<script>
var button = document.getElementById("button");
button.onclick = function() {
alert(this.id); // 弹出button
};
//可以看出上下文的this 为button
</script>
</body>
</html>

那时候参与bind

复制代码 代码如下:

 var text = document.getElementById("text");
 var button = document.getElementById("button");
 button.onclick = function() {
 alert(this.id); // 弹出button
 }.bind(text);
 //能够见见上下文的this 为button

此时会意识this改变为text

函数字面量里也适用,指标是维持内外指向(this)不改变。

var obj = {
color: "#ccc", 
element: document.getElementById('text'),
events: function() {
document.getElementById("button").addEventListener("click", function(e) {
console.log(this);
this.element.style.color = this.color;
}.bind(this))
return this;
},
init: function() {
this.events();
}
};
obj.init();

此时点击开关text里的字会变色。可知this不为button而是obj。

bind()的点子在ie,6,7,第88中学不适用,需求扩充通过扩张Function prototype能够实现此情势。

if (!Function.prototype.bind) {

Function.prototype.bind = function(obj) {
var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function() {
}, bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}),
args.concat(slice.call(arguments)));
};

nop.prototype = self.prototype;

bound.prototype = new nop();

return bound;
};
}

那会儿得以看来ie6,7,第88中学也补助bind()。

复制代码 代码如下:

slice = Array.prototype.slice,

array = Array.prototype.slice.call( array, 0 );

将类似数组转变为数组

那时到场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').add伊芙ntListener('click', logger.updateCount.bind(logger));  

复制代码 代码如下:

javascript:对于Functionprototypebind()这一个方式

Function.prototype.bind=function(thisArg){ var fn=this, slice=Array.prototype.slice, args=slice.call(arguments,1);//arguments1 var a1 = arguments; return function(){ alert(a1 == arguments);// 决断是不是为同贰个 return fn.apply(thisArg,args.concat(slice.call(arguments)));//arguments2 }};((function(){}).bind())(2);// 总是alert出false不是。第三个arguments是只thisArg,第二个则是指再次回到的十分函数的arguments。

Function.prototype.bind=function(thisArg){ var fn=this, slice=Array.prototype.slice, args=slice.call(arguments,1);//arguments1 alert(arguments[0]);// alert出1 return function(){ alert(arguments[0]);// alert出2 return fn.apply(thisArg,args.concat(slice.call(arguments)));//arguments2 }};((function(){}).bind(1))(2);  

!DOCTYPE htmlhtmlheadmeta charset="utf-8"stylebutton {background-color:#0f0;}/style/headbodybutton id="button" 按钮...

 var text = document.getElementById("text");
 var button = document.getElementById("button");
 button.onclick = function() {
 alert(this.id); // 弹出button
 }.bind(text);
 //能够看看上下文的this 为button

这会儿会意识this改动为text

函数字面量里也适用,指标是维持内外指向(this)不改变。

var obj = {
color: "#ccc", 
element: document.getElementById('text'),
events: function() {
document.getElementById("button").addEventListener("click", function(e) {
console.log(this);
this.element.style.color = this.color;
}.bind(this))
return this;
},
init: function() {
this.events();
}
};
obj.init();

这会儿点击开关text里的字会变色。可知this不为button而是obj。

bind()的法子在ie,6,7,第88中学不适用,需求扩展通过扩大Function prototype能够兑现此措施。

if (!Function.prototype.bind) {

Function.prototype.bind = function(obj) {
var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function() {
}, bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}),
args.concat(slice.call(arguments)));
};

nop.prototype = self.prototype;

bound.prototype = new nop();

return bound;
};
}

此时能够见到ie6,7,第88中学也支撑bind()。

复制代码 代码如下:

slice = Array.prototype.slice,

array = Array.prototype.slice.call( array, 0 );

将类似数组调换为数组

您大概感兴趣的篇章:

  • javascript中的Function.prototye.bind
  • javascript之bind使用介绍
  • js apply/call/caller/callee/bind使用格局与差距分析
  • js bind 函数 使用闭包保存实行上下文
  • JavaScript中的prototype.bind()方法介绍
  • js设置组成火速键/tabindex作用的点子
  • javascript bind绑定函数代码
  • 浅谈javascript中call()、apply()、bind()的用法
  • JS中更换this指向的措施(call和apply、bind)
  • 深远领会JS中的Function.prototype.bind()方法
TAG标签:
版权声明:本文由990888藏宝阁发布于关于计算机,转载请注明出处:javascript中bind函数的效应实例介绍