[翻译]JavaScript秘密花园 - hasOwnProperty,Functions,this
2011-03-16 09:26
375 查看
JavaScript Garden - 原文
JavaScript Garden - 中文翻译
为了判断一个对象是否包含自定义属性而不是原型链上的属性, 我们需要使用继承自
注意: 通过判断一个属性是否
只有
JavaScript 不会保护
函数声明(The
上面的方法会在执行前被 解析(hoisted),因此它存在于当前上下文的任意一个地方, 即使在函数定义体的上面被调用也是对的。
函数赋值表达式(The
这个例子把一个匿名的函数赋值给变量
由于
但是由于赋值语句只在运行时执行,因此在相应代码执行之前,
this 的工作原理(How
JavaScript 有一套完全不同于其它语言的对
当在全部范围内使用
这里
ES5 注意: 在严格模式下(strict mode),不存在全局变量。 这种情况下
这个例子中,
如果函数倾向于和
显式的设置
当使用
因此函数调用的规则在上例中已经不适用了,在
注意: 在对象的字面声明语法中,
一个常见的误解是
为了在
上例中,
虽然
view sourceprint?
当
本中文翻译由三上石上原创,博客园首发,转载请注明出处。
JavaScript Garden - 中文翻译
hasOwnProperty
为了判断一个对象是否包含自定义属性而不是原型链上的属性, 我们需要使用继承自 Object.prototype的
hasOwnProperty方法。
注意: 通过判断一个属性是否
undefined是不够的。 因为一个属性可能确实存在,只不过它的值被设置为
undefined。
hasOwnProperty是JavaScript中唯一一个处理属性但是不需要查找原型链的方法。
1 | // 修改Object.prototype |
2 | Object.prototype.bar = 1; |
3 | var foo ={goo: undefined}; |
4 |
5 | foo.bar; // 1 |
6 | 'bar' in foo; // true |
7 |
8 | foo.hasOwnProperty( 'bar' ); // false |
9 | foo.hasOwnProperty( 'goo' ); // true |
hasOwnProperty可以给出正确和期望的结果,这在遍历对象的属性时会很有用。 没有其它方法可以用来排除原型链上的属性,而不是定义在对象自身上的属性。
hasOwnProperty
作为属性(hasOwnProperty
as a property)
JavaScript 不会保护 hasOwnProperty被非法占用,因此如果一个对象碰巧存在这个属性, 就需要使用外部的
hasOwnProperty函数来获取正确的结果。
01 | var foo ={ |
02 | hasOwnProperty: function () { |
03 | return false ; |
04 | }, |
05 | bar: 'Here be dragons' |
06 | }; |
07 |
08 | foo.hasOwnProperty( 'bar' ); // 总是返回 false |
09 |
10 | // 使用其它对象的 hasOwnProperty,并将其上下为设置为foo |
11 | {}.hasOwnProperty.call(foo, 'bar' ); // true |
结论(In conclusion)
当检查对象上某个属性是否存在时,hasOwnProperty是唯一可用的方法。 同时在使用
for inloop 遍历对象时,推荐总是使用
hasOwnProperty方法, 这将会避免原型对象扩展带来的干扰。
函数(Functions)
函数是JavaScript中的一等对象,这意味着可以把函数像其它值一样传递。 一个常见的用法是把匿名函数作为回调函数传递对异步函数中。函数声明(The function
declaration)
1 | function foo() {} |
1 | foo(); // 正常运行,因为foo在代码运行前已经被创建 |
2 | function foo() {} |
函数赋值表达式(The function
expression)
1 | var foo = function () {}; |
foo。
1 | foo; // 'undefined' |
2 | foo(); // 出错:TypeError |
3 | var foo = function () {}; |
var定义了一个声明语句,对变量
foo的解析是在代码运行之前,因此
foo变量在代码运行时已经被定义过了。
但是由于赋值语句只在运行时执行,因此在相应代码执行之前,
foo的值缺省为 undefined。
命名函数的赋值表达式(Named function expression)
另外一个特殊的情况是将命名函数赋值给一个变量。1 | var foo = function bar() { |
2 | bar(); // 正常运行 |
3 | } |
4 | bar(); // 出错:ReferenceError |
bar函数声明外是不可见的,这是因为我们已经把函数赋值给了
foo; 然而在
bar内部依然可见。这是由于 JavaScript 的 命名处理 所致, 函数名在函数内总是可见的。
this 的工作原理(How this
works)
JavaScript 有一套完全不同于其它语言的对 this的处理机制。 在五种不同的情况下 ,
this指向的各不相同。
全局范围内(The global scope)
1 | this ; |
this,它将会指向全局对象。 (译者注:浏览器中运行的JavaScript脚本,这个全局对象是 window)
函数调用(Calling a function)
1 | foo(); |
this也会指向全局对象。
ES5 注意: 在严格模式下(strict mode),不存在全局变量。 这种情况下
this将会是
undefined。 (译者注:ES5指的是ECMAScript 5,是2009-12发布的最新的 JavaScript 版本。)
方法调用(Calling a method)
1 | test.foo(); |
this指向
test对象。
调用构造函数(Calling a constructor)
1 | new foo(); |
new关键词一块使用,则我们称这个函数是 构造函数。 在函数内部,
this指向新创建的对象。
显式的设置 this
(Explicit setting of this
)
1 | function foo(a, b, c) {} |
2 |
3 | var bar = {}; |
4 | foo.apply(bar, [1, 2, 3]); // 数组将会被扩展,如下所示 |
5 | foo.call(bar, 1, 2, 3); // 传递到foo的参数是:a = 1, b = 2, c = 3 |
Function.prototype上的
call或者
apply方法时,函数内的
this将会被 显式设置为函数调用的第一个参数。
因此函数调用的规则在上例中已经不适用了,在
foo函数内
this被设置成了
bar。
注意: 在对象的字面声明语法中,
this不能用来指向对象本身。 因此
var obj = {me: this}中的
me不会指向
obj,因为
this只可能出现在上述的五种情况中。 (译者注:这个例子中,如果是在浏览器中运行,obj.me等于window对象。)
常见误解(Common pitfalls)
尽管大部分的情况都说的过去,不过第一个规则(译者注:这里指的应该是第二个规则,也就是直接调用函数时,this指向全局对象) 被认为是JavaScript语言另一个错误设计的地方,因为它从来就没有实际的用途。
1 | Foo.method = function () { |
2 | function test() { |
3 | // this 将会被设置为全局对象(译者注:浏览器环境中也就是 window 对象) |
4 | } |
5 | test(); |
6 | } |
test中的
this将会指向
Foo对象,实际上不是这样子的。
为了在
test中获取对
Foo对象的引用,我们需要在
method函数内部创建一个局部变量指向
Foo对象。
1 | Foo.method = function () { |
2 | var that = this ; |
3 | function test() { |
4 | // 使用 that 来指向 Foo 对象 |
5 | } |
6 | test(); |
7 | } |
that只是我们随意起的名字,不过这个名字被广泛的用来指向外部的
this对象。 在 closures 一节,我们可以看到
that可以作为参数传递。
方法的赋值表达式(Assigning methods)
另一个看起来奇怪的地方是函数别名,也就是将一个方法赋值给一个变量。1 | var test = someObject.methodTest; |
2 | test(); |
test就像一个普通的函数被调用;因此,函数内的
this将不再被指向到
someObject对象。
虽然
this的晚绑定特性似乎并不友好,但是这确实基于原型继承赖以生存的土壤。
view sourceprint?
1 | function Foo() {} |
2 | Foo.prototype.method = function () {}; |
3 |
4 | function Bar() {} |
5 | Bar.prototype = Foo.prototype; |
6 |
7 | new Bar().method(); |
method被调用时,
this将会指向
Bar的实例对象。
本中文翻译由三上石上原创,博客园首发,转载请注明出处。
相关文章推荐
- [翻译]JavaScript秘密花园 - hasOwnProperty,Functions,this
- [翻译]JavaScript秘密花园 - hasOwnProperty,Functions,this
- JavaScript秘密花园 - hasOwnProperty,Functions,this
- JavaScript秘密花园 - hasOwnProperty,Functions,this
- JavaScript秘密花园 - hasOwnProperty,Functions,this
- JavaScript hasOwnProperty() 函数详解
- javascript的全局变量寄存空间和delete、hasOwnProperty方法(等于php的unset和isset)
- JavaScript hasOwnProperty() 函数详解
- [翻译]JavaScript秘密花园 - Object, Prototype
- [翻译]JavaScript秘密花园 - Object, Prototype
- (转)JavaScript: in, hasOwnProperty, delete, for/in
- javascript 对象及原型继承有关的属性:constructor、prototype、isPrototypeOf、instanceof、in 、hasOwnProperty 等等
- [翻译]JavaScript秘密花园 - scope, namespace, constructor, equality and comparisons
- PPK 谈 JavaScript 的 this 关键字 [翻译]
- JavaScript中的hasOwnProperty和isPrototypeOf方法使用实例
- Javascript 对象不支持此属性或方法,Object doesn’t support this property or method
- javascript中in和hasOwnProperty区别
- [翻译]JavaScript秘密花园 - Array, Array Constructor, for in loop, typeof, instanceOf
- JavaScript isPrototypeOf和hasOwnProperty使用区别
- Javascript中的for in循环和hasOwnProperty结合使用