源代码下载: javascript-zh.js
Javascript 于 1995 年由网景公司的 Brendan Eich 创造。最后它作为一种简略的,用于开发网站的脚本语言而被创造进去,是用于开发简单网站的 Java 的补充。但因为它与网页联合度很高并且在浏览器中失去内置的反对,所以在网页前端畛域 Javascript 变得比 Java 更风行了。
不过,Javascript 不仅用于网页浏览器,一个名为 Node.js 的我的项目提供了面向 Google Chrome V8 引擎的独立运行时环境,它正在变得越来越风行。
很欢送来自您的反馈,您能够通过下列形式分割到我:@ExcitedLeigh, 或者l@leigh.net.au.
// 正文形式和C很像,这是单行正文/* 这是多行 正文 */// 语句能够以分号完结doStuff();// ... 然而分号也能够省略,每当遇到一个新行时,分号会主动插入(除了一些非凡状况)。doStuff()// 因为这些非凡状况会导致意外的后果,所以咱们在这里保留分号。///////////////////////////////////// 1. 数字、字符串与操作符// Javascript 只有一种数字类型(即 64位 IEEE 754 双精度浮点 double)。// double 有 52 位示意尾数,足以准确存储大到 9✕10¹ 的整数。3; // = 31.5; // = 1.5// 所有根本的算数运算都如你预期。1 + 1; // = 20.1 + 0.2; // = 0.300000000000000048 - 1; // = 710 * 2; // = 2035 / 5; // = 7// 包含无奈整除的除法。5 / 2; // = 2.5// 位运算也和其余语言一样;当你对浮点数进行位运算时,// 浮点数会转换为*至少* 32 位的无符号整数。1 << 2; // = 4// 括号能够决定优先级。(1 + 3) * 2; // = 8// 有三种非数字的数字类型Infinity; // 1/0 的后果-Infinity; // -1/0 的后果NaN; // 0/0 的后果// 也有布尔值。true;false;// 能够通过单引号或双引号来结构字符串。'abc';"Hello, world";// 用!来取非!true; // = false!false; // = true// 相等 ===1 === 1; // = true2 === 1; // = false// 不等 !=1 !== 1; // = false2 !== 1; // = true// 更多的比拟操作符 1 < 10; // = true1 > 10; // = false2 <= 2; // = true2 >= 2; // = true// 字符串用+连贯"Hello " + "world!"; // = "Hello world!"// 字符串也能够用 < 、> 来比拟"a" < "b"; // = true// 应用“==”比拟时会进行类型转换..."5" == 5; // = truenull == undefined; // = true// ...除非你是用 ==="5" === 5; // = falsenull === undefined; // = false // ...但会导致奇怪的行为13 + !0; // 14"13" + !0; // '13true'// 你能够用`charAt`来失去字符串中的字符"This is a string".charAt(0); // = 'T'// ...或应用 `substring` 来获取更大的局部。"Hello world".substring(0, 5); // = "Hello"// `length` 是一个属性,所以不要应用 ()."Hello".length; // = 5// 还有两个非凡的值:`null`和`undefined`null; // 用来示意刻意设置的空值undefined; // 用来示意还没有设置的值(只管`undefined`本身理论是一个值)// false, null, undefined, NaN, 0 和 "" 都是假的;其余的都视作逻辑真// 留神 0 是逻辑假而 "0"是逻辑真,只管 0 == "0"。///////////////////////////////////// 2. 变量、数组和对象// 变量须要用`var`关键字申明。Javascript是动静类型语言,// 所以你无需指定类型。 赋值须要用 `=` var someVar = 5;// 如果你在申明时没有加var关键字,你也不会失去谬误...someOtherVar = 10;// ...然而此时这个变量就会在全局作用域被创立,而非你定义的以后作用域// 没有被赋值的变量都会被设置为undefinedvar someThirdVar; // = undefined// 对变量进行数学运算有一些简写法:someVar += 5; // 等价于 someVar = someVar + 5; someVar 当初是 10 someVar *= 10; // 当初 someVar 是 100// 自增和自减也有简写someVar++; // someVar 是 101someVar--; // 回到 100// 数组是任意类型组成的有序列表var myArray = ["Hello", 45, true];// 数组的元素能够用方括号下标来拜访。// 数组的索引从0开始。myArray[1]; // = 45// 数组是可变的,并领有变量 length。myArray.push("World");myArray.length; // = 4// 在指定下标增加/批改myArray[3] = "Hello";// javascript中的对象相当于其余语言中的“字典”或“映射”:是键-值对的无序汇合。var myObj = {key1: "Hello", key2: "World"};// 键是字符串,但如果键自身是非法的js标识符,则引号并非是必须的。// 值能够是任意类型。var myObj = {myKey: "myValue", "my other key": 4};// 对象属性的拜访能够通过下标myObj["my other key"]; // = 4// ... 或者也能够用 . ,如果属性是非法的标识符myObj.myKey; // = "myValue"// 对象是可变的;值也能够被更改或减少新的键myObj.myThirdKey = true;// 如果你想要获取一个还没有被定义的值,那么会返回undefinedmyObj.myFourthKey; // = undefined///////////////////////////////////// 3. 逻辑与控制结构// 本节介绍的语法与Java的语法简直完全相同// `if`语句和其余语言中一样。var count = 1;if (count == 3){ // count 是 3 时执行} else if (count == 4){ // count 是 4 时执行} else { // 其余状况下执行 }// while循环while (true) { // 有限循环}// Do-while 和 While 循环很像 ,但前者会至多执行一次var input;do { input = getInput();} while (!isValid(input))// `for`循环和C、Java中的一样:// 初始化; 继续执行的条件; 迭代。for (var i = 0; i < 5; i++){ // 遍历5次}// && 是逻辑与, || 是逻辑或if (house.size == "big" && house.colour == "blue"){ house.contains = "bear";}if (colour == "red" || colour == "blue"){ // colour是red或者blue时执行}// && 和 || 是“短路”语句,它在设定初始化值时特地有用 var name = otherName || "default";// `switch`语句应用`===`查看相等性。// 在每一个case完结时应用 'break'// 否则其后的case语句也将被执行。 grade = 'B';switch (grade) { case 'A': console.log("Great job"); break; case 'B': console.log("OK job"); break; case 'C': console.log("You can do better"); break; default: console.log("Oy vey"); break;}///////////////////////////////////// 4. 函数、作用域、闭包// JavaScript 函数由`function`关键字定义function myFunction(thing){ return thing.toUpperCase();}myFunction("foo"); // = "FOO"// 留神被返回的值必须开始于`return`关键字的那一行,// 否则因为主动的分号补齐,你将返回`undefined`。// 在应用Allman格调的时候要留神.function myFunction(){ return // <- 分号主动插在这里 { thisIsAn: 'object literal' }}myFunction(); // = undefined// javascript中函数是一等对象,所以函数也可能赋给一个变量,// 并且被作为参数传递 —— 比方一个事件处理函数:function myFunction(){ // 这段代码将在5秒钟后被调用}setTimeout(myFunction, 5000);// 留神:setTimeout不是js语言的一部分,而是由浏览器和Node.js提供的。// 函数对象甚至不须要申明名称 —— 你能够间接把一个函数定义写到另一个函数的参数中setTimeout(function(){ // 这段代码将在5秒钟后被调用}, 5000);// JavaScript 有函数作用域;函数有其本人的作用域而其余的代码块则没有。if (true){ var i = 5;}i; // = 5 - 并非咱们在其余语言中所冀望失去的undefined// 这就导致了人们常常应用的“立刻执行匿名函数”的模式,// 这样能够防止一些长期变量扩散到全局作用域去。(function(){ var temporary = 5; // 咱们能够拜访批改全局对象("global object")来拜访全局作用域, // 在web浏览器中是`window`这个对象。 // 在其余环境如Node.js中这个对象的名字可能会不同。 window.permanent = 10;})();temporary; // 抛出援用异样ReferenceErrorpermanent; // = 10// javascript最弱小的性能之一就是闭包。// 如果一个函数在另一个函数中定义,那么这个外部函数就领有内部函数的所有变量的拜访权,// 即便在内部函数完结之后。function sayHelloInFiveSeconds(name){ var prompt = "Hello, " + name + "!"; // 外部函数默认是放在部分作用域的, // 就像是用`var`申明的。 function inner(){ alert(prompt); } setTimeout(inner, 5000); // setTimeout是异步的,所以 sayHelloInFiveSeconds 函数会立刻退出, // 而 setTimeout 会在前面调用inner // 然而,因为inner是由sayHelloInFiveSeconds“闭合蕴含”的, // 所以inner在其最终被调用时依然可能拜访`prompt`变量。}sayHelloInFiveSeconds("Adam"); // 会在5秒后弹出 "Hello, Adam!"///////////////////////////////////// 5. 对象、构造函数与原型// 对象能够蕴含办法。var myObj = { myFunc: function(){ return "Hello world!"; }};myObj.myFunc(); // = "Hello world!"// 当对象中的函数被调用时,这个函数能够通过`this`关键字拜访其附丽的这个对象。myObj = { myString: "Hello world!", myFunc: function(){ return this.myString; }};myObj.myFunc(); // = "Hello world!"// 但这个函数拜访的其实是其运行时环境,而非定义时环境,即取决于函数是如何调用的。// 所以如果函数被调用时不在这个对象的上下文中,就不会运行胜利了。var myFunc = myObj.myFunc;myFunc(); // = undefined// 相应的,一个函数也能够被指定为一个对象的办法,并且能够通过`this`拜访// 这个对象的成员,即便在函数被定义时并没有附丽在对象上。var myOtherFunc = function(){ return this.myString.toUpperCase();}myObj.myOtherFunc = myOtherFunc;myObj.myOtherFunc(); // = "HELLO WORLD!"// 当咱们通过`call`或者`apply`调用函数的时候,也能够为其指定一个执行上下文。var anotherFunc = function(s){ return this.myString + s;}anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"// `apply`函数简直齐全一样,只是要求一个array来传递参数列表。anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"// 当一个函数承受一系列参数,而你想传入一个array时特地有用。Math.min(42, 6, 27); // = 6Math.min([42, 6, 27]); // = NaN (uh-oh!)Math.min.apply(Math, [42, 6, 27]); // = 6// 然而`call`和`apply`只是长期的。如果咱们心愿函数附着在对象上,能够应用`bind`。var boundFunc = anotherFunc.bind(myObj);boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"// `bind` 也能够用来局部利用一个函数(柯里化)。var product = function(a, b){ return a * b; }var doubler = product.bind(this, 2);doubler(8); // = 16// 当你通过`new`关键字调用一个函数时,就会创立一个对象,// 而且能够通过this关键字拜访该函数。// 设计为这样调用的函数就叫做构造函数。var MyConstructor = function(){ this.myNumber = 5;}myNewObj = new MyConstructor(); // = {myNumber: 5}myNewObj.myNumber; // = 5// 每一个js对象都有一个‘原型’。当你要拜访一个理论对象中没有定义的一个属性时,// 解释器就回去找这个对象的原型。// 一些JS实现会让你通过`__proto__`属性拜访一个对象的原型。// 这尽管对了解原型很有用,然而它并不是规范的一部分;// 咱们前面会介绍应用原型的规范形式。var myObj = { myString: "Hello world!"};var myPrototype = { meaningOfLife: 42, myFunc: function(){ return this.myString.toLowerCase() }};myObj.__proto__ = myPrototype;myObj.meaningOfLife; // = 42// 函数也能够工作。myObj.myFunc() // = "hello world!"// 当然,如果你要拜访的成员在原型当中也没有定义的话,解释器就会去找原型的原型,以此类推。myPrototype.__proto__ = { myBoolean: true};myObj.myBoolean; // = true// 这其中并没有对象的拷贝;每个对象实际上是持有原型对象的援用。// 这意味着当咱们扭转对象的原型时,会影响到其余以这个原型为原型的对象。myPrototype.meaningOfLife = 43;myObj.meaningOfLife; // = 43// 咱们晓得 `__proto__` 并非标准规定,实际上也没有规范方法来批改一个已存在对象的原型。// 然而,咱们有两种形式为指定原型创立一个新的对象。// 第一种形式是 Object.create,这个办法是在最近才被增加到Js中的,// 因而并不是所有的JS实现都有这个办法var myObj = Object.create(myPrototype);myObj.meaningOfLife; // = 43// 第二种形式能够在任意版本中应用,不过必须通过构造函数。// 构造函数有一个属性prototype。然而它 *不是* 构造函数自身的原型;相同,// 是通过构造函数和new关键字创立的新对象的原型。MyConstructor.prototype = { myNumber: 5, getMyNumber: function(){ return this.myNumber; }};var myNewObj2 = new MyConstructor();myNewObj2.getMyNumber(); // = 5myNewObj2.myNumber = 6myNewObj2.getMyNumber(); // = 6// 字符串和数字等内置类型也有通过构造函数来创立的包装类型var myNumber = 12;var myNumberObj = new Number(12);myNumber == myNumberObj; // = true// 然而它们并非严格等价typeof myNumber; // = 'number'typeof myNumberObj; // = 'object'myNumber === myNumberObj; // = falseif (0){ // 这段代码不会执行,因为0代表假}// 不过,包装类型和内置类型共享一个原型,// 所以你理论能够给内置类型也减少一些性能,例如对string:String.prototype.firstCharacter = function(){ return this.charAt(0);}"abc".firstCharacter(); // = "a"// 这个技巧常常用在“代码填充”中,来为老版本的javascript子集减少新版本js的个性,// 这样就能够在老的浏览器中应用新性能了。// 比方,咱们晓得Object.create并没有在所有的版本中都实现,// 然而咱们依然能够通过“代码填充”来实现兼容:if (Object.create === undefined){ // 如果存在则不笼罩 Object.create = function(proto){ // 用正确的原型来创立一个长期构造函数 var Constructor = function(){}; Constructor.prototype = proto; // 之后用它来创立一个新的对象 return new Constructor(); }}
更多浏览
Mozilla 开发者网络 提供了优良的介绍 Javascript 如何在浏览器中应用的文档。而且它是 wiki,所以你也能够自行编辑来分享你的常识。
MDN 的 A re-introduction to JavaScript 笼罩了这里提到的绝大多数话题的细节。该导引的大多数内容被限定在只是 Javascript 这个语言自身;如果你想理解 Javascript 是如何在网页中被利用的,那么能够查看 Document Object Model。
Learn Javascript by Example and with Challenges 是本参考的另一个版本,并蕴含了挑战习题。
Javascript Garden 是一个深刻解说所有 Javascript 反直觉局部的导引。
JavaScript: The Definitive Guide 是一个经典的领导参考书。
除了这篇文章的间接贡献者之外,这篇文章也参考了这个网站上 Louie Dinh 的 Python 教程,以及 Mozilla 开发者网络上的 JS Tutorial。
有倡议?或者发现什么谬误?在 Github 上开一个 issue ,或者发动 pull request!
原文由 Leigh Brenecki 编写,并由 0 个好心人 批改。
Translated by:Chenbo Li Guodong Qu
© 2022 Leigh Brenecki, Ariel Krakowski
本作品采纳 CC BY-SA 3.0 协定进行许可。