看图学习javascript-阿里云开发者社区

开发者社区> slalx_1986> 正文

看图学习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 */     

   

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

注意:两个boolean类型的变量在内存中指向相同的值,这是因为基本类型的数值是不可变的,这样javascript的解释器就可以让指向相同值的所有引用共享一个实例。
因此isProgrammerlikesJavaScript===(绝对等于)进行比较的结果是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.jsglobal.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,祝大家学习愉快,有什么问题,请留言反馈。

 

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript学习(练习)
练习:用户登录界面 代码:             function check(){                 var name=form1.
577 0
JavaScript学习(五)
目录   条件判断语句: if语句: if...else语句 switch语句 while语句 do...while语句 for循环语句 跳转语句: continue语句 break语句   条件判断语句: if语句: if条件判断语句是最基本、最常用的流程控制语句,可以根据条件表达式的值执行相应的处理。
626 0
JavaScript学习(八)
目录 对象分类: 1.内建对象: 2.宿主对象: 3.自定义对象: javascript内部对象 FileSystemObject对象 动态创建FileSystemObject对象 FileSystemObject对象的方法 In 运算符 JS数据类型 对象字面量 函数: 对象分类: 1.
827 0
JavaScript学习(九)
  对象访问语句 for...in循环语句 for...in循环语句和for循环语句十分相似,for...in语句用来遍历对象的每一个属性。
824 0
JavaScript学习(十)
目录 练习: String对象的方法 1.查找字符串 (1)charAt()方法   (2)indexOf()方法 (3)lastIndexOf()方法 2.截取字符串 (1)silce()方法 (2)substr()方法 (3)substring()方法 3.连接和拆分 (1)concat()方法 (2)split()方法 4.格式化字符串 练习: 在text文档中输入英文小写字母,点击按钮之后把文本框中的小写字母变成大写。
781 0
JavaScript学习(六)
目录 函数 函数的定义 函数的调用 函数的简单调用 在事件响应中调用函数 通过超链接定义函数 函数参数的使用   使用函数的返回值 嵌套函数 递归函数 javascript中的内置函数 (1)pa...
868 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4405 0
Javascript 学习 笔记四
1、children和childNodes(参考:JavaScript中Element与Node的区别,children与childNodes的区别 children和childNodes) Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有: 节点类型 NodeType 元
1138 0
JavaScript学习(三)
强制类型转换(将一个数据类型强制转换为另一个数据类型) 在JS中如果需要写16进制的数字,需要以0x开头。8进制数字,需要以0开头。
747 0
+关注
41
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载