JavaScript__的this与函数

最新推荐文章于 2024-09-03 23:03:56 发布

高达一号

最新推荐文章于 2024-09-03 23:03:56 发布

阅读量559

点赞数

分类专栏： JavaScript语法文章标签： html css javascript

本文链接：https://blog.csdn.net/u010003835/article/details/49736669

版权

JavaScript语法专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript 的this也遵循传递链机制，不懂该机制的同学请参考博文

简单的说就是内层找不到向上查找的机制

但是this 和普通的用var声明的变量所走的是两套体系

如函数

	showThisName = function() 
		{
			alert("xxx2");
			var name = "Haha";
			// 此时的this将引用到脚本所在的窗口
			alert(this.name);
		}

不会把name 当成当前的this，会向上查找。看上层是否有this. 声明的变量

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> new document </title>
</head>
<body>
<input type="button" value="按钮" name="bn"
	οnclick="showThisName();"/>
<script type="text/javascript">
	// 为当前的浏览器窗口的name属性赋值
	window.name = "测试窗口";
	alert("xxx0");
	var showThisName;
	var OuterFunction = function(){
		alert("xxx1");
		this.name = "OuterHaha";
		showThisName = function() 
		{
			alert("xxx2");
			var name = "Haha";
			// 此时的this将引用到脚本所在的窗口
			alert(this.name);
		}
	}
	OuterFunction();
</script>
</body>
</html>

点击按钮会找到外层OuterFunction的name

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> new document </title>
</head>
<body>
<input type="button" value="按钮" name="bn"
	οnclick="showThisName();"/>
<script type="text/javascript">
	// 为当前的浏览器窗口的name属性赋值
	window.name = "测试窗口";
	alert("xxx0");
	var showThisName;
	var OuterFunction = function(){
		alert("xxx1");
		this.name = "OuterHaha";
		showThisName = function() 
		{
			alert("xxx2");
			this.name = "Haha";
			// 此时的this将引用到脚本所在的窗口
			alert(this.name);
		}
	}
	OuterFunction();
</script>
</body>
</html>

点击按钮会找到内层的showThisName的name

可以看到实际this.name会先查找内层是否有定义this.name, 若没有会向上查找

但不会把局部变量 var name,当成this.name

附上一道思考题

六、思考题

如果你能理解下面代码的运行结果，应该就算理解闭包的运行机制了。

Js代码
　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　};
　　　　}
};
alert(object.getNameFunc()());  //The Window

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> new document </title>
</head>
<body>
<script type="text/javascript">
	　　var name = "The Window";   
　　	var object = function(){
		this.name = "My Object";
	  	this.getNameFunc = function(){
		  return function(){
			  return this.name;
		  };
	  }
};
	  var kk = new object();
	  alert(kk.getNameFunc()());  //The Window
	 alert(kk.name);
</script>
</body>
</html>

运行截图

可以看出由于返回的是一个匿名函数，而对于JavaScript 来说函数永远独立，不从属于任何对象，所以打印出来的是

The Window，函数执行的时候是当前的环境而与外层无关故打印的是The window

高达一号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript__的this与函数

JavaScript 的this也遵循传递链机制，不懂该机制的同学请参考博文简单的说就是内层找不到向上查找的机制但是this 和普通的用var声明的变量所走的是两套体系如函数 showThisName = function() { alert("xxx2"); var name = "Haha"; // 此时的this将引用到脚本所在的窗口
复制链接

扫一扫

专栏目录