理解 JavaScript 的 this 关键字（代码）

最新推荐文章于 2024-04-13 18:54:41 发布

iceman1952

最新推荐文章于 2024-04-13 18:54:41 发布

阅读量534

点赞数

分类专栏： JavaScript 文章标签： javascript function button constructor properties c

本文链接：https://blog.csdn.net/iceman1952/article/details/6904365

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

里面的代码展示了各种情况下，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>