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);

}

};

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZWJheQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

原始排序方式（将数字转换成字符排序）

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZWJheQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

代理后排序方式

 

注意：此处仅作为原型方法代理的样例。

在实际开发中。应该尽量避免对原生对象原型方法做代理。

重载

在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.name = "";

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);

};

好了，以上就是这次的方法代理介绍。因为方法代理会混乱代码逻辑使得代码结构变得不易理解。

在日常开发过程中，我们应该尽量避免使用它。仅仅有在代理重载，或者更改难以理解的遗留代码的部分逻辑时使用它。

从而避免将双刃剑误伤了自己。