面向对象的 Javascript(6)
作者:mozart0 来源:蓝色经典 发布时间:2013-07-21 11:57:22
上下文
在JavaScript中,你的代码将总是有着某种形式的上下文(代码在其内部工作的对象)。这也是其它面向对象语言所共有的功能,但它们都不如JavaScript处理得这样极端。
上下文是通过变量this工作。变量this总是引用代码当前所在的那个对象。记住全局对象实际上是window对象的属性。这意味着即使是在全局上下文里,this变量仍然引用一个对象。上下文可以成为一个强大的工具,是面向对象代码不可或缺的一环。程序2-17展示了一些关于上下文的简单例子。
程序2-17. 在上下文中使用函数然后将其上下文切换到另一个变量的例子
var obj = {
yes: function(){
// this == obj
this.val = true;
},
no: function(){
this.val = false;
}
};
//我们看到,obj对象没有"val"的属性
alert( obj.val == null );
//我们运行yes函数,它将改变附着在obj对象的val属性
obj.yes();
alert( obj.val == true );
//然而,我们现在让window.no指向obj.no方法,并运行之
window.no = obj.no;
window.no();
//这导致obj对象保持不变(上下文则切换到了window对象),
alert( obj.val == true );
//而window的val属性被更新
alert( window.val == false );
你可能已经注意到,在程序2-17中,当我们切换obj.no方法的上下文到变量window时,笨重的代码需要切换函数的上下文。幸运的是,JavaScript提供了两种方法使这一过程变得更加易于理解和实现。程序2-18展示了恰能些目的的两种不同方法,call和apply。
程序2-18. 改变函数上下文的示例
//一个简单的设置其上下文的颜色风格的函数
function changeColor( color ) {
this.style.color = color;
}
//在window对象上调用这个函数将会出错,因为window没有style对象
changeColor( "white" );
//得到一个id为"main"的对象
var main = document.getElementById("main");
//用call方法改变它的颜色为黑
//call方法将第一个参数设置为上下文,
//并其它所有参数传递给函数
changeColor.call( main, "black" );
//一个设置body元素的颜色的函数
function setBodyColor() {
//apply方法设置上下文为body元素
//第一个参数为设置的上下文,
//第二个参数是一个被作为参数传递给函数的数组
// of arguments that gets passed to the function
changeColor.apply( document.body, arguments );
}
//设置body元素的颜色为黑
setBodyColor( "black" );
上下文的有用性此处可能还没有立即显现。当我们进入下一节"面向对象的JavaScript"时,它会变得更加明显。


猜你喜欢
- 用户输入1、使用input来等待用户输入。如 username = input('username:') password
- 写在之前这几天的阅读量蜜汁低,是什么原因我也没搞清楚,如果你们觉得我哪里写的有问题,或者是哪里不好,欢迎后台或者微信告知我,先行谢过。昨天的
- 我们在前面已经分别介绍了如何在spring Boot中使用JPA以及如何在Spring Boot中输出REST资源。那么关于数据库访问还有一
- 本文实例讲述了Python实现判断并移除列表指定位置元素的方法。分享给大家供大家参考,具体如下:问题很简单,输入一个列表和索引,若索引超出列
- JavaScript toLowerCase 方法toLowerCase 方法用于把(英文)字符串转换为小写,并返回转换后的字符串。其语法如
- 支持lrc歌词,IE only 代码未加密且有详细注释,希望对做音乐页面的朋友有帮助。 如果大家还有什么好多播放器,告诉我,我好参
- 网页兼容测试,除了做不同浏览器的兼容测试,还要观察网页在不同分辨率下的表现情况。在页面中使用了CSS绝对定位,发现在宽屏下错位。随后测试非1
- vue3 reactive函数用法reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新。不同
- 1.package.json作用:package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息。比如项目名称,项目版本,
- 前言最近天气好像有了点小脾气,总是在万分晴朗得时候耍点小性子~阴会天,下上一会的雨~提醒我们时刻记得带伞哦,不然会被雨淋或者被太阳公公晒到
- Elasticsearch 是一个分布式的开源搜索和分析引擎,适用于所有类型的数据,包括文本、数字、地理空间、结构化和非结构化数据。Elas
- javascript cookie的基本操作(添加和删除)1.添加一个cookie:response.addCookie(Cookie c)
- 这回我们看看如何实现判断两个对像的内容是否相等。这里有一个克隆结果原则是针对Java语言的,当然JavaScript也可以胜任。克隆满足的条
- Hihi, 大家好~ 最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小,但是却是前端开发中的基本,因为目前的网页,还是以文字信息
- 桥接模式(Bridge Pattern)是什么桥接模式是一种结构型模式,它将抽象部分与实现部分分离开来,使它们可以独立地变化。在桥接模式中,
- 简介Github:https://github.com/spf13/cobraStar:26.5KCobra是一个用Go语言实现的命令行工具
- 现在很流行springboot的开发,小编闲来无事也学了学,开发过程中遇见了log4j日志的一个小小问题,特此记载。首先在pox.xml中引
- 编程一直是在课余时间,放假时间自学,到现在为止也有半年了。这是我自己用python实现的连连看,也是第一个完成的游戏,虽然极其简陋。思路呢,
- Python矩阵的基本用法mat()函数将目标数据的类型转化成矩阵(matrix)1,mat()函数和array()函数的区别Numpy函数
- 先以一个大牛的一段关于Python Metapgramming的著名的话来做开头:Metaclasses are deeper magic