里面的代码展示了各种情况下,this应该是什么值
<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" οnclick="callAsProperty();"/><br/>
<input type="button" id="invokeAVariable1" value="Invoke a variable 1" οnclick="callAsVariable1();"><br/>
<input type="button" id="invokeAVariable2" value="Invoke a variable 2" οnclick="callAsVariable2();"><br/>
<input type="button" id="invokeByCallAndApply" value="Invoke by call and apply" οnclick="callByCallAndApply();"><br/>
<input type="button" id="invokeConstructorWithNew" value="Invoke by constructor new" οnclick="callConstructorWithNew();">
</form>
</body>
</html>