老外写的js闭包

 

原文：https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

老外写的很详细，有兴趣的可以看原文。（不得不佩服老外的逻辑思维能力）

下面是老外说的一个稍微有趣的例子： 

//在这个例子中,定义了一个函数makeAdder(x),它接收一个参数x和返回一个新函数。

//返回新函数接受单个参数y,并返回x和y的总和。



//在本质上,是一个函数makeAdder工厂



//add5和add10都闭包。他们共享相同的函数体定义,但存储在不同的环境。在add5环境,x是5。至于add10而言,x是10。

function makeAdder(x) {

    return function (y) {

        return x + y;

    };

}

var add5 = makeAdder(5);

var add10 = makeAdder(10);

add5.toString(); //function (y) {  return x + y; };  makeAdder内部方法

alert(add5(2)); // 7

alert(add10(2)); // 12

 接着老外又给了一个稍微实用的的例子： 

function makeSizer(size) {

    return function () {

        document.body.style.fontSize = size + 'px';

    };

}



var size12 = makeSizer(12);

size12.toString(); //function () { document.body.style.fontSize = size + 'px'; }

var size14 = makeSizer(14);

var size16 = makeSizer(16);

 

document.getElementById('size-12').onclick = size12;

document.getElementById('size-14').onclick = size14;

document.getElementById('size-16').onclick = size16;

<a href="#" id="size-12">12</a>

<a href="#" id="size-14">14</a>

<a href="#" id="size-16">16</a> 

 

老外开始慢慢引入重点了，还是看代码：

//闭包的模块模式 

//创建一个单一的环境,共享三功能:增量计数器。减量计数器。计数器值。

//这三个公共函数闭包,共享相同的环境。

//由于JavaScript的词法作用域,他们各自都能访问内部私有changeBy函数 privateCounter变量。

var Counter = (function () {

    var privateCounter = 0;    //私有变量

    function changeBy(val) {   //私有函数

        privateCounter += val;

    }

    return {

        increment: function () {   //返回方法

            changeBy(1);           //调用内部私有函数

        },

        decrement: function () {    

            changeBy(-1);

        },

        value: function () {       

            return privateCounter;

        }

    }

})();



 

alert(Counter.value()); /* Alerts 0 */

Counter.increment();

Counter.increment();

alert(Counter.value()); /* Alerts 2 */

Counter.decrement();

alert(Counter.value()); /* Alerts 1 */

 

怎么样，老外讲的例子还容易懂吧。

上面单一环境中，三个公共函数还是用的同一个变量。接着看：

var makeCounter = function () {

    var privateCounter = 0;

    function changeBy(val) {

        privateCounter += val;

    }

    return {

        increment: function () {

            changeBy(1);

        },

        decrement: function () {

            changeBy(-1);

        },

        value: function () {

            return privateCounter;

        }

    }

};



var Counter1 = makeCounter();

var Counter2 = makeCounter();

alert(Counter1.value()); /* Alerts 0 */

Counter1.increment();

Counter1.increment();

alert(Counter1.value()); /* Alerts 2 */

Counter1.decrement();

alert(Counter1.value()); /* Alerts 1 */

alert(Counter2.value()); /* Alerts 0 */

相信你已经看到   Counter1 Counter2 闭包变量包含一个不同的实例privateCounter。（即：两个实例的变量独立变化，互不影响）

老外又举了一个例子：创建闭包循环，一个常见的错误，看代码：

<p id="help">Helpful notes will appear here</p>

<p>E-mail: <input type="text" id="email" name="email"></p>

<p>Name: <input type="text" id="name" name="name"></p>

<p>Age: <input type="text" id="age" name="age"></p>

function showHelp(help) {

  document.getElementById('help').innerHTML = help;

}

 

function setupHelp() {

  var helpText = [

      {'id': 'email', 'help': 'Your e-mail address'},

      {'id': 'name', 'help': 'Your full name'},

      {'id': 'age', 'help': 'Your age (you must be over 16)'}

    ];

 

  for (var i = 0; i < helpText.length; i++) {

    var item = helpText[i];

    document.getElementById(item.id).onfocus = function() {

      showHelp(item.help);

    }

  }

}

 

setupHelp(); 

 

上面是错误的写法(所有的事件都提示年龄),正确的如下：

function showHelp(help) {

  document.getElementById('help').innerHTML = help;

}

 

function makeHelpCallback(help) {

  return function() {

    showHelp(help);

  };

}

 

function setupHelp() {

  var helpText = [

      {'id': 'email', 'help': 'Your e-mail address'},

      {'id': 'name', 'help': 'Your full name'},

      {'id': 'age', 'help': 'Your age (you must be over 16)'}

    ];

 

  for (var i = 0; i < helpText.length; i++) {

    var item = helpText[i];

    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);

  }

}

 

setupHelp(); 

这是预期的。而不是回调都共享一个单一的环境,makeHelpCallback函数为每个调用它的对象创建一个新的环境, 。

写到这老外还没结束。

 

老外引出了：构造函数和原型 。

 

老外说：当闭包不是必要的时候，创建一个新对象/类、方法通常应该是关联到对象的原型,而不是定义成对象的构造函数。

          原因是,每当在调用构造函数的方法将得到重新分配(即为每一个对象创建)。

老外说的很明白，接下来看js 原型的写法（prototype）。

当然老外还是有例子的（看代码）：

//构造函数写法

function MyObject(name, message) {

  this.name = name.toString();      //变量

  this.message = message.toString();

  this.getName = function() {       //方法

    return this.name;

  };

 

  this.getMessage = function() {

    return this.message;

  };

}

原型写法：

//原型的写法1

function MyObject(name, message) {

  this.name = name.toString();        //变量

  this.message = message.toString();  

}

MyObject.prototype = {

  getName: function() {      //方法

    return this.name;

  },

  getMessage: function() {

    return this.message;

  }

};

 

//原型的写法2

function MyObject(name, message) {

  this.name = name.toString();

  this.message = message.toString();

}

MyObject.prototype.getName = function() {

  return this.name;

};

MyObject.prototype.getMessage = function() {

  return this.message;

};

调用方法：

var a = new MyObject('zhangsan', '我是张三');

a.getMessage();

a.getName();

 

怎么样看到这里你是不是明白了：js构造函数，js 的原型（prototype），以及js闭包了。

         你是不是应该明白了js创建类，方法，属性了。 是不是有了面向对象的感觉。 

 

怎么样，老外还可以吧。。。

说说我的理由：老外写的文章，例子多，浅显易懂，循序渐进，由浅及深，逻辑缜密。

                   通篇没有什么定义（不像国人写的东西，一开始就解释名词）。

 

好吧，最后欢迎您的拍砖！