Function.prototype.toString 的使用技巧

Function.prototype.toString这个原型方法可以帮助你获得函数的源代码，比如：

function hello ( msg ){
  console.log("hello")
}

console.log( hello.toString() );

输出:

'function hello( msg ){ 
  console.log("hello") 
}'

这个方法真是碉堡了…, 通过合适的正则, 我们可以从中提取出丰富的信息.

函数名
函数形参列表
函数源代码

这些信息提供了javascript意想不到的灵活性, 我们来看看野生的例子吧.

提取AMD模块定义里的依赖列表.

熟悉AMD或者被CMD科普过的同学应该知道，AMD中是这样定义模块的.

// 模块c的定义
define( ['a', 'b'] ,function ( a, b ) {
  return {
    action: function(){
        return a.key + b.key;
    }
  }
});

当此模块加载完成的同时define函数将被运行，传入依赖列表的'b'和'a'指导模块加载器需要先获得他们的模块定义, 并以参数形式注入到c模块的factory函数. 所以明确声明的['a', 'b']依赖列表至关重要，它指导模块下一步的策略.

事实上，AMD规范中也定义了一种叫simplified commonjs wrapping的写法, 可以以类commonjs的写法来定义一个模块.

define(function (require, exports, module) {
  var a = require('a'),
      b = require('b');

  exports.action = function () {
    return a.key + b.key;
  };
});

依赖变成了【使用注入到模块的require函数引入】(如require('a')), 但是这就带来了一个问题, 如何获得此模块的依赖列表?

答案当然是使用function.toString.

var rRequire = /require(["'](w+)["'])/g;

function getDependencies( fn ){
  var map = {};
  fn.toString().replace(rRequire, function(all, dep){
    map[dep] = 1;
  })
  return Object.keys(map);
}


getDependencies(function(require, exports){

    var a = require("a");
    var b = require("b");

    exports.c = require("a").key + b.key;
})

// => ["a", "b"]

输出["a", "b"], 我们成功获得依赖列表.

当然，这里的正则是简化版的，实际要处理的情况要复杂的多，比如你至少要过滤掉注释里的信息.

多行字符串

关注ES6的同学应该知道，在ES6中新增一个特性叫Template String, 除了支持插值可以获得微弱的模板能力之外，它还有一个能力就是支持多行字符串的定义

这个在你定义多行模板字符串的时候非常有用, 可以避免不直观的字符串拼接操作.

var template = `
<div>
   <h2>{blog.title}</h2>
   <div class='content'>{blog.content}</div>
</div>
`

这个等同于

var template = "<div>" +
   "<h2>{blog.title}</h2>" +
   "<div class='content'>{blog.content}</div>"+
"</div>"

Duang~ function.toString又闪亮登场, 一解我们青黄不接时的尴尬.

var rComment = //*([sS]*?)*//;
// multiply string
function ms(fn){
  return fn.toString().match(rComment)[1]
};

ms(function(){/*
  <div>
    <h2>{blog.title}</h2>
    <div class='content'>{blog.content}</div>
  </div>
*/})

将会输出下面这段字符串

<div>
   <h2>{blog.title}</h2>
   <div class='content'>{blog.content}</div>
</div>

因为在通过fn.toString()的时候，同时会保留函数中的注释，但是注释是不会被执行的，所以我们可以安全的在注释中写一些非js语句，就比如html.

基于形参约定的依赖注入

Angular里有个很大的噱头就是它的依赖注入。

假设现在有如下一段Angularjs的代码，它定义了2个factory:greeter和runner, 以及controllerMyController.

angular.module('myApp', [])
.factory('greeter', function() {
  return {
    greet: function(msg) { alert(msg); }
  }
})
.factory('runner', function() {
  return {
    run: function() {  }
  }
})
.controller('MyController', function($scope, greeter) {
  $scope.sayHello = function() {
    greeter.greet("Hello!");
  };
});

注意这个controller会在angular内部compile遇到节点上的某个指令比如<div ng-controller="MyController">时被调用.

现在问题来了, angular如何知道要传入什么参数呢？比如上例中的controller其实是需要两个参数的.

答案是基于形参名的推测

你可以先简单理解为在每次调用factory等函数时, 对应的定义会缓存起来，例如

var cache = {
  greeter: function(){

  },
  runner: function(){

  }
}

既然如此，现在要做的就是获得依赖, function.toString可以帮助我们从形参中获得这些信息

var rArgs = /^functions*[^(]*(s*([^)]*))/m;
function getParamNames( fn ){
  var argStr = fn.toString().match(rArgs)[1].trim();
  return argStr? argStr.split(/s*,s*/): [];
}

getParamNames(function( $scope, greeter ){})

// ["$scope", "greeter"]

输出["$scope", "greeter"], 也就意味着我们获得了依赖列表，这样我们就可以从cache中获得对应的定义了.

继承中的`super()`实现.

我们先来看下教科书版本的js继承的实现

// 基类
function Mesh(){}

function SkinnedMesh( geometry, materials ){
  Mesh.call( this, geometry, materials )
  // blablabla...
}
// 避免new Mesh，带来的两次构造函数调用
SkinnedMesh.prototye = Object.create(Mesh.prototype)
SkinnedMesh.prototye.constructor = Mesh;


// other

SkinnedMesh.prototype.update = function(camera){
  Mesh.prototype.update.call(this, camera);
}

这种继承方式足够用，但是有几个问题.

调用父类函数真的足够繁琐
一旦父类发生改变，所有对父类的调用都要改写
从编程逻辑上看，这种类式继承不够直观

如果是下面这种方式呢？

var SkinnedMesh = Mesh.extend({
  // 履行构造函数职责
  init: function( geometry, materials ){
    // 由于super是关键字，修改为supr
    this.supr( geometry, materials ); // 调用父类同名方法
  },
  update: function( camera ){
    this.supr() // 调用Mesh.prototype.update
  }
})

是不是直观了很多，已经非常接近与有关键字支持的语言了. 但相信不少人还是会疑惑, 为什么在init和update中调用this.supr()为什么可以准确定位到父类不同的方法？

其实，在extend的同时就已经在查找规则封装好了, 让我们将这个问题简化为两个对象间的继承。

function extend(child, parent){
    for (var i in child ) if (child.hasOwnProperty(i) ){
      wrap(i, child, parent)
    }
    return child;
}

var rSupr = /supr/
function wrap(name, child, parent){
  var method = child[name],
    superMethod = parent[name];

  // 我们通过fn.toString() 打印出方法体，并确保它使用的this.supr()
  if( rSupr.test( method.toString() ) && superMethod) {
    superMethod = superMethod.bind(child);
    child[name] = function(arguments){
        // 保证嵌套函数调用时候正确
        var preSuper = child.supr;
        child.supr = superMethod;
        method.apply(this, arguments);
        child.supr = preSuper
    }
  }
}

var mesh = {

  init: function(){
    console.log( "mesh init ");
  },
  update: function(){
    console.log(" mesh update");
  }
}

var skinnedmesh = extend({

  init: function(){
    this.supr()
    console.log( "skinnedmesh init ");
  },
  update: function(){
    this.supr()
    console.log(" skinnedmesh update");
  }
}, mesh)

skinnedmesh.init();
skinnedmesh.update();

输出

mesh init
skinnedmesh init
mesh update
skinnedmesh update

其中, fn.toString()输出方法源码，并通过正则判断是否源码中调用了supr(). 如果是就包一层函数用来动态的制定this.supr对应的方法。

是不是挺奇妙的构想？事实上由于方法的包裹是发生在extend时，在方法运行时，是没有查找开销的，所以很多框架都使用这个技巧来实现一个简化的继承模型.

在ES6规范中，已经引入了语言级别的class支持

class SkinnedMesh extends Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    //...
  }
  update( camera ) {
    //...
    super.update( camera );
  }
}

注意构造函数里的super和update里的super()以及super.update()分别用来调用父类的构造函数和实例方法, 相当于

Mesh.call(this, geometry, materials)

Mesh.prototype.update.call(this)

序列化函数

什么是函数序列化，即将函数序列话成字符串这种通用数据格式这样可以实现程序逻辑在不同的runtime之间传递

我们这里点一个应用场景: 不依赖外部js文件时仍能使用webworker帮助我们进行并行计算

什么是webworker

在浏览器中， js的执行与UI更新是公用一个进程, 这导致它们会互相阻塞, 用户直接的感受就是, 在长时间的脚本执行中，界面会“卡住”.

特别在很多处理大列表的场景中，熟练的程序员会通过(setTimeout/setInterval/requestAnimationFrame)等方法来模拟任务分片，好为UI线程腾出时间, 这样用户的体验就是按钮可以点了，但总的完成时间其实是增加了

有没有一种一劳永逸的方法呢？ webworker

即我们可以将耗时的计算任务放置在后台运行，完成之后通过事件来通知主线程, 注意它会真正生成系统级别的线程，而不是模拟出来的。

事实上，worker分为专用worker和共享worker，我们只会涉及到前者

我们来个耗时的例子，第一个映入我脑帘的就是计算斐波那契数列, 足够简单但是足够耗时, 就它了。

<div>
  <input type="text" id="num" placeholder="请输入你要计算的数值" value=40>
  <button onclick="compute()">使用worker计算</button>
  <button onclick="compute(1)">不使用worker</button>
</div>
<hr/>
结果: <output id="result"></output>

<button>点我看看UI线程阻塞了吗</button>

<script>
  var worker = new Worker('mytask.js');
  var vnode = document.getElementById("num");
  var rnode = document.getElementById('result');

  function compute(noWorker) {
    var value = parseInt(vnode.value || 0, 10) ;

    if(noWorker){
      console.time("fibonacci-noworker")
      rnode.textContent = fibonacci( value );
      return console.timeEnd("fibonacci-noworker")
    }

    console.time("fibonacci-worker")
    worker.postMessage( value );
  }


  worker.onmessage= function(e) {
    rnode.textContent = e.data;
    console.timeEnd("fibonacci-worker");
  }

  function fibonacci(n) {
    if(n < 2) return n;
    return fibonacci( n - 1 ) + fibonacci(n - 2);
  }

</script>

对应的mytask.js,如下

onmessage = function( ev ){
  self.postMessage( fibonacci( ev.data ) );
}

function fibonacci(n) {
  if(n < 2) return n;
  return fibonacci( n - 1 ) + fibonacci(n - 2);
}

mytask.js与worker.html的文件结构如下.

└── folder
  ├── mytask.js
  └── worker.html

打开worker.html, 分别点击两个按钮, 你会发现控制台输出结果是这样的.

fibonacci-worker: 1299.735ms
fibonacci-noworker: 5198.129ms

使用worker的版本速度会更高一些，当然更关键的问题是 noworker版本阻塞的UI线程，使得button等控件都没有反应了.

使用function.toString实现单文件的Webworker运算

但是, 非worker版本有个好处就是逻辑定义都在一个文件里，而不用分散计算逻辑到子文件，有没有两全的方案呢？

答案是使用function.toString() 和 URL.createObjectURL 方法来动态创建脚本文件内容.

我们对worker.html做以下调整

<div>
  <input type="text" id="num" placeholder="请输入你要计算的数值" value=40>
  <button onclick="compute()">使用内联式的worker计算</button>
</div>
<hr/>
结果: <output id="result"></output>

<button>点我看看UI线程阻塞了吗</button>

<script>
  function workerify(fn) {
    var worker = new Worker(