JavaScript入门（1）——简单了解与基本语法（ES5）

最新推荐文章于 2024-02-18 12:58:18 发布

⚠小白出没⚠

最新推荐文章于 2024-02-18 12:58:18 发布

阅读量217

点赞数

原文链接：https://wangdoc.com/javascript/index.html

版权

一、前言

最近一直在搞前端，接触到的一些博客和开源项目，都在说ES6（Vuex的文档）。这么说来，出了当初在大学的时候接触过一段时间JavaScript，之后就完全没搞过了。当时学的也是迷迷糊糊的，所以再开一个新坑，就是把JavaScript过一遍。然后学习ES6。

注：学习资料链接

二、简单了解

2.1、Java与JavaScript的关系

这里专门说一下 JavaScript 和 Java 的关系。它们是两种不一样的语言，但是彼此存在联系。
JavaScript 的基本语法和对象体系，是模仿 Java 而设计的。但是，JavaScript 没有采用 Java 的静态类型。正是因为 JavaScript 与 Java 有很大的相似性，所以这门语言才从一开始的 LiveScript 改名为 JavaScript。基本上，JavaScript 这个名字的原意是“很像Java的脚本语言”。
JavaScript 语言的函数是一种独立的数据类型，以及采用基于原型对象（prototype）的继承链。这是它与 Java 语法最大的两点区别。JavaScript 语法要比 Java 自由得多。
另外，Java 语言需要编译，而 JavaScript 语言则是运行时由解释器直接执行。
总之，JavaScript 的原始设计目标是一种小型的、简单的动态语言，与 Java 有足够的相似性，使得使用者（尤其是 Java 程序员）可以快速上手。

2.2、JavaScript 与 ECMAScript 的关系

1996年8月，微软模仿 JavaScript 开发了一种相近的语言，取名为JScript（JavaScript 是 Netscape 的注册商标，微软不能用），首先内置于IE 3.0。Netscape 公司面临丧失浏览器脚本语言的主导权的局面。

1996年11月，Netscape 公司决定将 JavaScript 提交给国际标准化组织 ECMA（European Computer Manufacturers Association），希望 JavaScript 能够成为国际标准，以此抵抗微软。ECMA 的39号技术委员会（Technical Committee 39）负责制定和审核这个标准，成员由业内的大公司派出的工程师组成，目前共25个人。该委员会定期开会，所有的邮件讨论和会议记录，都是公开的。
1997年7月，ECMA 组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript。这个版本就是 ECMAScript 1.0 版。之所以不叫 JavaScript，一方面是由于商标的关系，Java 是 Sun 公司的商标，根据一份授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 已经被 Netscape 公司注册为商标，另一方面也是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
ECMAScript 只用来标准化 JavaScript 这种语言的基本语法结构，与部署环境相关的标准都由其他标准规定，比如 DOM 的标准就是由 W3C组织（World Wide Web Consortium）制定的。
ECMA-262 标准后来也被另一个国际标准化组织 ISO（International Organization for Standardization）批准，标准号是 ISO-16262。

简单总结一下：广义的说JavaScript就是ECMAScript。

三、基本语法

3.1、声明变量

在JavaScript中声明一个变量。

var a = 1;// 使用var命令声明一个变量
b = 1;// 基本等同于使用var声明变量

在这里插入图片描述
但是，不写var的做法，不利于表达意图，而且容易不知不觉地创建全局变量，所以建议总是使用var命令声明变量。

可以在同一条var命令中声明多个变量。

var a, b;

JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。

var a = 1;
a = 'hello';

上面代码中，变量a起先被赋值为一个数值，后来又被重新赋值为一个字符串。第二次赋值的时候，因为变量a已经存在，所以不需要使用var命令。

如果使用var重新声明一个已经存在的变量，是无效的。变量x声明了两次，第二次声明是无效的。

var x = 1;
var x;
x // 1

但是，如果第二次声明的时候还进行了赋值，则会覆盖掉前面的值。

var x = 1;
var x = 2;

// 等同于

var x = 1;
var x;
x = 2;

3.2、变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(a);
var a = 1;

上面代码首先使用console.log方法，在控制台（console）显示变量a的值。这时变量a还没有声明和赋值，所以这是一种错误的做法，但是实际上不会报错。因为存在变量提升，真正运行的是下面的代码。

var a;
console.log(a);
a = 1;

最后的结果是显示undefined，表示变量a已声明，但还未赋值。

3.3、区块

JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）。

对于var命令来说，JavaScript 的区块不构成单独的作用域（scope）。

{
  var a = 1;
}

a // 1

上面代码在区块内部，使用var命令声明并赋值了变量a，然后在区块外部，变量a依然有效，区块对于var命令不构成单独的作用域，与不使用区块的情况没有任何区别。在 JavaScript 语言中，单独使用区块并不常见，区块往往用来构成其他更复杂的语法结构，比如for、if、while、function等。

这部分多说两句，上面说了区块对于var命令不构成单独的作用域。下面这段代码，并不能像我们想象的那样运行，点击第一个按钮输出0，第二个按钮输出1。。。而是点击所有按钮都是输出6。原因就是var i 相当于一个全局变量，当循环结束，变量i指向的地址值为6。而所有的按钮点击事件都指向了ƒ (){ console.log(i) }，说到这里原因就显而易见了。

<html>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
</html>
<script type="text/javascript">
  var btnArr = document.getElementsByTagName('button')
  for(var i = 0;i<btnArr.length;i++){
	console.log(i);
    btnArr[i].onclick = function(){
      console.log(i);
    }
	console.log(btnArr[i].onclick);
  }
</script>

⚠小白出没⚠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门（1）——简单了解与基本语法（ES5）

一、前言最近一直在搞前端，接触到的一些博客和开源项目，都在说ES6（Vuex的文档）。这么说来，出了当初在大学的时候接触过一段时间JavaScript，之后就完全没搞过了。当时学的也是迷迷糊糊的，所以再开一个新坑，就是把JavaScript过一遍。然后学习ES6。注：学习资料链接二、简单了解2.1、Java与JavaScript的关系这里专门说一下 JavaScript 和 Java 的关系。它们是两种不一样的语言，但是彼此存在联系。JavaScript 的基本语法和对象体系，是模仿 Java
复制链接

扫一扫