mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-24 01:51:38 +00:00
[javascript/zh] Translation tracking
This commit is contained in:
parent
303ec58a52
commit
5e0964e2ee
@ -407,7 +407,7 @@ myNewObj.myNumber; // = 5
|
|||||||
// look at its prototype.
|
// look at its prototype.
|
||||||
|
|
||||||
// Some JS implementations let you access an object's prototype on the magic
|
// Some JS implementations let you access an object's prototype on the magic
|
||||||
// property __proto__. While this is useful for explaining prototypes it's not
|
// property `__proto__`. While this is useful for explaining prototypes it's not
|
||||||
// part of the standard; we'll get to standard ways of using prototypes later.
|
// part of the standard; we'll get to standard ways of using prototypes later.
|
||||||
var myObj = {
|
var myObj = {
|
||||||
myString: "Hello world!"
|
myString: "Hello world!"
|
||||||
@ -438,7 +438,7 @@ myObj.myBoolean; // = true
|
|||||||
myPrototype.meaningOfLife = 43;
|
myPrototype.meaningOfLife = 43;
|
||||||
myObj.meaningOfLife; // = 43
|
myObj.meaningOfLife; // = 43
|
||||||
|
|
||||||
// We mentioned that __proto__ was non-standard, and there's no standard way to
|
// We mentioned that `__proto__` was non-standard, and there's no standard way to
|
||||||
// change the prototype of an existing object. However, there are two ways to
|
// change the prototype of an existing object. However, there are two ways to
|
||||||
// create a new object with a given prototype.
|
// create a new object with a given prototype.
|
||||||
|
|
||||||
|
@ -5,17 +5,19 @@ name: javascript
|
|||||||
filename: javascript-zh.js
|
filename: javascript-zh.js
|
||||||
contributors:
|
contributors:
|
||||||
- ["Adam Brenecki", "http://adam.brenecki.id.au"]
|
- ["Adam Brenecki", "http://adam.brenecki.id.au"]
|
||||||
|
- ["Ariel Krakowski", "http://www.learneroo.com"]
|
||||||
translators:
|
translators:
|
||||||
- ["Chenbo Li", "http://binarythink.net"]
|
- ["Chenbo Li", "http://binarythink.net"]
|
||||||
|
- ["Guodong Qu", "https://github.com/jasonqu"]
|
||||||
lang: zh-cn
|
lang: zh-cn
|
||||||
---
|
---
|
||||||
|
|
||||||
Javascript于1995年由网景公司的Brendan Eich发明。
|
Javascript于1995年由网景公司的Brendan Eich发明。
|
||||||
最初发明的目的是作为一个简单的网站脚本语言,来作为
|
最初发明的目的是作为一个简单的网站脚本语言,来作为
|
||||||
复杂网站应用java的补充。但由于javascript和网站结合度很高
|
复杂网站应用java的补充。但由于它与网页结合度很高并且由浏览器内置支持,
|
||||||
所以javascript逐渐变得比java在前端更为流行了。
|
所以javascript变得比java在前端更为流行了。
|
||||||
|
|
||||||
JavaScript 不仅仅只可以用于浏览器, 也可用于 Node.js 等后台环境。
|
不过 JavaScript 可不仅仅只用于浏览器: Node.js,一个基于Google Chrome V8引擎的独立运行时环境,也越来越流行。
|
||||||
|
|
||||||
很欢迎来自您的反馈,您可以通过下列方式联系到我:
|
很欢迎来自您的反馈,您可以通过下列方式联系到我:
|
||||||
[@adambrenecki](https://twitter.com/adambrenecki), 或者
|
[@adambrenecki](https://twitter.com/adambrenecki), 或者
|
||||||
@ -29,145 +31,167 @@ JavaScript 不仅仅只可以用于浏览器, 也可用于 Node.js 等后台环
|
|||||||
// 语句可以以分号结束
|
// 语句可以以分号结束
|
||||||
doStuff();
|
doStuff();
|
||||||
|
|
||||||
// ... 但是分号也可以省略,每当遇到一个新行时,分号会自动插入
|
// ... 但是分号也可以省略,每当遇到一个新行时,分号会自动插入(除了一些特殊情况)。
|
||||||
doStuff()
|
doStuff()
|
||||||
|
|
||||||
// 我们在这里会去掉分号,但是否添加最后的分号取决于你个人的习惯
|
// 因为这些特殊情况会导致意外的结果,所以我们在这里保留分号。
|
||||||
// 及你所在团队的编程风格
|
|
||||||
|
|
||||||
///////////////////////////////////
|
///////////////////////////////////
|
||||||
// 1. 数字、字符串与操作符
|
// 1. 数字、字符串与操作符
|
||||||
|
|
||||||
// Javascript 只有一种数字类型 (即 64位 IEEE 754 双精度浮点).
|
// Javascript 只有一种数字类型(即 64位 IEEE 754 双精度浮点 double)。
|
||||||
3 // = 3
|
// double 有 52 位表示尾数,足以精确存储大到 9✕10¹⁵ 的整数。
|
||||||
1.5 // = 1.5
|
3; // = 3
|
||||||
|
1.5; // = 1.5
|
||||||
|
|
||||||
// 所有基本的算数运算
|
// 所有基本的算数运算都如你预期。
|
||||||
1 + 1 // = 2
|
1 + 1; // = 2
|
||||||
8 - 1 // = 7
|
0.1 + 0.2; // = 0.30000000000000004
|
||||||
10 * 2 // = 20
|
8 - 1; // = 7
|
||||||
35 / 5 // = 7
|
10 * 2; // = 20
|
||||||
|
35 / 5; // = 7
|
||||||
|
|
||||||
// 包括无法整除的除法
|
// 包括无法整除的除法。
|
||||||
5 / 2 // = 2.5
|
5 / 2; // = 2.5
|
||||||
|
|
||||||
// 位运算也和其他语言一样。当你对浮点数进行位运算时,
|
// 位运算也和其他语言一样;当你对浮点数进行位运算时,
|
||||||
// 浮点数会转换为至多 32 位的无符号整数
|
// 浮点数会转换为*至多* 32 位的无符号整数。
|
||||||
1 << 2 // = 4
|
1 << 2; // = 4
|
||||||
|
|
||||||
// 括号可以决定优先级
|
// 括号可以决定优先级。
|
||||||
(1 + 3) * 2 // = 8
|
(1 + 3) * 2; // = 8
|
||||||
|
|
||||||
// 有三种非数字的数字类型
|
// 有三种非数字的数字类型
|
||||||
Infinity // 1/0 的结果
|
Infinity; // 1/0 的结果
|
||||||
-Infinity // -1/0 的结果
|
-Infinity; // -1/0 的结果
|
||||||
NaN // 0/0 的结果
|
NaN; // 0/0 的结果
|
||||||
|
|
||||||
// 也有布尔值
|
// 也有布尔值。
|
||||||
true
|
true;
|
||||||
false
|
false;
|
||||||
|
|
||||||
// 可以通过单引号或双引号来构造字符串
|
// 可以通过单引号或双引号来构造字符串。
|
||||||
'abc'
|
'abc';
|
||||||
"Hello, world"
|
"Hello, world";
|
||||||
|
|
||||||
// 用!来取非
|
// 用!来取非
|
||||||
!true // = false
|
!true; // = false
|
||||||
!false // = true
|
!false; // = true
|
||||||
|
|
||||||
// 相等 ==
|
// 相等 ===
|
||||||
1 == 1 // = true
|
1 === 1; // = true
|
||||||
2 == 1 // = false
|
2 === 1; // = false
|
||||||
|
|
||||||
// 不等 !=
|
// 不等 !=
|
||||||
1 != 1 // = false
|
1 !== 1; // = false
|
||||||
2 != 1 // = true
|
2 !== 1; // = true
|
||||||
|
|
||||||
// 更多的比较操作符
|
// 更多的比较操作符
|
||||||
1 < 10 // = true
|
1 < 10; // = true
|
||||||
1 > 10 // = false
|
1 > 10; // = false
|
||||||
2 <= 2 // = true
|
2 <= 2; // = true
|
||||||
2 >= 2 // = true
|
2 >= 2; // = true
|
||||||
|
|
||||||
// 字符串用+连接
|
// 字符串用+连接
|
||||||
"Hello " + "world!" // = "Hello world!"
|
"Hello " + "world!"; // = "Hello world!"
|
||||||
|
|
||||||
// 字符串也可以用 < 、> 来比较
|
// 字符串也可以用 < 、> 来比较
|
||||||
"a" < "b" // = true
|
"a" < "b"; // = true
|
||||||
|
|
||||||
// 比较时会进行类型转换...
|
// 使用“==”比较时会进行类型转换...
|
||||||
"5" == 5 // = true
|
"5" == 5; // = true
|
||||||
|
null == undefined; // = true
|
||||||
|
|
||||||
// ...除非你是用 ===
|
// ...除非你是用 ===
|
||||||
"5" === 5 // = false
|
"5" === 5; // = false
|
||||||
|
null === undefined; // = false
|
||||||
|
|
||||||
// 你可以用charAt来得到字符串中的字符
|
// ...但会导致奇怪的行为
|
||||||
"This is a string".charAt(0)
|
13 + !0; // 14
|
||||||
|
"13" + !0; // '13true'
|
||||||
|
|
||||||
// 还有两个特殊的值:null和undefined
|
// 你可以用`charAt`来得到字符串中的字符
|
||||||
null // 用来表示刻意设置成的空值
|
"This is a string".charAt(0); // = 'T'
|
||||||
undefined // 用来表示还没有设置的值
|
|
||||||
|
|
||||||
// null, undefined, NaN, 0 和 "" 都是假的(false),其他的都视作逻辑真
|
// ...或使用 `substring` 来获取更大的部分。
|
||||||
// 注意 0 是逻辑假而 "0"是逻辑真, 尽管 0 == "0".
|
"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. 变量、数组和对象
|
// 2. 变量、数组和对象
|
||||||
|
|
||||||
// 变量需要用 var 这个关键字声明. Javascript是动态类型语言
|
// 变量需要用`var`关键字声明。Javascript是动态类型语言,
|
||||||
// 所以你在声明时无需指定类型。 赋值需要用 =
|
// 所以你无需指定类型。 赋值需要用 `=`
|
||||||
var someVar = 5
|
var someVar = 5;
|
||||||
|
|
||||||
// 如果你在声明时没有加var关键字,你也不会得到错误
|
// 如果你在声明时没有加var关键字,你也不会得到错误...
|
||||||
someOtherVar = 10
|
someOtherVar = 10;
|
||||||
|
|
||||||
// ...但是此时这个变量就会拥有全局的作用域,而非当前作用域
|
// ...但是此时这个变量就会在全局作用域被创建,而非你定义的当前作用域
|
||||||
|
|
||||||
// 没有被赋值的变量都会返回undefined这个值
|
// 没有被赋值的变量都会被设置为undefined
|
||||||
var someThirdVar // = undefined
|
var someThirdVar; // = undefined
|
||||||
|
|
||||||
// 对变量进行数学运算有一些简写法
|
// 对变量进行数学运算有一些简写法:
|
||||||
someVar += 5 // 等价于 someVar = someVar + 5; someVar 现在是 10
|
someVar += 5; // 等价于 someVar = someVar + 5; someVar 现在是 10
|
||||||
someVar *= 10 // 现在 someVar 是 100
|
someVar *= 10; // 现在 someVar 是 100
|
||||||
|
|
||||||
// 自增和自减也有简写
|
// 自增和自减也有简写
|
||||||
someVar++ // someVar 是 101
|
someVar++; // someVar 是 101
|
||||||
someVar-- // 回到 100
|
someVar--; // 回到 100
|
||||||
|
|
||||||
// 数组是任意类型组成的有序列表
|
// 数组是任意类型组成的有序列表
|
||||||
var myArray = ["Hello", 45, true]
|
var myArray = ["Hello", 45, true];
|
||||||
|
|
||||||
// 数组的元素可以用方括号下标来访问
|
// 数组的元素可以用方括号下标来访问。
|
||||||
// 数组的索引从0开始
|
// 数组的索引从0开始。
|
||||||
myArray[1] // = 45
|
myArray[1]; // = 45
|
||||||
|
|
||||||
// javascript中的对象相当于其他语言中的字典或映射:是键-值的集合
|
// 数组是可变的,并拥有变量 length。
|
||||||
{key1: "Hello", key2: "World"}
|
myArray.push("World");
|
||||||
|
myArray.length; // = 4
|
||||||
|
|
||||||
// 键是字符串,但是引号也并非是必须的,如果键本身是合法的js标识符
|
// 在指定下标添加/修改
|
||||||
// 而值则可以是任意类型的值
|
myArray[3] = "Hello";
|
||||||
var myObj = {myKey: "myValue", "my other key": 4}
|
|
||||||
|
|
||||||
// 对象的访问可以通过下标
|
// javascript中的对象相当于其他语言中的“字典”或“映射”:是键-值对的无序集合。
|
||||||
myObj["my other key"] // = 4
|
var myObj = {key1: "Hello", key2: "World"};
|
||||||
|
|
||||||
|
// 键是字符串,但如果键本身是合法的js标识符,则引号并非是必须的。
|
||||||
|
// 值可以是任意类型。
|
||||||
|
var myObj = {myKey: "myValue", "my other key": 4};
|
||||||
|
|
||||||
|
// 对象属性的访问可以通过下标
|
||||||
|
myObj["my other key"]; // = 4
|
||||||
|
|
||||||
// ... 或者也可以用 . ,如果属性是合法的标识符
|
// ... 或者也可以用 . ,如果属性是合法的标识符
|
||||||
myObj.myKey // = "myValue"
|
myObj.myKey; // = "myValue"
|
||||||
|
|
||||||
// 对象是可变的,键和值也可以被更改或增加
|
// 对象是可变的;值也可以被更改或增加新的键
|
||||||
myObj.myThirdKey = true
|
myObj.myThirdKey = true;
|
||||||
|
|
||||||
// 如果你想要访问一个还没有被定义的属性,那么会返回undefined
|
// 如果你想要获取一个还没有被定义的值,那么会返回undefined
|
||||||
myObj.myFourthKey // = undefined
|
myObj.myFourthKey; // = undefined
|
||||||
|
|
||||||
///////////////////////////////////
|
///////////////////////////////////
|
||||||
// 3. 逻辑与控制结构
|
// 3. 逻辑与控制结构
|
||||||
|
|
||||||
// if语句和其他语言中一样
|
// 本节介绍的语法与Java的语法几乎完全相同
|
||||||
var count = 1
|
|
||||||
|
// `if`语句和其他语言中一样。
|
||||||
|
var count = 1;
|
||||||
if (count == 3){
|
if (count == 3){
|
||||||
// count 是 3 时执行
|
// count 是 3 时执行
|
||||||
} else if (count == 4) {
|
} else if (count == 4){
|
||||||
// count 是 4 时执行
|
// count 是 4 时执行
|
||||||
} else {
|
} else {
|
||||||
// 其他情况下执行
|
// 其他情况下执行
|
||||||
@ -179,219 +203,273 @@ while (true) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Do-while 和 While 循环很像 ,但前者会至少执行一次
|
// Do-while 和 While 循环很像 ,但前者会至少执行一次
|
||||||
var input
|
var input;
|
||||||
do {
|
do {
|
||||||
input = getInput()
|
input = getInput();
|
||||||
} while (!isValid(input))
|
} while (!isValid(input))
|
||||||
|
|
||||||
// for循环和C、Java中的一样
|
// `for`循环和C、Java中的一样:
|
||||||
// 初始化; 继续执行的条件; 遍历后执行.
|
// 初始化; 继续执行的条件; 迭代。
|
||||||
for (var i = 0; i < 5; i++){
|
for (var i = 0; i < 5; i++){
|
||||||
// 遍历5次
|
// 遍历5次
|
||||||
}
|
}
|
||||||
|
|
||||||
// && 是逻辑与, || 是逻辑或
|
// && 是逻辑与, || 是逻辑或
|
||||||
if (house.size == "big" && house.colour == "blue"){
|
if (house.size == "big" && house.colour == "blue"){
|
||||||
house.contains = "bear"
|
house.contains = "bear";
|
||||||
}
|
}
|
||||||
if (colour == "red" || colour == "blue"){
|
if (colour == "red" || colour == "blue"){
|
||||||
// colour是red或者blue时执行
|
// colour是red或者blue时执行
|
||||||
}
|
}
|
||||||
|
|
||||||
// && 和 || 是“短路”语句,在初始化值时会变得有用
|
// && 和 || 是“短路”语句,它在设定初始化值时特别有用
|
||||||
var name = otherName || "default"
|
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. 函数、作用域、闭包
|
// 4. 函数、作用域、闭包
|
||||||
|
|
||||||
// JavaScript 函数由function关键字定义
|
// JavaScript 函数由`function`关键字定义
|
||||||
function myFunction(thing){
|
function myFunction(thing){
|
||||||
return thing.toUpperCase()
|
return thing.toUpperCase();
|
||||||
}
|
}
|
||||||
myFunction("foo") // = "FOO"
|
myFunction("foo"); // = "FOO"
|
||||||
|
|
||||||
// 函数也可以是匿名的:
|
// 注意被返回的值必须开始于`return`关键字的那一行,
|
||||||
function(thing){
|
// 否则由于自动的分号补齐,你将返回`undefined`。
|
||||||
return thing.toLowerCase()
|
// 在使用Allman风格的时候要注意.
|
||||||
|
function myFunction()
|
||||||
|
{
|
||||||
|
return // <- 分号自动插在这里
|
||||||
|
{
|
||||||
|
thisIsAn: 'object literal'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// (我们无法调用此函数,因为我们不知道这个函数的名字)
|
myFunction(); // = undefined
|
||||||
|
|
||||||
// javascript中的函数也是对象,所以函数也能够赋给一个变量,并且被传递
|
// javascript中函数是一等对象,所以函数也能够赋给一个变量,
|
||||||
// 比如一个事件处理函数:
|
// 并且被作为参数传递 —— 比如一个事件处理函数:
|
||||||
function myFunction(){
|
function myFunction(){
|
||||||
// this code will be called in 5 seconds' time
|
// this code will be called in 5 seconds' time
|
||||||
}
|
}
|
||||||
setTimeout(myFunction, 5000)
|
setTimeout(myFunction, 5000);
|
||||||
|
// 注意:setTimeout不是js语言的一部分,而是由浏览器和Node.js提供的。
|
||||||
|
|
||||||
// 你甚至可以直接把一个函数写到另一个函数的参数中
|
// 函数对象甚至不需要声明名称 —— 你可以直接把一个函数定义写到另一个函数的参数中
|
||||||
|
setTimeout(function(){
|
||||||
|
// this code will be called in 5 seconds' time
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
setTimeout(function myFunction(){
|
// JavaScript 有函数作用域;函数有其自己的作用域而其他的代码块则没有。
|
||||||
// 5秒之后会执行这里的代码
|
|
||||||
}, 5000)
|
|
||||||
|
|
||||||
// JavaScript 仅有函数作用于,而其他的语句则没有作用域
|
|
||||||
if (true){
|
if (true){
|
||||||
var i = 5
|
var i = 5;
|
||||||
}
|
}
|
||||||
i // = 5 - 并非我们在其他语言中所得到的undefined
|
i; // = 5 - 并非我们在其他语言中所期望得到的undefined
|
||||||
|
|
||||||
// 这就导致了人们经常用一种叫做“即使执行匿名函数”的模式
|
// 这就导致了人们经常使用的“立即执行匿名函数”的模式,
|
||||||
// 这样可以避免一些临时变量扩散到外边去
|
// 这样可以避免一些临时变量扩散到全局作用域去。
|
||||||
function(){
|
(function(){
|
||||||
var temporary = 5
|
var temporary = 5;
|
||||||
// 我们可以访问一个全局对象来访问全局作用域
|
// 我们可以访问修改全局对象("global object")来访问全局作用域,
|
||||||
// 在浏览器中是 'window' 这个对象。
|
// 在web浏览器中是`window`这个对象。
|
||||||
// 在Node.js中这个对象的名字可能会不同。
|
// 在其他环境如Node.js中这个对象的名字可能会不同。
|
||||||
window.permanent = 10
|
window.permanent = 10;
|
||||||
// 或者,我们也可以把var去掉就行了
|
})();
|
||||||
permanent2 = 15
|
temporary; // 抛出引用异常ReferenceError
|
||||||
}()
|
permanent; // = 10
|
||||||
temporary // 抛出引用异常
|
|
||||||
permanent // = 10
|
|
||||||
permanent2 // = 15
|
|
||||||
|
|
||||||
// javascript最强大的功能之一就是闭包
|
// javascript最强大的功能之一就是闭包。
|
||||||
// 如果一个函数在另一个函数中定义,那么这个函数就拥有外部函数的所有访问权
|
// 如果一个函数在另一个函数中定义,那么这个内部函数就拥有外部函数的所有变量的访问权,
|
||||||
|
// 即使在外部函数结束之后。
|
||||||
function sayHelloInFiveSeconds(name){
|
function sayHelloInFiveSeconds(name){
|
||||||
var prompt = "Hello, " + name + "!"
|
var prompt = "Hello, " + name + "!";
|
||||||
|
// 内部函数默认是放在局部作用域的,
|
||||||
|
// 就像是用`var`声明的。
|
||||||
function inner(){
|
function inner(){
|
||||||
alert(prompt)
|
alert(prompt);
|
||||||
}
|
}
|
||||||
setTimeout(inner, 5000)
|
setTimeout(inner, 5000);
|
||||||
// setTimeout 是异步的,所以这个函数会马上终止不会等待。
|
// setTimeout是异步的,所以 sayHelloInFiveSeconds 函数会立即退出,
|
||||||
// 然而,在5秒结束后,inner函数仍然会弹出prompt信息。
|
// 而 setTimeout 会在后面调用inner
|
||||||
|
// 然而,由于inner是由sayHelloInFiveSeconds“闭合包含”的,
|
||||||
|
// 所以inner在其最终被调用时仍然能够访问`prompt`变量。
|
||||||
}
|
}
|
||||||
sayHelloInFiveSeconds("Adam") // 会在5秒后弹出 "Hello, Adam!"
|
sayHelloInFiveSeconds("Adam"); // 会在5秒后弹出 "Hello, Adam!"
|
||||||
|
|
||||||
|
|
||||||
///////////////////////////////////
|
///////////////////////////////////
|
||||||
// 5. 对象、构造函数与原型
|
// 5. 对象、构造函数与原型
|
||||||
|
|
||||||
// 对象包含方法
|
// 对象可以包含方法。
|
||||||
var myObj = {
|
var myObj = {
|
||||||
myFunc: function(){
|
myFunc: function(){
|
||||||
return "Hello world!"
|
return "Hello world!";
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
myObj.myFunc() // = "Hello world!"
|
myObj.myFunc(); // = "Hello world!"
|
||||||
|
|
||||||
// 当对象中的函数被调用时,这个函数就可以通过this关键字访问这个对象
|
// 当对象中的函数被调用时,这个函数可以通过`this`关键字访问其依附的这个对象。
|
||||||
myObj = {
|
myObj = {
|
||||||
myString: "Hello world!",
|
myString: "Hello world!",
|
||||||
myFunc: function(){
|
myFunc: function(){
|
||||||
return this.myString
|
return this.myString;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
myObj.myFunc() // = "Hello world!"
|
myObj.myFunc(); // = "Hello world!"
|
||||||
|
|
||||||
// 但这个函数访问的其实是其运行时环境,而非定义时环境
|
// 但这个函数访问的其实是其运行时环境,而非定义时环境,即取决于函数是如何调用的。
|
||||||
// 所以如果函数所在的环境不在当前对象的环境中运行时,就运行不成功了
|
// 所以如果函数被调用时不在这个对象的上下文中,就不会运行成功了。
|
||||||
var myFunc = myObj.myFunc
|
var myFunc = myObj.myFunc;
|
||||||
myFunc() // = undefined
|
myFunc(); // = undefined
|
||||||
|
|
||||||
// 相应的,一个函数也可以被指定为一个对象的方法,并且用过this可以访问
|
// 相应的,一个函数也可以被指定为一个对象的方法,并且可以通过`this`访问
|
||||||
// 这个对象的成员,即使在定义时并没有绑定任何值
|
// 这个对象的成员,即使在行数被定义时并没有依附在对象上。
|
||||||
var myOtherFunc = function(){
|
var myOtherFunc = function(){
|
||||||
return this.myString.toUpperCase()
|
return this.myString.toUpperCase();
|
||||||
}
|
}
|
||||||
myObj.myOtherFunc = myOtherFunc
|
myObj.myOtherFunc = myOtherFunc;
|
||||||
myObj.myOtherFunc() // = "HELLO WORLD!"
|
myObj.myOtherFunc(); // = "HELLO WORLD!"
|
||||||
|
|
||||||
// 当你通过new关键字调用一个函数时,就会生成一个对象
|
// 当我们通过`call`或者`apply`调用函数的时候,也可以为其指定一个执行上下文。
|
||||||
// 而对象的成员需要通过this来定义。
|
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); // = 6
|
||||||
|
Math.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(){
|
var MyConstructor = function(){
|
||||||
this.myNumber = 5
|
this.myNumber = 5;
|
||||||
}
|
}
|
||||||
myNewObj = new MyConstructor() // = {myNumber: 5}
|
myNewObj = new MyConstructor(); // = {myNumber: 5}
|
||||||
myNewObj.myNumber // = 5
|
myNewObj.myNumber; // = 5
|
||||||
|
|
||||||
// 每一个js对象都有一个原型,当你要访问一个没有定义过的成员时,
|
// 每一个js对象都有一个‘原型’。当你要访问一个实际对象中没有定义的一个属性时,
|
||||||
// 解释器就回去找这个对象的原型
|
// 解释器就回去找这个对象的原型。
|
||||||
|
|
||||||
// 有一些JS实现会让你通过一个对象的__proto__方法访问这个原型。
|
// 一些JS实现会让你通过`__proto__`属性访问一个对象的原型。
|
||||||
// 这虽然对理解这个对象很有用,但是这并不是标准的一部分
|
// 这虽然对理解原型很有用,但是它并不是标准的一部分;
|
||||||
// 我们之后会通过标准方式来访问原型。
|
// 我们后面会介绍使用原型的标准方式。
|
||||||
var myObj = {
|
var myObj = {
|
||||||
myString: "Hello world!",
|
myString: "Hello world!"
|
||||||
}
|
};
|
||||||
var myPrototype = {
|
var myPrototype = {
|
||||||
meaningOfLife: 42,
|
meaningOfLife: 42,
|
||||||
myFunc: function(){
|
myFunc: function(){
|
||||||
return this.myString.toLowerCase()
|
return this.myString.toLowerCase()
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
myObj.__proto__ = myPrototype
|
|
||||||
myObj.meaningOfLife // = 42
|
|
||||||
|
|
||||||
// This works for functions, too.
|
myObj.__proto__ = myPrototype;
|
||||||
|
myObj.meaningOfLife; // = 42
|
||||||
|
|
||||||
|
// 函数也可以工作。
|
||||||
myObj.myFunc() // = "hello world!"
|
myObj.myFunc() // = "hello world!"
|
||||||
|
|
||||||
// 当然,如果你要访问的成员在原型当中也没有定义的话,解释器就会去找原型的原型。
|
// 当然,如果你要访问的成员在原型当中也没有定义的话,解释器就会去找原型的原型,以此类堆。
|
||||||
myPrototype.__proto__ = {
|
myPrototype.__proto__ = {
|
||||||
myBoolean: true
|
myBoolean: true
|
||||||
}
|
};
|
||||||
myObj.myBoolean // = true
|
myObj.myBoolean; // = true
|
||||||
|
|
||||||
// 这其中并没有对象的拷贝。每个对象的原型实际上是持有原型对象的引用
|
// 这其中并没有对象的拷贝;每个对象实际上是持有原型对象的引用。
|
||||||
// 这说明当我们改变对象的原型时,会影响到其他以这个原型为原型的对象
|
// 这意味着当我们改变对象的原型时,会影响到其他以这个原型为原型的对象。
|
||||||
myPrototype.meaningOfLife = 43
|
myPrototype.meaningOfLife = 43;
|
||||||
myObj.meaningOfLife // = 43
|
myObj.meaningOfLife; // = 43
|
||||||
|
|
||||||
// 我们知道 __proto__ 并非标准规定,实际上也没有办法更改已经指定好的原型。
|
// 我们知道 `__proto__` 并非标准规定,实际上也没有标准办法来修改一个已存在对象的原型。
|
||||||
// 但是,我们有两种方式可以为新的对象指定原型。
|
// 然而,我们有两种方式为指定原型创建一个新的对象。
|
||||||
|
|
||||||
// 第一种方式是 Object.create,这个方法是在最近才被添加到Js中的
|
// 第一种方式是 Object.create,这个方法是在最近才被添加到Js中的,
|
||||||
// 也因此并不是所有的JS实现都有这个方法
|
// 因此并不是所有的JS实现都有这个方法
|
||||||
var myObj = Object.create(myPrototype)
|
var myObj = Object.create(myPrototype);
|
||||||
myObj.meaningOfLife // = 43
|
myObj.meaningOfLife; // = 43
|
||||||
|
|
||||||
// 第二种方式可以在任意版本中使用,不过需要通过构造函数。
|
// 第二种方式可以在任意版本中使用,不过必须通过构造函数。
|
||||||
// 构造函数有一个属性prototype。但是这 *不是* 构造函数本身的函数
|
// 构造函数有一个属性prototype。但是它 *不是* 构造函数本身的原型;相反,
|
||||||
// 而是通过构造函数和new关键字生成新对象时自动生成的。
|
// 是通过构造函数和new关键字创建的新对象的原型。
|
||||||
myConstructor.prototype = {
|
MyConstructor.prototype = {
|
||||||
|
myNumber: 5,
|
||||||
getMyNumber: function(){
|
getMyNumber: function(){
|
||||||
return this.myNumber
|
return this.myNumber;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
var myNewObj2 = new myConstructor()
|
var myNewObj2 = new MyConstructor();
|
||||||
myNewObj2.getMyNumber() // = 5
|
myNewObj2.getMyNumber(); // = 5
|
||||||
|
myNewObj2.myNumber = 6
|
||||||
|
myNewObj2.getMyNumber(); // = 6
|
||||||
|
|
||||||
// 字符串和数字等内置类型也有通过构造函数来创建的包装类型
|
// 字符串和数字等内置类型也有通过构造函数来创建的包装类型
|
||||||
var myNumber = 12
|
var myNumber = 12;
|
||||||
var myNumberObj = new Number(12)
|
var myNumberObj = new Number(12);
|
||||||
myNumber == myNumberObj // = true
|
myNumber == myNumberObj; // = true
|
||||||
|
|
||||||
// 但是它们并非严格等价
|
// 但是它们并非严格等价
|
||||||
typeof myNumber // = 'number'
|
typeof myNumber; // = 'number'
|
||||||
typeof myNumberObj // = 'object'
|
typeof myNumberObj; // = 'object'
|
||||||
myNumber === myNumberObj // = false
|
myNumber === myNumberObj; // = false
|
||||||
if (0){
|
if (0){
|
||||||
// 这段代码不会执行,因为0代表假
|
// 这段代码不会执行,因为0代表假
|
||||||
}
|
}
|
||||||
if (Number(0)){
|
if (Number(0)){
|
||||||
// 这段代码会执行,因为Number(0)代表真
|
// 这段代码*会*执行,因为Number(0)代表真
|
||||||
}
|
}
|
||||||
|
|
||||||
// 但是,包装类型和内置类型共享一个原型
|
// 不过,包装类型和内置类型共享一个原型,
|
||||||
// 这样你就可以给内置类型也增加一些功能
|
// 所以你实际可以给内置类型也增加一些功能,例如对string:
|
||||||
String.prototype.firstCharacter = function(){
|
String.prototype.firstCharacter = function(){
|
||||||
return this.charAt(0)
|
return this.charAt(0);
|
||||||
}
|
}
|
||||||
"abc".firstCharacter() // = "a"
|
"abc".firstCharacter(); // = "a"
|
||||||
|
|
||||||
// 这个技巧可以用来用老版本的javascript子集来是实现新版本js的功能
|
// 这个技巧经常用在“代码填充”中,来为老版本的javascript子集增加新版本js的特性,
|
||||||
// 这样就可以在老的浏览器中使用新功能了。
|
// 这样就可以在老的浏览器中使用新功能了。
|
||||||
|
|
||||||
// 比如,我们知道Object.create并没有在所有的版本中都实现
|
// 比如,我们知道Object.create并没有在所有的版本中都实现,
|
||||||
// 但是我们仍然可以通过以下兼容代码来实现:
|
// 但是我们仍然可以通过“代码填充”来实现兼容:
|
||||||
if (Object.create === undefined){ // 如果存在则不覆盖
|
if (Object.create === undefined){ // 如果存在则不覆盖
|
||||||
Object.create = function(proto){
|
Object.create = function(proto){
|
||||||
// 用正确的原型来创建一个临时构造函数
|
// 用正确的原型来创建一个临时构造函数
|
||||||
var Constructor = function(){}
|
var Constructor = function(){};
|
||||||
Constructor.prototype = proto
|
Constructor.prototype = proto;
|
||||||
// 之后用它来创建一个新的对象
|
// 之后用它来创建一个新的对象
|
||||||
return new Constructor()
|
return new Constructor();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@ -399,19 +477,23 @@ if (Object.create === undefined){ // 如果存在则不覆盖
|
|||||||
## 更多阅读
|
## 更多阅读
|
||||||
|
|
||||||
[Mozilla 开发者
|
[Mozilla 开发者
|
||||||
网络](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 提供了很好的
|
网络](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 提供了优秀的介绍
|
||||||
Javascript文档,并且由于是wiki,所以你也可以自行编辑来分享你的知识。
|
Javascript如何在浏览器中使用的文档。而且它是wiki,所以你也可以自行编辑来分享你的知识。
|
||||||
|
|
||||||
MDN的 [A re-introduction to
|
MDN的 [A re-introduction to
|
||||||
JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
|
JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
|
||||||
覆盖了这里提到的绝大多数话题,大多数只是Javascript这个语言本身。
|
覆盖了这里提到的绝大多数话题的细节。该导引的大多数内容被限定在只是Javascript这个语言本身;
|
||||||
如果你想了解Javascript是如何在网页中被应用的,那么可以查看
|
如果你想了解Javascript是如何在网页中被应用的,那么可以查看
|
||||||
[Document Object
|
[Document Object
|
||||||
Model](https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core)
|
Model](https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core)
|
||||||
|
|
||||||
|
[Learn Javascript by Example and with Challenges](http://www.learneroo.com/modules/64/nodes/350) 是本参考的另一个版本,并包含了挑战习题。
|
||||||
|
|
||||||
[Javascript Garden](http://bonsaiden.github.io/JavaScript-Garden/) 是一个深入
|
[Javascript Garden](http://bonsaiden.github.io/JavaScript-Garden/) 是一个深入
|
||||||
讲解所有Javascript反直觉部分的一本书
|
讲解所有Javascript反直觉部分的导引。
|
||||||
|
|
||||||
|
[JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527/) 是一个经典的指导参考书。
|
||||||
|
|
||||||
除了这篇文章的直接贡献者之外,这篇文章也参考了这个网站上
|
除了这篇文章的直接贡献者之外,这篇文章也参考了这个网站上
|
||||||
Louie Dinh 的 Python 教程,以及 Mozilla开发者网络上的[JS
|
Louie Dinh 的 Python 教程,以及 Mozilla开发者网络上的[JS
|
||||||
Tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
|
Tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)。
|
||||||
|
Loading…
Reference in New Issue
Block a user