红宝书 第22章整理——高级技巧（绑定+拖拽）

本章讲了几个高级函数，还有如何防止篡改，如何实现拖拽等等，在此只讲函数绑定+拖拽

1、函数绑定（bind（））

目的：

创建一个函数，可以在特定的this环境中调用另一个函数。常常与回调函数一起用，将函数作为变量传递，保留代码的执行环境。

如果不绑定函数，看下面代码：

var handler = {   message:"aaaa",   handle: function(event){      alert(this.message);   }};var btn = document.getElementById("button");btn.onclick = function(){   handler.handle();}

运行时不会提示aaaa，而是undefined。因为没有保存handler.handle();的环境，this会指向DOM按键，而不是handler。

我们可以用闭包来解决这个问题。

var handler = {   message:"aaaa",   handle: function(event){      alert(this.message);   }};var btn = document.getElementById("button");btn.onclick = function(){  var eve = function(event){         handler.handle(event);   }}

闭包使用太多不好，所以大多数的库都自己封装好了一个bind函数，接受一个函数和一个环境

function bind(fn, context){  return function(){    return  fn.apply(context, arguments); }}

在bind中创建了一个闭包，并使用apply调用传入的函数，并给了context对象和参数。

这样我们就可以直接调用bind函数了

var handler = {   message:"aaaa",   handle: function(event){      alert(this.message);   }};var btn = document.getElementById("button");btn.onclick = function(){   bind(handler.handle , handler)}

2、拖放

在js中，实现鼠标点击按下，拖拽，图片也跟着运动，鼠标抬起。

其实是获取鼠标onmousedown事件，获取鼠标onmousemove，计算鼠标移动的距离，并实时更新图片的位置，设置left与top距离，伪造出图片被拖拽了的现象。

最简单的版本（有bug）：

document.onmousemove = function(event){   var img = document.getElementById("image");   img.style.left = event.clientX +"px";   img.style.top = event.clientY +"px"; }

百度IFE中有一个任务做了这个，在GitHub中参考