Use of the
with
statement is not recommended, as it may be the source of confusing bugs and compatibility issues. See the "Ambiguity Con" paragraph in the "Description" section below for details.
Summary
Extends the scope chain for a statement.
|
Implemented in | JavaScript 1.0 |
ECMAScript Edition | ECMA-262 |
Syntax
with (object) {
statement
}
Parameters
object
-
Adds the given object to the scope chain used when evaluating the statement. The parentheses around object are required.
statement
-
Any statement. To execute multiple statements, use a
block statement ({ ... }) to group those statements.
Description
JavaScript looks up an unqualified name by searching a scope chain associated with the execution context of the script or function containing that unqualified name. The 'with' statement adds the given object to the head of this scope chain during the evaluation of its statement body. If an unqualified name used in the body matches a property in the scope chain, then the name is bound to the property and the object containing the property. Otherwise a 'ReferenceError' is thrown.
Using
with
is not recommended, and is forbidden in ECMAScript 5
strict mode. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.
(On a historical note, Firefox 1.5 used to generate a warning when the 'with' statement was used: "deprecated with statement usage". This has been removed in Firefox 1.5.0.1 (
bug 322430).)
Performance Pro & Con
- Pro: 'with' can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. The scope chain change required by 'with' is not computationally expensive. Use of 'with' will relieve the interpreter of parsing repeated object references. Note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object.
- Con: 'with' forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.
Ambiguity Con
- Con: 'with' makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:
function f(x, o) {
with (o)
print(x);
}
only when f
is called is x
either found or not, and if found, either in o
or (if no such property exists) in f
's activation object, where x
names the first formal argument. If you forget to define x
in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.
- Con: Code using
with
may not be forward compatible, especially when used with something else than a plain object. Consider this example:
function f(foo, values) {
with (foo) {
console.log(values)
}
}
If you call f([1,2,3], obj)
in an ECMAScript 5 environment, then the values
reference inside the with
statement will resolve to obj
. However, ECMAScript 6 introduces a values
property on Array.prototype
(so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the values
reference inside the with
statement will resolve to [1,2,3].values
.
Example: Using with
The following with
statement specifies that the Math
object is the default object. The statements following the with
statement refer to the PI
property and the cos
andsin
methods, without specifying an object. JavaScript assumes the Math
object for these references.
var a, x, y;
var r = 10;
with (Math) {
a = PI * r * r;
x = r * cos(PI);
y = r * sin(PI / 2);
}
2.this 对象
Introduction
A function's this
keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.
In most cases, the value of this
is determined by how a function is called. It can't be set by assignment during execution, and it can be different each time the function is called. ES5 introduced the bind
method to set the value of a function's this
regardless of how it's called.
Global context
In the global execution context (outside of any function), this
refers to the global object, whether in strict mode or not.
console.log(this.document === document);console.log(this === window);
this.a = 37;
console.log(window.a);
Function context
Inside a function, the value of this
depends on how the function is called.
Simple call
function f1(){
return this;
}
f1() === window;
In this case, the value of this
is not set by the call. Since the code is not in strict mode, the value of this
must always be an object so it defaults to the global object.
function f2(){
"use strict"; return this;
}
f2() === undefined;
In strict mode, the value of this
remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. It can also be set to any value, such as null
or 42
or "I am not this"
.
Note: In the second example,
this
should be
undefined
, because
f2
was called without providing any base (e.g.
window.f2()
). This feature wasn't implemented in some browsers when they first started to support
strict mode. As a result, they incorrectly returned the
window
object.
As an object method
When a function is called as a method of an object, its this
is set to the object the method is called on.
In the following example, when o.f()
is invoked, inside the function this
is bound to the o
object.
var o = {
prop: 37,
f: function() {
return this.prop;
}
};
console.log(o.f());
Note that this behavior is not at all affected by how or where the function was defined. In the previous example, we defined the function inline as the f
member during the definition of o
. However, we could have just as easily defined the function first and later attached it to o.f
. Doing so results in the same behavior:
var o = {prop: 37};
function independent() {
return this.prop;
}
o.f = independent;
console.log(o.f());
This demonstrates that it matters only that the function was invoked from the f
member of o
.
Similarly, the this
binding is only affected by the most immediate member reference. In the following example, when we invoke the function, we call it as a method g
of the object o.b
. This time during execution, this
inside the function will refer to o.b
. The fact that the object is itself a member of o
has no consequence; the most immediate reference is all that matters.
o.b = {g: independent, prop: 42};
console.log(o.b.g());
... on the prototype chain
The same notion holds true for methods defined somewhere on the object's prototype chain. If the method is on an object's prototype chain, this
refers to the object the method was called on, as if the method was on the object.
var o = {f:function(){ return this.a + this.b; }};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f());
In this example, the object assigned to the variable p
doesn't have its own f
property, it inherits it from its prototype. But it doesn't matter that the lookup for f
eventually finds a member with that name on o
; the lookup began as a reference to p.f
, so this
inside the function takes the value of the object referred to as p
. That is, since f
is called as a method of p
, its this
refers to p
. This is an interesting feature of JavaScript's prototype inheritance.
... or as a getter or setter
Again, the same notion holds true when a function is invoked from a getter or a setter. A function used as getter or setter has its this
bound to the object from which the property is being set or gotten.
function modulus(){
return Math.sqrt(this.re * this.re + this.im * this.im);
}
var o = {
re: 1,
im: -1,
get phase(){
return Math.atan2(this.im, this.re);
}
};
Object.defineProperty(o, 'modulus', {get: modulus, enumerable:true, configurable:true});
console.log(o.phase, o.modulus);
As a constructor
When a function is used as a constructor (with the new
keyword), its this
is bound to new object being constructed.
Note: while the default for a constructor is to return the object referenced by this
, it can instead return some other object (if the return value isn't an object, then thethis
object is returned).
function C(){
this.a = 37;
}
var o = new C();
console.log(o.a);
function C2(){
this.a = 37;
return {a:38};
}
o = new C2();
console.log(o.a);
In the last example (C2
), because an object was returned during construction, the new object that this
was bound to simply gets discarded. (This essentially makes the statement "this.a = 37;
" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)
call
and apply
Where a function uses the this
keyword in its body, its value can be bound to a particular object in the call using the call
or apply
methods that all functions inherit from Function.prototype
.
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7);add.apply(o, [10, 20]);
The bind
method
ECMAScript 5 introduced Function.prototype.bind
. Calling f.bind(someObject)
creates a new function with the same body and scope as f
, but where this
occurs in the original function, in the new function it is permanently bound to the first argument of bind
, regardless of how the function is being used.
function f(){
return this.a;
}
var g = f.bind({a:"azerty"});
console.log(g());
var o = {a:37, f:f, g:g};
console.log(o.f(), o.g());
As a DOM event handler
When a function is used as an event handler, its this
is set to the element the event fired from (some browsers do not follow this convention for listeners added dynamically with methods other than addEventListener
).
function bluify(e){
console.log(this === e.currentTarget); console.log(this === e.target); this.style.backgroundColor = '#A5D9F3';
}
var elements = document.getElementsByTagName('*');
for(var i=0 ; i<elements.length ; i++){
elements[i].addEventListener('click', bluify, false);
}
In an in–line event handler
When code is called from an in–line handler, its this
is set to the DOM element on which the listener is placed:
<button onclick="alert(this.tagName.toLowerCase());">Show this</button>
The above alert shows button
. Note however that only the outer code has its this
set this way:
<button onclick="alert((function(){return this}}()));">Show inner this</button>
In this case, the inner function's this
isn't set so it returns the global/window object (i.e. the default object in non–strict mode where this
isn't set by the call).