看图学习javascript

如果想成为一个高效的javascript的程序员，深刻理解javascript的语法是必须的。记得上小学的时候，再难的数学题通过画图的方式很快就能解决，我们在学习javascript有时感觉一些语法也比较难理解，为何不能用画图的方式帮助我们理解呢？下面我们就把javascript一些基本的语法转换成图行元素，估计您会有一个醍醐灌顶的感觉。这个系列文章我准备使用两篇文章写完，今天我们来看一些最基本的内容。

在javascript中变量名(variable)就是一个简单的标记，来引用内存中的一个值，这些值可以是一些基本类型（strings, numbers, and booleans.），也有可能是一些引用类型（objects or functions）

    在下面的例子中，我们在顶层作用域中来声明一些局部变量，他们指向的是一些基本类型的数值。

      /* 在顶层作用域来声明一些局部变量*/ var name = "Tim Caswell"; var age = 25; var isProgrammer = true; var likesJavaScript = true; // 如果两个变量指向相同的值，看看这两个变量是否相等。 isProgrammer === likesJavaScript; /* 结果：true */     

下面我们来用图形来表示上面的代码关系：

因此isProgrammer和likesJavaScript用===（绝对等于）进行比较的结果是true。左边最外城的矩形表示最外层的闭包作用域，里面的变量表示顶层的局部标量，不要和global/window的属性混淆。

对象和原型链

先来看个简单的例子：这里需要用到一个工具方法：

if (typeof Object.create !== 'function') { Object.create = function (o) { function F() {} F.prototype = o; return new F(); }; } // Create a parent object var tim = { name: "Tim Caswell", age: 28, isProgrammer: true, likesJavaScript: true } // Create a child object var jack = Object.create(tim); // Override some properties locally jack.name = "Jack Caswell"; jack.age = 4; // Look up stuff through the prototype chain jack.likesJavaScript; /* => true */

下面我们来用图形来表示上面代码的关系：

通过上图我们可以一目了然的看到jack.likesJavaScript值是什么了。

• 全局对象

曾经怀疑想jslint这样的工具怎么会提示不要在声明变量的时候忘记var，如果忘记了会发生什么呢？

var name = "Tim Caswell"; var age = 28; var isProgrammer = true; // Oops we forgot a var likesJavaScript = true;

注意：likesJavaScript是全局对象的一个属性，而不是一个最外层闭包的一个自由变量。这样做一般情况下没有问题，当你混淆多个javascript的时候就会有问题了。

因此当你声明变量的时候使用var关键字，可以让你的变量在当前的作用域或者子作用域中；如果你真的想声明全局对象的属性，在浏览器中用window.myVariable, 在node.js用global.myVariable

• 函数和闭包

Javascript不仅仅是一系列链表的数据结构。他还包含可以执行和调用的函数，这些函数生成了作用域链和闭包。

显式的闭包

方法可以被认为是含有可执行代码和一些属性的特殊对象，每一个函数有一个scope属性表示它定义时所在的环境，如果一个函数是从两外一个函数放回的，那么他对原来环境的引用会被新的函数封闭在闭包中。

下面的代码，我们声明一个函数然后让他产生一个闭包并且返回一个函数。

function makeClosure(name) { return function () { return name; }; } var description1 = makeClosure("Cloe the Closure"); var description2 = makeClosure("Albert the Awesome"); console.log(description1()); console.log(description2()); /* Cloe the Closure Albert the Awesome */

当我们调用description1()的时候，解释器首先查询到description1引用的函数，

然后执行它，该函数需要一个名字为name的局部变量，然后他在闭包中找到了这个变量。makeClosure所生成的方法的局部变量都有自己单独的一份空间。

• 共享方法和this

Javascript提供了this关键字允许我们根据不同的调用对象在不同的作用域中重用同一个函数。如：

var Lane = {
  name: "Lane the Lambda",
  description: function () {
    return this.name;
  }
};
var description = Lane.description;
var Fred = {
  description: Lane.description,
  name: "Fred the Functor"
};
// Call the function from four different scopes
console.log(Lane.description());
console.log(Fred.description());
console.log(description());
console.log(description.call({
  name: "Zed the Zetabyte"
}));
/*
Lane the Lambda 
Fred the Functor 
undefined 
Zed the Zetabyte
*/

从图中我们可以看到description确实指向同一个函数，但是name的指向是不相同的。

最后我希望用图形的方式能够让大家更好的理解javascript，祝大家学习愉快，有什么问题，请留言反馈。