JS方法代理js 代理
作者：Jiang, Jilin
JS作为一门脚本语言。十分easy上手。外加其灵活性，能够轻而易举地扩展功能。今天，我们就聊聊JS的方法代理。
方法代理是脚本语言中常见的方法扩展形式。这样的灵活的形式长处在于遇到复杂的JS代码须要扩展时，能够相对简单的抽取并改动。可是，其缺点也十分明显，会造成代码的碎片化，因而是一把双刃剑。
基本形式
var _func = obj.func;
obj.func = function() {
return _func();
};
此处。obj的func方法是原始方法。
我们使用一个_func变量保存该方法。之后重写func方法。返回调用原始的方法。
相当的好理解。
不定长參数
有时候，我们会遇到不定长參数的形式。那么我们能够做下面更改：
var _func = obj.func;
obj.func = function() {
return _func.apply(this, arguments);
};
写到这里，JS方法代理的两种形式已经写完了。这时。你可能会疑惑这样的方法代理有什么用？那么，就尾随我看看几个样例吧：
重写静态方法
出于某些原因。我们须要在console打印的同一时候，将打印传输数据到指定server上用户帮助统计数据。而在开发过程中，直接使用了原生态的console.log方法输出。那么。我们就可做例如以下改动。
首先，构建代理方法：
var _log = console.log;
console.log = function() {
return _log.apply(this, arguments);
};
接着，插入ajax调用逻辑：
console.log = function() {
var _args = Array.prototype.slice.call(arguments);
$.post("srvAddr", {userID: userID, args: _args});
return _log.apply(this, arguments);
};
能够非常easy预见效果：
原型代理
有时候，我们须要直接接管一个类的方法。
那么对应的。我们就要将其prototype中的方法做代理。如今我们如果要使得Array默认支持数字排序：
var _sort = Array.prototype.sort;
Array.prototype.sort = function() {
_sort.apply(this, arguments);
};
我们首先检測数组中的元素是否是数字。假设是则依照数字排序，否则就依照默认方式排序：
var _sort = Array.prototype.sort;
Array.prototype.sort = function() {
var _isNum = true;
for(var i = 0 ; i < this.length ; i += 1) {
if(typeof this[i] !== "number") {
_isNum = false;
break;
}
}
if(_isNum) {
return _sort.call(this, function(a, b) {
return a - b;
});
} else {
return _sort.apply(this, arguments);
}
};
原始排序方式（将数字转换成字符排序）
代理后排序方式
注意：此处仅作为原型方法代理的样例。
在实际开发中。应该尽量避免对原生对象原型方法做代理。
重载
在jQuery中，toggle方法拥有多种重载。当中一个为toggle(display)。通过接受boolean參数来决定元素显示还是隐藏。
而fadeToggle方法则不接受该參数。
让我们进行简单的代理，使其支持boolean參数：
var _fadeToggle = $.fn.fadeToggle;
$.fn.fadeToggle = function(display) {
if(arguments.length === 1 && typeof display === "boolean") {
if(display) {
return this.fadeIn();
} else {
return this.fadeOut();
}
}
return _fadeToggle.apply(this, arguments);
};
通过參数长度和接收參数类型类型推断是否调用fadeIn或fadeOut方法。假设不匹配则调用原来的fadeToggle方法。以此类推，slideToggle也能够相同适用。
*继承
继承中，我们有时候会须要调用父类方法来实现。这和java中的super有些类似。一个简单的样例。我们定义了一个Person，能够laugh。
同一时候定义一个Robot继承，是其沿用Person的laugh可是稍作改动：
var Person = function() {
= "";
this.laugh = function() {
return "Ha ha!";
};
return this;
};
var Robot = function() {
Person.apply(this);
var _laugh = this.laugh;
this.laugh = function() {
return encodeURIComponent(_laugh());
};
return this;
};
劫持
说到劫持，则和安全性開始挂钩了。
现在大多数站点都习惯于使用开源的js库来开发，可是假设碰巧被插入了恶意代码，那么安全也就变得不安全了（比如chrome中大量未经验证的游览器插件）。
下面，我们将举几个劫持的样例。
Ajax劫持
不少人以为，通过闭包的方式将重要用户參数存储在作用域内（比如动态生成的secureID）。那么即便是被插入了恶意代码也无法获取到。从而无法伪造ajax请求来获取重要信息似乎就足够了。可是假设整个ajax请求被拦截了呢？
var _ajax = $.ajax;
$.ajax = function() {
var $p = _ajax.apply($, arguments);
$p.done(function(data) {
// Do something...
});
return $p;
};
jQuery中全部ajax请求（get,post,getJSON）终于都会调用$.ajax来实现。而通过方法代理直接劫持$.ajax方法并返回一个正常promise对象，会使得页面脚本执行毫无影响。可是实际上数据已经被劫持走了。
Array劫持
Array拥有不少原型方法。比如push,pop,shift,unshift等等。我们仅仅须要简单的代理数组操作方法，便能够截获数据。
var _push = Array.prototype.push;
Array.prototype.push = function() {
// Do something...
return _push.apply(this, arguments);
};
好了，以上就是这次的方法代理介绍。因为方法代理会混乱代码逻辑使得代码结构变得不易理解。
在日常开发过程中，我们应该尽量避免使用它。仅仅有在代理重载，或者更改难以理解的遗留代码的部分逻辑时使用它。
从而避免将双刃剑误伤了自己。