javascript中bind函数的作用

我就是我 2022-10-02 14:42 143阅读 0赞

javascript的bind的作用

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <style>
     6             button {
          background-color:#0f0;}
     7         </style>
     8     </head>
     9     <body>
    10         <button id="button"> 按钮 </button>
    11         <input type="text">
    12         <script>
    13             var button = document.getElementById("button");
    14                 button.onclick = function() {
    15                     alert(this.id); // 弹出button
    16                 };
    17                 //可以看出上下文的this 为button
    18         </script>
    19     </body>
    20 </html>

此时加入bind

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1             var text = document.getElementById("text");
    2             var button = document.getElementById("button");
    3                 button.onclick = function() {
    4                     alert(this.id); // 弹出button
    5                 }.bind(text);
    6                 //可以看出上下文的this 为button

此时会发现this改变为text

函数字面量里也适用，目的是保持上下指向（this)不变。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var obj = {
     2             color: "#ccc",        
     3             element: document.getElementById('text'),
     4                     events: function() {
     5                 document.getElementById("button").addEventListener("click", function(e) {
     6                     console.log(this);
     7                 this.element.style.color = this.color;
     8                }.bind(this))
     9         return this;
    10     },
    11     init: function() {
    12         this.events();
    13     }
    14 };
    15    obj.init();

此时点击按钮text里的字会变色。可见this不为button而是obj。

bind（）的方法在ie,6,7,8中不适用，需要扩展通过扩展Function prototype可以实现此方法。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1  if (!Function.prototype.bind) {
     2 
     3         Function.prototype.bind = function(obj) {
     4             var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function() {
     5             }, bound = function() {
     6                 return self.apply(this instanceof nop ? this : (obj || {}),
     7                         args.concat(slice.call(arguments)));
     8             };
     9 
    10             nop.prototype = self.prototype;
    11 
    12             bound.prototype = new nop();
    13 
    14             return bound;
    15         };
    16     }

此时可以看到ie6,7,8中也支持bind()。

slice = Array.prototype.slice,

或

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

将类似数组转换为数组

转载于:https://www.cnblogs.com/mole/p/3994669.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220109/9e742e0db3424c7cb18966baf01882a9.png