摘要:原文第一章主要介绍的大概情况基本语法。通过和来引用对象属性或数组元素的值就构成一个表达式。
原文:https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/
JavaScript 简介第一章 主要介绍 JavaScript 的大概情况、基本语法。之前没有 JavaScript 基础的看不懂也没关系,后续章节会有进一步的详细说明,我会通读一遍 《JavaScript 权威指南》,然后根据个人的理解整理出来我认为重要的核心概念,同时我也会参考原版英文版 JavaScript The Definitive Guide,取一些关键性、重要的单词做补充
中文排版指南遵守 中文文案排版指北,欢迎批评批正
JavaScript 是面向 web 的编程语言,是一门 高阶的(high-level)、动态的(dynamic)、弱类型的(untyped)解释型(interpreted)编程语言,适合面向对象(oop)和函数式的(functional)编程风格。JavaScript 语法源自 Java 和 C,一等函数(first-class function)来自于 Scheme,它的基于原型继承来自于 Self
JavaScript 的版本JavaScript 语言规范由 ECMA 国际发布,版本号一般叫做 ECMAScript x,如:ECMAScript 3, ECMAScript 5, ECMAScript 6,简称 ES x
Mozilla 发布的 JavaScript 版本一般叫做 JavaScript x.x,如:JavaScript 1.3, JavaScript 1.5
Micorsoft 发布的 JavaScript 版本一般叫做 JScript
可以这么说 「Mozilla 和 Micorsoft 开发的浏览器中 JavaScript内核一般都实现了某个 ECMAScript 版本的规范」
JavaScript 语言核心有很多 API,比如:针对字符串、数组、正则、日期。但这些通常不包括输入输出 API(类似网络、存储、图形相关的特性),输入输出 API 一般是由 JavaScript 的宿主环境(host environment)提供的,通常是浏览器
JavaScript 语言核心 变量/赋值快速预览下 JavaScript 变量的用法
// 双斜线之后内容是单行注释 /* 这是多行注释 */ // 变更是表示值的一个符号名字,通过 var 关键字声明 var x; // 声明一个变量 x // 值可以通过等号赋值给变量 x = 0 // 现在变量 x 的值为 0 x // => 0 通过变量获取其值 // JavaScript 支持多种数据类型 x = 1; // 数字 x = 0.01; // 整数和实数都是数字(number)类型 x = "hello world" // 字符串 x = "JavaScript"; // ... x = true; // 布尔值 x = false; // ... x = null; // 是一个特殊的值,意思是「空」 x = undefined; // 和 null 非常累似对象/数组
JavaScript 中两个非常重要的数据类型是对象和数组
// 对象是名/值对的集合,或字符串到值映射的集合 var book = { // 对象由花括号括起来 topic: "JavaScript", // book 对象的属性 topic 的值是 "JavaScript" fat: true }; // 通过「.」或「[]」来访问对象属性 book.topic // => "JavaScript" book.["fat"] // => true book.author = "Flanagan" // 通过赋值给 book 对象创建一个新属性 author // JavaScript 数组 var primes = [2, 3, 5, 7]; primes[0] // => 2 通过数组下标访问第一个元素 primes.length // => 4 数组中元素的个数 primes[4] = 9 // => 9 添加新元素 primes[6] = 11 // => 11 此时数组变成 [2, 3, 5, 7, 9, undefined, 11], 长度也变为 7 // 对象数组 var points = [ { x: 0, y: 0 }, { x: 1, y: 1 } ]; // 数组对象 var data = { listA: [1, 3, 5], listB: [2, 4, 6] };表达式/运算符
通过方括号定义数组元素和通过花括号定义对象属性名和值的语法称为 初始化表达式(initializer expression),表达式是 JavaScript 中的一个短语,这个短语可以通过运算得出一个值。通过「.」和「[]」来引用对象属性或数组元素的值就构成一个表达式。上面的代码中注释中箭头(=>)后的值就是表达式的运算结果
JavaScript 中最常见的表达式写法就是像下面代码一样使用运算符(operator),运算符作用于操作数,生成一个新的值
// 最常见的是算术运算符 3 + 2 // => 5 加法 3 - 2 // => 1 减法 3 * 2 // => 6 乘法 3 / 2 // => 1.5 除法 points[1].x - points[0].x // => 1 复杂的操作数运算 "3" + "2" // => "32" 字符串连接 // 运算符简写形式 var count = 0; count++; // 自增1 count--; // 自减1 count += 2; // 自加2, 相当于 count = count + 2 count *= 3; // ... count // => 6 变量名本身也是表达式 var x = 2, y = 3 x == y // => false x != y // => true x < y // => true x <= y // => true x == y // => false "two" == "three" // => false "two" > "three" // => true "tw" 在字母表中的索引大于 "th" false == (x > y) // => true // 逻辑运算符 (x == 2) && (y == 3) // true (x > 2) && (y < 3) // false !(x == y) // true
如果 JavaScript 中的「短语」是表达式,那么整个句子就称做 语句(statement),以分号结束的行都是一条语句。语句和表达式有很多共同之处
函数粗略了讲,表达式仅仅计算出一个值并不进行其它操作,不会改变程序的运行状态,而语句并不包含一个值(或者说它包含的值我们并不关心),但它们改变了程序运行状态
函数是带有名称(named)和参数的 JavaScript 代码片段,可以一次定义多次调用
function plus1(x) { // 定义了一个名为 plus1 的函数,带有参数 x return x + 1; // 返回一个比传入参数大 1 的数值 } // 函数代码块是由花括号包裹起来的部分 plus1(3) // => 4 函数调用结果为 3+1 var square = function(x) { // 函数是一种值,可以赋值给变量 return x * x; }; square(plus1(3)) // => 16 在一个表达式中调用两个函数
当函数和对象合写在一起时,当函数就变成了「方法」(method):
// 当函数赋值给对象的属性,我们称为「方法」,所有 JavaScript 对象都含有方法 var a = []; // 创建一个空数组 a.push(1, 2, 3); // 调用数组的添加元素方法 a.reverse(); // 调用数组的次序反转方法 // 自定义方法 points.dist = function() { var p1 = this[0]; var p2 = this[1]; var a = p2.x - p1.x; var b = p2.y - p1.y; return Math.sqrt(a*a + b*b) // 勾股定理,用 Math.sqrt 来计算平方根 } points.dist(); // => 求得两个点之间的距离面向对象
JavaScript 中的面向对象特性和传统语言的很大的区别,下面展示一个类用来表示 2D 平面中的几何点,这个类实例化后的对象有一个名为 r() 的方法,可以计算该点到原点的距离:
function Point(x, y) { this.x = x; this.y = y; } // 通过给构造函数的 prototype 对象赋值,来给 Point 对象定义方法 Point.prototype.r = function() { return Math.sqrt(this.x * this.x + this.y * this.y) }; // 使用 new 关键字和构造函数来创建一个实例 p var p = new Point(1, 1); // Point 的实例对象 p(以及所有 Point 的实例对象)继承了方法 r() p.r() // => 1.414...客户端的 JavaScript 嵌入到 HTML 中的 JavaScript
JavaScript 代码可以通过
正常 HTML 段落