最新
文章专题
视频专题
问答1
问答10
问答100
问答1000
问答2000
关键字专题1
关键字专题50
关键字专题500
关键字专题1500
TAG最新
视频文章
推荐1
推荐3
推荐5
推荐7
推荐9
推荐11
推荐13
推荐15
推荐17
推荐19
推荐21
推荐23
推荐25
推荐27
推荐29
推荐31
推荐33
推荐35
推荐37
视频文章20
视频文章30
视频文章40
视频文章50
视频文章60
视频文章70
视频文章80
视频文章90
视频文章100
视频文章120
视频文章140
视频2
关键字专题
关键字专题
tag2
tag3
文章专题
文章专题2
文章索引1
文章索引2
文章索引3
文章索引4
文章索引5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
文章专题3
科技
教育
生活
旅游
时尚
美容
美食
健康
体育
游戏
汽车
元宇宙
家电
财经
百科
科技
首页
业界
互联网
手机
AI
VR
电商
苹果
安卓
6G
5G
数码
测评
学院
鸿蒙
软件
电脑
知识百科
专题
点击下载
本文文档
当前位置：
首页
-
科技
-
知识百科
-
正文
JavaScript中级笔记第三章_javascript技巧
来源：动视网
责编：小采
时间：2020-11-27 20:44:18
JavaScript中级笔记第三章_javascript技巧
JavaScript中级笔记第三章_javascript技巧:3，作用域 所有的面向对象的语言都有某种形式的作用域，JavaScript也不例外。在JavaScript里，作用域是由函数划分的，而不是由块（while，if之类的）来划分的。 我们先来看一个简单的作用域的例子。 var foo = a; //设置全局变量foo if(t
推荐度：
点击下载本文
文档为doc格式
导读
JavaScript中级笔记第三章_javascript技巧:3，作用域 所有的面向对象的语言都有某种形式的作用域，JavaScript也不例外。在JavaScript里，作用域是由函数划分的，而不是由块（while，if之类的）来划分的。 我们先来看一个简单的作用域的例子。 var foo = a; //设置全局变量foo if(t
3，作用域
所有的面向对象的语言都有某种形式的作用域，JavaScript也不例外。在JavaScript里，作用域是由函数划分的，而不是由块（while，if之类的）来划分的。
我们先来看一个简单的作用域的例子。
</pre>输出结果是“b“。 <BR>基于浏览器的JavaScript语言有一门有趣的特性是，所有属于全局作用域的变量都是window对象的属性。 <BR>看下面代码： <BR><TEXTAREA id="runcode83235"> var foo = "a"; //设置全局变量foo if(true){ var foo = "b";//在if块中，把foo的值改为b，注意：此时还在全局作用域中 } alert(foo); alert("window的属性："+window.foo); alert(window.foo == foo);//true，证明全局变量和window属性一致 </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
我们再上例的基础上，再添加一个函数来修改foo的值，代码如下：
</pre>输出的foo还是"b" alert("函数外部的值为："+foo); //代码② </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
结果也许有点另你意外，不过结果肯定是正确的。代码②的结果是输出 "b"，而不是"c"。原因就是作用域有关，虽然调用change()来改变foo的值，但是此时的改变只
在函数作用域内起作用，并不会改变全局作用域内的foo的值。
如果想在change()函数内修改全局的foo的值，我们可以去掉变量的声明，例如：
</pre>输出"c" 。 <BR>4，上下文对象 <BR>在JavaScript中，代码总是有一个上下文对象，代码处于该对象之内。上下文对象是通过this变量来体现的。这个变量永远指向当前代码所处的对象中。 <BR>全局对象其实是window对象的属性。 <BR>接下来，我们看一个上下文对象的例子。 <BR><TEXTAREA id="runcode27420"> //定义一个对象 var obj = { show : function(){ this.display = "show"; } , hide : function(){ this.display = "hide"; } } alert(obj.display);//此时为undefined obj.show();//执行show函数后，将display属性跟obj对象联系起来了 alert(obj.display);//"show" </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
再此基础上，我们再看一个例子：
//定义一个对象 var obj = { show : function(){ this.display = "show"; } , hide : function(){ this.display = "hide"; } } alert(obj.display);//此时为undefined obj.show(); //执行show函数后，将display属性跟obj对象联系起来了 alert(obj.display);//"show" window.hide = obj.hide;//把window.hide指向obj.hide window.hide();//执行。hide的上下文对象是window对象了，所以this将指向window对象 alert(obj.display);//"show"。obj对象的display属性值不变，因为hide的上下文已经改变为window对象了 alert(window.display);//"hide"。 window对象的display属性被更新了 </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
本例中，我们把obj.hide变量的上下文对象变为window对象时，代码写得并不好理解。幸运的是，JavaScript提供了一套更好的方法来解决。
现在我们有请call和apply两位先生上场，通过它们也可以完成同样的功能。先看call：
//定义一个对象 var obj = { show : function(){ this.display = "show"; } , hide : function(){ this.display = "hide"; } } alert(obj.display);//此时为undefined obj.show(); //执行show函数后，将display属性跟obj对象联系起来了 alert(obj.display);//"show" //window.hide = obj.hide;//把window.hide指向obj.hide //window.hide();//执行。hide的上下文对象是window对象了，所以this将指向window对象 obj.hide.call( window ); alert(obj.display);//"show"。obj对象的display属性值不变，因为hide的上下文已经改变为window对象了 alert(window.display);//"hide"。 window对象的display属性被更新了 </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
通过obj.hide.call(window)，我们将此时的上下文对象改为window对象。call方法的第一个参数就是上下文对象。
call方法也可以传递更多的参数，如下所示：
//定义一个对象 var obj = { show : function(){ this.display = "show"; } , hide : function(msg1,msg2){ this.display = msg1+" , "+msg2; } } alert(obj.display);//此时为undefined obj.show(); //执行show函数后，将display属性跟obj对象联系起来了 alert(obj.display);//"show" //window.hide = obj.hide;//把window.hide指向obj.hide //window.hide();//执行。hide的上下文对象是window对象了，所以this将指向window对象 obj.hide.call( window , "a" , "b" ); //传递3个参数，第一个是上下文对象，后面的是函数的参数 alert(obj.display);//"show"。obj对象的display属性值不变，因为hide的上下文已经改变为window对象了 alert(window.display);//"hide"。 window对象的display属性被更新了 </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
另外apply方法跟call类型，它的第一个参数也是上下文对象，不过后面的参数则是一个数组。如下所示：
//定义一个对象 var obj = { show : function(){ this.display = "show"; } , hide : function(msg1,msg2){ this.display = msg1+" , "+msg2; } } alert(obj.display);//此时为undefined obj.show(); //执行show函数后，将display属性跟obj对象联系起来了 alert(obj.display);//"show" //window.hide = obj.hide;//把window.hide指向obj.hide //window.hide();//执行。hide的上下文对象是window对象了，所以this将指向window对象 obj.hide.apply( window , ["a","b"] ); //后面的参数为数组 alert(obj.display);//"show"。obj对象的display属性值不变，因为hide的上下文已经改变为window对象了 alert(window.display);//"hide"。 window对象的display属性被更新了 </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最后我们来看一个通过上下文，call和apply结合的例子。
<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> function changeColor(color){ this.style.color = color; } function setBodyColor(){ changeColor.apply( document.body , ["blue"]); } window.onload = function(){ //changeColor("red");//在window对象中调用此函数会失败，因为window对象没有style属性 var div = document.getElementById("abc"); changeColor.call(div , "red");//把上下文改为div。从而this指向的是 id为abc的元素 //changeColor.apply(div , ["red"]);//把上下文改为div。从而this指向的是 id为abc的元素 setBodyColor(); } </ script> </head> <body> CssRain TestTest </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在setBodyColor函数中，apply的第二个参数是数组，而前面我们讲过，arguments 也是一个伪数组，那么它们2个能联系起来吗？
把 changeColor.apply( document.body , ["blue"]); 改为 changeColor.apply( document.body , arguments );，
然后给setBodyColor();函数传参数。如下代码所示：
<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> function changeColor(color){ this.style.color = color; } function setBodyColor(){ changeColor.apply( document.body , arguments); } window.onload = function(){ //changeColor("red");//在window对象中调用此函数会失败，因为window对象没有style属性 var div = document.getElementById("abc"); changeColor.call(div , "red");//把上下文改为div。从而this指向的是 id为abc的元素 //changeColor.apply(div , ["red"]);//把上下文改为div。从而this指向的是 id为abc的元素 setBodyColor("blue"); } </ script> </head> <body> CssRain TestTest </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
通过这些例子，你也许对上下文的概念比较熟悉了。上下文在面向对象的编程中非常重要。
JavaScript中级笔记第三章_javascript技巧
JavaScript中级笔记第三章_javascript技巧:3，作用域 所有的面向对象的语言都有某种形式的作用域，JavaScript也不例外。在JavaScript里，作用域是由函数划分的，而不是由块（while，if之类的）来划分的。 我们先来看一个简单的作用域的例子。 var foo = a; //设置全局变量foo if(t
推荐度：
点击下载本文
文档为doc格式
标签：
js
笔记
第三
热门焦点
最新推荐
猜你喜欢
热门推荐
专题
Top
