javascript中的this的知识点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript中的this的知识点</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" />
<link rel="stylesheet" type="text/css" href="../css/mark.css" />
<link rel="stylesheet" type="text/css" href="../css/input2.css" />
<link rel="stylesheet" type="text/css" href="../css/console.css" />
</head>
<body>
<h1>javascript中的this的知识点</h1>
<input type="text" id="input1" onclick="fn1();" />
<br /><br />
<input type="button" id="button1" value="测试this(案例1)" />
<br /><br />
<input type="button" id="button2" value="测试this(案例2)" onclick="fn3();" />
<br /><br />
<input type="button" id="button3" value="测试this(案例3)" onclick="window.fn4();" />
<br /><br />
<input type="button" id="button4" value="测试this(案例4)" onclick="console.log(this);" />
<br /><br />
<input type="button" id="button5" value="测试this(案例5)" onclick="fn5(this);" />
<br /><br />
<input type="button" id="button6" value="测试this(案例6)"/>
<br /><br />
<input type="button" id="button7" value="测试this(案例7)"/>
<br /><br />
<input type="button" id="button8" value="测试this(案例8)"/>
<br /><br />
<input type="button" id="button9" value="测试this(案例9)"/>
<br /><br />
</body>
<script type="text/javascript">
//
	function fn1() {
		console.log('=================');
// 		alert(this); //Window
		console.log(this); //Window
		console.log('=================');
		document.getElementById('input1').value = this;
	}

//
	function fn2() {
		console.log('************');
		console.log(this); //Window
		console.log('************');
	}
	
	//fn2()和window.fn2()两者效果一样
	fn2();
	window.fn2();

	
	//
	document.getElementById('button1').onclick = function() {
	//<input type="button" id="button1" value="测试this(案例1)">
		console.log(this);
	//测试this(案例1)
		console.log(this.value);
	};
	
	//
	function fn3() {
		console.log(this); //Window
	}
	
	//
	function fn4() {
		console.log(this); //Window
	}
	
	//
	function fn5(parameter) {
//<input type="button" id="button5" value="测试this(案例5)" onclick="fn5(this);">
		console.log(parameter);
	}
	
	//
	document.getElementById('button6').onclick = function fn6() {
	//<input type="button" id="button6" value="测试this(案例6)">
			console.log(this);
	//测试this(案例6)
			console.log(this.value);
		};
	
	//
	document.getElementById('button7').value = '江西赣州于都县';
	
	//
	document.getElementById('button8').value = function() {
		console.log('哈哈哈', this);
	};
	
	//this指的是Window
	document.getElementById('button9').value = this;
	
	//this还是Window
	console.log('此时this是谁？', this);
	
	var hometown = '江西省赣州市于都县XX大道666号';
	
	//hometown和window.hometown和this.hometown三者效果一样
	console.log('籍贯:', hometown, '**********');
	console.log('籍贯:', window.hometown, '==========');
	console.log('籍贯:', this.hometown, '----------');
	
	//true
	console.log(window == this);
	
	//true
	console.log(window === this);
	
	//
	var obj = {"name" : "令狐冲", "age" : "17", "girlfriend" : "任盈盈"};
	
	//令狐冲 17 任盈盈
	console.log(obj.name, obj.age, obj.girlfriend);
	//令狐冲 17 任盈盈
	console.log(obj['name'], obj['age'], obj['girlfriend']);
	//令狐冲 17 任盈盈
	console.log(obj["name"], obj["age"], obj["girlfriend"]);
	
</script>
</html>
javascript中的this的知识点

猜你喜欢
