bindAll 这个方法可以把一些方法绑定到一个对象上面，这样在执行这个方法的时候， 在这些方法里面，this 这个关键词表示的就是跟这些方法绑定到一块儿的那个对象。下面，我们再通过一个演示来理解一下 bindAll 的作用。

先打开 index.html 这个文档 ...

div.container>h1.page-header{bindAll}+button.btn.btn-default.btn-lg*2

在这上面添加两个按钮 .. 一个是播放按钮 ... 上面可以添加一个 id 叫做 play ... 再添加一些其它的 css 类，这些类的样式是在 bootstrap 这个框架里面定义的。

再添加一个 暂停 按钮 .. 上面添加一个叫 pause 的 id ...

<div class="container">
<h1 class="page-header">bindAll</h1>
<button id='play' class="btn btn-default btn-lg">播放</button>
<button id='pause' class="btn btn-default btn-lg">暂停</button>
</div>

回到 data.js .. 然后我们可以在 album 这个对象里面，添加两个方法 .. 一个叫 play ... 让它做的事暂时只是返回 this 这个关键词表示的东西 ...

play: function() { console.log('正在播放：' + this.title); },

再添加一个叫 pause 的方法 ... 它作的事儿也是返回 this 这个关键词代表的内容 ...

pause: function() { console.log('暂停播放：' + this.title); }

然后我们可以去监听播放还有暂停这两个按钮的点击事件 ... 当有人点击它们的时候，去执行 album 里的 play 这个方法，还有 pause 这个方法 ...

用 jQuery 去绑定事件 .. 先找到页面上的 id 是 play 的元素，也就是播放按钮元素 ... 用 on 这个方法，添加的事件是 click ... 这个事件发生的时候，去执行 album 对象里面的 play 这个方法 ...

再用类似的方法，去给 pause 按钮绑定一个 click 事件 ... 事件发生的时候，去执行 album 对象的 pause 方法 ...

jQuery('#play').on('click', album.play);
jQuery('#pause').on('click', album.pause);

演示

下面我们到控制台上试一下 ... 点击页面上的 播放 按钮 ... 这会触发 click 事件，这个事件发生的时候去执行的是 album 对象里面的 play 方法 ... 这个方法要做的事就是返回 this 这个关键词表示的东西 ...

你会发现，返回的是发生点击事件的这个按钮元素 ...

再点一下 暂停 ... 返回的是停止这个按钮元素 .. 这其实并不是我们想要的，我们想要的让方法里面的 this 表示的方法所属的那个对象 ... 这样我们就可以使用 this 关键词得到这个对象里面的某些属性的值 ...

bindAll

实现这个功能，我们就可以去使用 Underscore 里面的 bindAll 这个方法 ... 回到 app.js ...

输入 bindAll ... 先指定一下绑定的对象 .. 这里就是 album 这个对象 ... 它的后面就是绑定到这个对象上的方法的列表 ... 方法之间可以使用逗号分隔开 ... 在这里我们要绑定的是 play 还有 stop 这两个方法 ...

_.bindAll(album, 'play', 'pause');

这样在 play 还有 pause 这两个方法里面，this 表示的就是 album 这个对象了 ... 再回到上面，去修改一下这两个方法在控制台上输出的东西 ..

play: function() { console.log('正在播放：' + this.title); },
pause: function() { console.log('暂停播放：' + this.title); }

这里的 this.title ，输出的就应该是 album 这个对象里的 title 属性的值 .. 应该就是 继续革命 这几个字儿 ..

保存 ... 再回到浏览器 ...

刷新 ... 然后点击 播放 .. 在控制台上，会显示 正在播放：继续革命 ...

然后再点一下 暂停 ...

会输出，暂停播放：继续革命 ..