翻译]JavaScript秘密花园 - scope, namespace, constructor, equality and comparisons
2011-03-23 08:54
776 查看
JavaScript Garden - 原文
JavaScript Garden - 中文翻译
译者注:如果 return 对象的左括号和 return 不在一行上就会出错。
JavaScript 中没有显式的命名空间定义,这就意味着所有对象都定义在一个全局共享的命名空间下面。
每次引用一个变量,JavaScript 会向上遍历整个作用域直到找到这个变量为止。如果到达全局作用域但是这个变量仍未找到,则会抛出
上面两段脚本效果不同。脚本 A 在全局作用域内定义了变量
再次强调,上面的效果完全不同,不使用
在函数
外部循环在第一次调用
上面代码在运行之前将会被转化。JavaScript 将会把
没有块级作用域不仅导致
在原来代码中,
如果没有提升规则(hoisting)的知识,下面的代码看起来会抛出异常
实际上,上面的代码正常运行,因为
译者注:在 Nettuts+ 网站有一篇介绍 hoisting 的文章,其中的代码很有启发性。
函数作用域内也有默认的变量 `arguments`,其中包含了传递到函数中的参数。
比如,当访问函数内的
当前作用域内是否有
函数形式参数是否有使用
函数自身是否叫做
回溯到上一级作用域,然后从 #1 重新开始。
注意: 自定义
匿名函数被认为是 表达式;因此为了可调用性,它们首先会被执行(evaluated)。
有一些其他的调用函数表达式的方法,比如下面的两种方式语法不同,但是效果一模一样。
另外,使用全局变量被认为是不好的习惯。这样的代码倾向于产生错误和带来高的维护成本。
在构造函数内部 - 也就是被调用的函数内 -
如果被调用的函数没有显式的
上面代码把
显式的
如果
虽然上例在有些情况下也能正常运行,但是由于 JavaScript 中 `this` 的工作原理,这里的
上面两种对
还需要注意,
在上面的例子中,使用或者不使用
为了创建新对象,我们可以创建一个工厂方法,并且在方法内构造一个新对象。
虽然上面的方式比起
会占用更多的内存,因为新创建的对象不能共享原型上的方法。
为了实现继承,工厂方法需要从另外一个对象拷贝所有属性,或者把一个对象作为新创建对象的原型。
放弃原型链仅仅是因为防止遗漏
JavaScript 是弱类型语言,这就意味着,等于操作符会为了比较两个值而进行强制类型转换。
上面的表格展示了强类型转换,这也是使用
此外,强制类型转换也会带来性能消耗,比如一个字符串为了和一个数组进行比较,必须事先被强制转换为数字。
不想普通的等于操作符,严格的等于操作符不会进行强制类型转换。
上面的结果更加清晰并有利于代码的分析。如果两个操作数类型不同就肯定不相等也有助于性能的提升。
这里等于操作符比较的不是值是否相等,而是是否属于同一个身份;也就是说,只有对象的同一个实例才被认为是相等的。这有点像 Python 中的
/article/4676697.html
JavaScript Garden - 中文翻译
作用域与命名空间
尽管 JavaScript 支持一对花括号创建的代码段,但是并不支持块级作用域;而仅仅支持 函数作用域。function test() { // 一个作用域 for(var i = 0; i < 10; i++) { // 不是一个作用域 // count } console.log(i); // 10 }
译者注:如果 return 对象的左括号和 return 不在一行上就会出错。
// 译者注:下面输出 undefined function add(a, b) { return a + b; } console.log(add(1, 2));
JavaScript 中没有显式的命名空间定义,这就意味着所有对象都定义在一个全局共享的命名空间下面。
每次引用一个变量,JavaScript 会向上遍历整个作用域直到找到这个变量为止。如果到达全局作用域但是这个变量仍未找到,则会抛出
ReferenceError异常。
隐式的全局变量(The bane of global variables)
// script A foo = '42'; // script B var foo = '42'
上面两段脚本效果不同。脚本 A 在全局作用域内定义了变量
foo,而脚本 B 在当前作用域内定义变量
foo。
再次强调,上面的效果完全不同,不使用
var声明变量将会导致隐式的全局变量产生。
// 全局作用域 var foo = 42; function test() { // 局部作用域 foo = 21; } test(); foo; // 21
在函数
test内不使用
var关键字声明
foo变量将会覆盖外部的同名变量。起初这看起来并不是大问题,但是当有成千上万行代码时,不使用
var声明变量将会带来难以跟踪的 BUG。
// 全局作用域 var items = [/* some list */]; for(var i = 0; i < 10; i++) { subLoop(); } function subLoop() { // subLoop 函数作用域 for(i = 0; i < 10; i++) { // 没有使用 var 声明变量 // do amazing stuff! } }
外部循环在第一次调用
subLoop之后就会终止,因为
subLoop覆盖了全局变量
i。在第二个
for循环中使用
var声明变量可以避免这种错误。声明变量时绝对不要遗漏
var关键字,除非这就是期望的影响外部作用域的行为。
局部变量(Local variables)
JavaScript 中局部变量只可能通过两种方式声明,一个是作为函数参数,另一个是通过var关键字声明。
// 全局变量 var foo = 1; var bar = 2; var i = 2; function test(i) { // 函数 test 内的局部作用域 i = 5; var foo = 3; bar = 4; } test(10);
foo和
i是函数
test内的局部变量,而对
bar的赋值将会覆盖全局作用域内的同名变量。
变量声明提升(Hoisting)
JavaScript 会提升变量声明。这意味着var表达式和
function声明都将会被提升到当前作用域的顶部。
bar(); var bar = function() {}; var someValue = 42; test(); function test(data) { if (false) { goo = 1; } else { var goo = 2; } for(var i = 0; i < 100; i++) { var e = data[i]; } }
上面代码在运行之前将会被转化。JavaScript 将会把
var表达式和
function声明提升到当前作用域的顶部。
// var 表达式被移动到这里 var bar, someValue; // 缺省值是 'undefined' // 函数声明也会提升 function test(data) { var goo, i, e; // 没有块级作用域,这些变量被移动到函数顶部 if (false) { goo = 1; } else { goo = 2; } for(i = 0; i < 100; i++) { e = data[i]; } } bar(); // 出错:TypeError,因为 bar 依然是 'undefined' someValue = 42; // 赋值语句不会被提升规则(hoisting)影响 bar = function() {}; test();
没有块级作用域不仅导致
var表达式被从循环内移到外部,而且使一些
if表达式更难看懂。
在原来代码中,
if表达式看起来修改了全部变量
goo,实际上在提升规则(hoisting)被应用后,却是在修改局部变量。
如果没有提升规则(hoisting)的知识,下面的代码看起来会抛出异常
ReferenceError。
// 检查 SomeImportantThing 是否已经被初始化 if (!SomeImportantThing) { var SomeImportantThing = {}; }
实际上,上面的代码正常运行,因为
var表达式会被提升到全局作用域的顶部。
var SomeImportantThing; // 其它一些代码,可能会初始化 SomeImportantThing,也可能不会 // 检查是否已经被初始化 if (!SomeImportantThing) { SomeImportantThing = {}; }
译者注:在 Nettuts+ 网站有一篇介绍 hoisting 的文章,其中的代码很有启发性。
// 译者注:来自 Nettuts+ 的一段代码,生动的阐述了 JavaScript 中变量声明提升规则 var myvar = 'my value'; (function() { alert(myvar); // undefined var myvar = 'local value'; })();
名称解析顺序(Name resolution order)
JavaScript 中的所有作用域,包括全局作用域,都有一个特别的名称 `this` 指向当前对象。函数作用域内也有默认的变量 `arguments`,其中包含了传递到函数中的参数。
比如,当访问函数内的
foo变量时,JavaScript 会按照下面顺序查找:
当前作用域内是否有
var foo的定义。
函数形式参数是否有使用
foo名称的。
函数自身是否叫做
foo。
回溯到上一级作用域,然后从 #1 重新开始。
注意: 自定义
arguments参数将会阻止原生的
arguments对象的创建。
命名空间(Namespaces)
只有一个全局作用域导致的常见错误是命名冲突。在 JavaScript中,这可以通过 匿名包装器 轻松解决。(function() { // 函数创建一个命名空间(译者注:也就是作用域) window.foo = function() { // 对外公开的函数,创建了闭包 }; })(); // 立即执行此匿名函数
匿名函数被认为是 表达式;因此为了可调用性,它们首先会被执行(evaluated)。
( // 小括号内的函数首先被执行 function() {} ) // 并且返回函数对象 () // 调用上面的执行结果,也就是函数对象
有一些其他的调用函数表达式的方法,比如下面的两种方式语法不同,但是效果一模一样。
// 另外两种方式 +function(){}(); (function(){}());
结论(In conclusion)
推荐使用匿名包装器(译者注:也就是自执行的匿名函数)来创建命名空间。这样不仅可以防止命名冲突,而且有利于程序的模块化。另外,使用全局变量被认为是不好的习惯。这样的代码倾向于产生错误和带来高的维护成本。
构造函数
JavaScript 中的构造函数和其它语言中的构造函数是不同的。通过new关键字方式调用的函数都被认为是构造函数。
在构造函数内部 - 也就是被调用的函数内 -
this指向新创建的对象
Object。这个新创建的对象的 `prototype` 被指向到构造函数的
prototype。
如果被调用的函数没有显式的
return表达式,则隐式的会返回
this对象 - 也就是新创建的对象。
function Foo() { this.bla = 1; } Foo.prototype.test = function() { console.log(this.bla); }; var test = new Foo();
上面代码把
Foo作为构造函数调用,并设置新创建对象的
prototype为
Foo.prototype。
显式的
return表达式将会影响返回结果,但仅限于返回的是一个对象。
function Bar() { return 2; } new Bar(); // 返回新创建的对象 // 译者注:new Bar() 返回的是新创建的对象,而不是数字的字面值 2。 // 因此 new Bar().constructor === Bar // 但是如果返回的是数字对象,结果就不同了 // function Bar() { // return new Number(2); // } // new Bar().constructor === Number function Test() { this.value = 2; return { foo: 1 }; } new Test(); // 返回的对象 // 译者注:这里得到的是函数返回的对象,而不是通过 new 关键字新创建的对象 // 所有 (new Test()).value 为 undefined,但是 (new Test()).foo === 1。
如果
new被遗漏了,则函数不会返回新创建的对象。
function Foo() { this.bla = 1; // 获取设置全局参数 } Foo(); // undefined
虽然上例在有些情况下也能正常运行,但是由于 JavaScript 中 `this` 的工作原理,这里的
this指向全局对象。
工厂模式(Factories)
为了不使用new关键字,构造函数必须显式的返回一个值。
function Bar() { var value = 1; return { method: function() { return value; } } } Bar.prototype = { foo: function() {} }; new Bar(); Bar();
上面两种对
Bar函数的调用返回的值完全相同,一个新创建的拥有
method属性的对象被返回,其实这里创建了一个闭包。
还需要注意,
new Bar()并不会改变返回对象的原型(译者注:也就是返回对象的原型不会指向 Bar.prototype)。因为构造函数的原型会被指向到刚刚创建的新对象,而这里的
Bar没有把这个新对象返回(译者注:而是返回了一个包含
method属性的自定义对象)。
在上面的例子中,使用或者不使用
new关键字没有功能性的区别。
// 译者注:上面两种方式创建的对象不能访问 Bar 原型链上的属性 var bar1 = new Bar(); typeof(bar1.method); // "function" typeof(bar1.foo); // "undefined" var bar2 = Bar(); typeof(bar2.method); // "function" typeof(bar2.foo); // "undefined"
通过工厂模式创建新对象(Creating new objects via factories)
我们常听到的一条忠告是不要使用new关键字来调用函数,因为如果忘记使用它就会导致错误。
为了创建新对象,我们可以创建一个工厂方法,并且在方法内构造一个新对象。
function Foo() { var obj = {}; obj.value = 'blub'; var private = 2; obj.someMethod = function(value) { this.value = value; } obj.getPrivate = function() { return private; } return obj; }
虽然上面的方式比起
new的调用方式不容易出错,并且可以充分利用私有变量带来的便利,但是随之而来的是一些不好的地方。
会占用更多的内存,因为新创建的对象不能共享原型上的方法。
为了实现继承,工厂方法需要从另外一个对象拷贝所有属性,或者把一个对象作为新创建对象的原型。
放弃原型链仅仅是因为防止遗漏
new带来的问题,这似乎和语言本身的思想相违背。
总结(In conclusion)
虽然遗漏new关键字可能会导致问题,但这并不是放弃使用原型链的借口。最终使用哪种方式取决于应用程序的需求,选择一种代码书写风格并坚持下去才是最重要的。
相等与比较
JavaScript 有两种方式判断两个值是否相等。等于操作符(The equals operator)
等于操作符由两个等号组成:==
JavaScript 是弱类型语言,这就意味着,等于操作符会为了比较两个值而进行强制类型转换。
"" == "0" // false 0 == "" // true 0 == "0" // true false == "false" // false false == "0" // true false == undefined // false false == null // false null == undefined // true " \t\r\n" == 0 // true
上面的表格展示了强类型转换,这也是使用
==被广泛认为是不好编程习惯的主要原因,由于它的复杂转换规则,会导致难以跟踪的问题。
此外,强制类型转换也会带来性能消耗,比如一个字符串为了和一个数组进行比较,必须事先被强制转换为数字。
严格的等于操作符(The strict equals operator)
严格的等于操作符由三个等号组成:===
不想普通的等于操作符,严格的等于操作符不会进行强制类型转换。
"" === "0" // false 0 === "" // false 0 === "0" // false false === "false" // false false === "0" // false false === undefined // false false === null // false null === undefined // false " \t\r\n" === 0 // false
上面的结果更加清晰并有利于代码的分析。如果两个操作数类型不同就肯定不相等也有助于性能的提升。
比较对象(Comparing objects)
虽然==和
===操作符都是等于操作符,但是当其中有一个操作数为对象时,行为就不同了。
{} === {}; // false new String('foo') === 'foo'; // false new Number(10) === 10; // false var foo = {}; foo === foo; // true
这里等于操作符比较的不是值是否相等,而是是否属于同一个身份;也就是说,只有对象的同一个实例才被认为是相等的。这有点像 Python 中的
is和 C 中的指针比较。
结论(In conclusion)
强烈推荐使用严格的等于操作符。如果类型需要转换,应该在比较之前显式的转换,而不是使用语言本身复杂的强制转换规则。/article/4676697.html
相关文章推荐
- [翻译]JavaScript秘密花园 - scope, namespace, constructor, equality and comparisons
- [翻译]JavaScript秘密花园 - scope, namespace, constructor, equality and comparisons
- JavaScript秘密花园 - scope, namespace, constructor, equality and comparisons
- JavaScript秘密花园 - scope, namespace, constructor, equality and comparisons
- JavaScript秘密花园 - scope, namespace, constructor, equality and comparisons
- JavaScript秘密花园 - scope, namespace, constructor, equality and comparisons
- [翻译]JavaScript秘密花园 - hasOwnProperty,Functions,this
- Javascript Module pattern template. Shows a class with a constructor and public/private methods/properties. Also shows compatibility with CommonJS(eg Node.JS) and AMD (eg requireJS) as well as in a br
- javascript之函数作用域和闭包[function scope and closure]
- Javascript constructor and property
- Prototype and Constructor in JavaScript
- Session and Flash scopes【翻译】
- [翻译]JavaScript秘密花园 - Array, Array Constructor, for in loop, typeof, instanceOf
- JavaScript变量作用域和变量提升解释(JavaScript Variable Scope and Hoisting Explained)
- 【翻译字幕】The Technology History of "JavaScript and JQuery"
- [原创]祝贺《JavaScript 秘密花园》中文翻译被官方正式采纳
- [翻译]JavaScript秘密花园 - Type Casting,undefined,eval,setTimeout,Auto Semicolon Insertion - 全部完成PDF打包下载
- Python作用域和命名空间(Scope and Namespace)
- 【轉】Explaining JavaScript scope and closures
- [原创]祝贺《JavaScript 秘密花园》中文翻译被官方正式采纳