理解 JavaScript 的 this 关键字
2012-08-19 14:21
369 查看
/article/2722335.html
贴此图,作为
[译]理解Javascript关键字this 的注解,此图也参考了 [b]11.2.3
Function Calls[/b]
Let ref be the result of evaluating MemberExpression.
Let func be GetValue(ref).
Let argList be the result of evaluating Arguments, producing an internal list of argument values (see 11.2.4).
If Type(func) is not Object, throw a TypeError exception.
If IsCallable(func) is false, throw a TypeError exception.
If Type(ref) is Reference,
then
If IsPropertyReference(ref) is true, then
Let thisValue be GetBase(ref).
Else, the base of ref is an Environment Record
Let thisValue be the result of calling the ImplicitThisValue concrete method of GetBase(ref).
Else, Type(ref) is not Reference.
Let thisValue be undefined.
Return the result of calling the [[Call]] internal method on func, providing thisValue as the this value and providing
the list argList as the argument values.
The production CallExpression : CallExpression Arguments is evaluated in exactly the same manner, except that the containedCallExpression is
evaluated in step 1.
NOTE The returned result will never be of type Reference if func is
a native ECMAScript object. Whether calling a host object can return a value of type Reference is implementation-dependent. If a value of type Reference is
returned, it must be a non-strict PropertyReference.
<html>
<head>
<script type="text/javascript">
function callAsProperty(){
var a = {
b: function(){
alert(this);
utilityDisplay(this);
return this;
}
}
a.b();//b's this-->a
a['b']();//b's this-->a
var c = {};
c.d = a.b;
c.d();//b's this-->c
var foo = a.b;
foo(); //b's this-->window. Call as variable
}
function callAsVariable1(){
var a = {
b: function() {
alert(this);
utilityDisplay(this);
return this;
}
};
var foo = a.b;
a.b();//b's this-->a
foo(); //b's this-->window
var x = {
y: function() {
alert("Outer this: " + this);
alert(this);
utilityDisplay(this);
var outerThis = this;
var z = function() {
alert(outerThis == this);
alert(outerThis === this);
alert("Inner this: " + this);
alert(this);
utilityDisplay(this);
return this;
};
return z();
}
};
var marvinVar = x.y;
x.y(); //y's this-->x; z's this-->window
marvinVar();//y's this-->window; z's this-->window
}
function callAsVariable2(){
var a = {
b: function() {
alert("Outer this: " + this);
alert(this);
utilityDisplay(this);
var outerThis = this;
return ( function() {
alert(outerThis == this);
alert(outerThis === this);
alert("Inner this: " + this);
alert(this);
utilityDisplay(this);
return this;
}
)();
}
};
var marvinVar = a.b;
a.b(); //b's this-->a; anonymous's this-->window
marvinVar();//b's this-->window; anonymous's this-->window
}
function callByCallAndApply(){
var a = {
b: function() {
alert(this);
utilityDisplay(this);
return this;
}
};
var d = {};
a.b.call(d); //d
a.b.apply(d); //d
}
function callConstructorWithNew(){
var A = function() {
alert("Before");
alert(this);
utilityDisplay(this);
this.marvinNewFunc = function(){return "I'm an A";};
alert("After");
alert(this);
utilityDisplay(this);
};
var aInstance = new A();//A's this-->a newly created object
var callMarvinResult = aInstance.marvinNewFunc();
alert(callMarvinResult);
}
function utilityDisplay(myVar){
var cnt = 0;
for(var tmp in myVar){
cnt++;
}
alert("Its properties count: " + cnt);
if(cnt <= 5){
for(var tmp in myVar){
try {
alert(tmp + "-->:" + myVar[tmp]);
}catch ( ieError ) {
alert(tmp + "-->: Get an error, hoho...");
}
}
}
}
</script>
</head>
<body>
<form>
<input type="button" id="invokeAProperty" value="Invoke a property" onclick="callAsProperty();"/><br/>
<input type="button" id="invokeAVariable1" value="Invoke a variable 1" onclick="callAsVariable1();"><br/>
<input type="button" id="invokeAVariable2" value="Invoke a variable 2" onclick="callAsVariable2();"><br/>
<input type="button" id="invokeByCallAndApply" value="Invoke by call and apply" onclick="callByCallAndApply();"><br/>
<input type="button" id="invokeConstructorWithNew" value="Invoke by constructor new" onclick="callConstructorWithNew();">
</form>
</body>
</html>
贴此图,作为
[译]理解Javascript关键字this 的注解,此图也参考了 [b]11.2.3
Function Calls[/b]
11.2.3 Function Calls # Ⓣ
The production CallExpression : MemberExpression Arguments is evaluated as follows:Let ref be the result of evaluating MemberExpression.
Let func be GetValue(ref).
Let argList be the result of evaluating Arguments, producing an internal list of argument values (see 11.2.4).
If Type(func) is not Object, throw a TypeError exception.
If IsCallable(func) is false, throw a TypeError exception.
If Type(ref) is Reference,
then
If IsPropertyReference(ref) is true, then
Let thisValue be GetBase(ref).
Else, the base of ref is an Environment Record
Let thisValue be the result of calling the ImplicitThisValue concrete method of GetBase(ref).
Else, Type(ref) is not Reference.
Let thisValue be undefined.
Return the result of calling the [[Call]] internal method on func, providing thisValue as the this value and providing
the list argList as the argument values.
The production CallExpression : CallExpression Arguments is evaluated in exactly the same manner, except that the containedCallExpression is
evaluated in step 1.
NOTE The returned result will never be of type Reference if func is
a native ECMAScript object. Whether calling a host object can return a value of type Reference is implementation-dependent. If a value of type Reference is
returned, it must be a non-strict PropertyReference.
<html>
<head>
<script type="text/javascript">
function callAsProperty(){
var a = {
b: function(){
alert(this);
utilityDisplay(this);
return this;
}
}
a.b();//b's this-->a
a['b']();//b's this-->a
var c = {};
c.d = a.b;
c.d();//b's this-->c
var foo = a.b;
foo(); //b's this-->window. Call as variable
}
function callAsVariable1(){
var a = {
b: function() {
alert(this);
utilityDisplay(this);
return this;
}
};
var foo = a.b;
a.b();//b's this-->a
foo(); //b's this-->window
var x = {
y: function() {
alert("Outer this: " + this);
alert(this);
utilityDisplay(this);
var outerThis = this;
var z = function() {
alert(outerThis == this);
alert(outerThis === this);
alert("Inner this: " + this);
alert(this);
utilityDisplay(this);
return this;
};
return z();
}
};
var marvinVar = x.y;
x.y(); //y's this-->x; z's this-->window
marvinVar();//y's this-->window; z's this-->window
}
function callAsVariable2(){
var a = {
b: function() {
alert("Outer this: " + this);
alert(this);
utilityDisplay(this);
var outerThis = this;
return ( function() {
alert(outerThis == this);
alert(outerThis === this);
alert("Inner this: " + this);
alert(this);
utilityDisplay(this);
return this;
}
)();
}
};
var marvinVar = a.b;
a.b(); //b's this-->a; anonymous's this-->window
marvinVar();//b's this-->window; anonymous's this-->window
}
function callByCallAndApply(){
var a = {
b: function() {
alert(this);
utilityDisplay(this);
return this;
}
};
var d = {};
a.b.call(d); //d
a.b.apply(d); //d
}
function callConstructorWithNew(){
var A = function() {
alert("Before");
alert(this);
utilityDisplay(this);
this.marvinNewFunc = function(){return "I'm an A";};
alert("After");
alert(this);
utilityDisplay(this);
};
var aInstance = new A();//A's this-->a newly created object
var callMarvinResult = aInstance.marvinNewFunc();
alert(callMarvinResult);
}
function utilityDisplay(myVar){
var cnt = 0;
for(var tmp in myVar){
cnt++;
}
alert("Its properties count: " + cnt);
if(cnt <= 5){
for(var tmp in myVar){
try {
alert(tmp + "-->:" + myVar[tmp]);
}catch ( ieError ) {
alert(tmp + "-->: Get an error, hoho...");
}
}
}
}
</script>
</head>
<body>
<form>
<input type="button" id="invokeAProperty" value="Invoke a property" onclick="callAsProperty();"/><br/>
<input type="button" id="invokeAVariable1" value="Invoke a variable 1" onclick="callAsVariable1();"><br/>
<input type="button" id="invokeAVariable2" value="Invoke a variable 2" onclick="callAsVariable2();"><br/>
<input type="button" id="invokeByCallAndApply" value="Invoke by call and apply" onclick="callByCallAndApply();"><br/>
<input type="button" id="invokeConstructorWithNew" value="Invoke by constructor new" onclick="callConstructorWithNew();">
</form>
</body>
</html>
相关文章推荐
- 深入理解Javascript之this关键字
- Laruence谈:深入理解Javascript之this关键字
- 深入理解javascript关键字this
- Javascript之this关键字的深入理解
- 深入理解Javascript之this关键字
- 深入理解Javascript之this关键字
- 理解 JavaScript 的 this 关键字(代码)
- JavaScript中嵌套函数的this关键字的理解
- 深入理解Javascript之this关键字
- 深入理解Javascript之this关键字
- javascript中的关键字this理解
- 深入理解Javascript之this关键字
- 理解 JavaScript 的 this 关键字
- [置顶] [译文]深入理解JavaScript的this关键字(一)
- javascript--理解Javascript之this关键字
- JavaScript this 关键字 理解要领
- 深入理解Javascript箭头函数中的this
- JavaScript 中的 this 关键字
- 在javascript中对于this指向的再次理解
- JavaScript 中的this 关键字