先从一个例子说起

var sound = 'Roar';
function myOrneryBeast()
{
this.style.color='green';//window 方法被调用时所属的对象
alert(sound);
}
// this 的环境可以随着函数被赋值给不同的对象而改变
function initPage()
{
var example=ADS.$('example');
//使用事件属性方法
example.onlick=myOrneryBeast;
//或者使用ADS.addEvent方法
ADS.addEvent(example,'mouseover',myOrneryBeast);
}
ADS.addEvent(window,'load',initPage);

通过call()和apply()重新定义执行环境,同样我们通过一个例子看一下

function doubleCheck()
{
this.message='Are you sure you want to leave?';
} doubleCheck.prototype.sayGoodbye=function()
{
return confirm(this.message)
}
initPage()
{
var clickedLink=new doubleCheck();
var links=document.getElementsByTagName('a');
for (var i = 0;i<links.length ;i++ )
{
ADS.addEvent(links[i],'click',clickedLink.sayGoodbye);
}
}
//这部分我一开始也没看懂,不前面的this 又看了一边,才稍微有点想明白。
//当sayGoodbye方法在<a>这个HTML中执行时,this所引用的就是这个HTML元素,而不是期望的clickedLink对象
ADS.addEvent(window,'load',initPage)

解决办法:用function对象的call() 或者apply()
让方法thisy引用window对象的情况下可以clickedLink.sayGoodbye.call(window);或者clickedLink.sayGoodbye.apply(window);

对于call而言,每个参数都应该位于对象之后比如:

functionReference.call(object,argument1,argument2,....);

对于apply(),则应该将方法参数作为一个数组放在第二个参数位置上传递:

functionReference.apply(object,arguments)//这是call和apply的唯一区别

//下面函数主要是为了给原始函数(有func参数传递)创建一个新的环境。之后虽然原始函数仍然接受同样的参数,但是他却有了不同的环境
//(菜鸟通过实力图,理解稍微好一点。仅仅是稍微)
function bindFunction(obj,func)
{
return function ()
{
func.apply(obj,arguments);
}
}

将此例用在刚刚的doubleCheck()方法中

function doubleCheck()
{
this.message='Are you sure you want to leave?'; }
douleCheck.prototy.sayGoodbye=function()
{
return confirm(this.message);
}
initPage()
{
var clickLink=new doubleCheck();
var links=document.getElementsByTagName('a'); for (var i = 0;i<links.length ;i++ )
{
//已经将刚刚的方法加入ADS库中
ADS.addEvent(links[i],'click',ADS.bindFunction(clickedLink,clickedLink.sayGoodby));
}
}

本节就记录到这儿了,菜鸟接下来还要继续学习js的关于try{}catch{}的相关只是。

JavaScript DOM高级程序设计2.3 this--我要坚持到底!的更多相关文章

  1. JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底!

    由一个HTML进行说明,我就不敲了,直接copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  2. JavaScript DOM高级程序设计 2.4-try{}catch{}--我要坚持到底!

    先看一段有异常的语句 var sound = 'Roar!'; function myOrneryBeast() { this.style.color='green';//window没有style属 ...

  3. JavaScript DOM高级程序设计 7.向应用程序加入Ajax--我要坚持到底!

    有时候,或许是因为理解能力,也或许是因为浮躁,看东西总是不入心,而且还老是想跳过本节,或者赶紧看完本节,这样的恶性循环,让我在即没有真正的学习到知识,又打击我的学习信心,还浪费了我很多事件,我想,当遇 ...

  4. JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!

    一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...

  5. JavaScript DOM高级程序设计 3.6 实例 将HTML代码转换成DOM代码(附源码)--我要坚持到底!

    作为一名Web开发者,最讨厌的事情就是重复性任务,摆脱乏味的日常重复性事物的一种方法,是借助可重用的对象或者说与你现在建立的ADS库类似的库,另外一种让事情变得有意思,且能够加速开发进程的方式是编写能 ...

  6. JavaScript DOM 高级程序设计读书笔记二

    响应用户操作和事件 事件就是操作检测与脚本执行的组合,或者基于检测到的操作类型在某个对象上调用事件侦听器(事件处理程序). 事件的类型 事件可以分为几种类型:对象事件,鼠标事件,键盘事件(只适用于do ...

  7. JavaScript DOM 高级程序设计读书笔记一

    创建可重用的对象 简而言之,对象就是包含一组变量(称为属性)和函数(称为方法)的集合的实例.对象通常由类派生而来,而类中定义了对象拥有的属性和方法.如果你的脚本中都是对象之间的交互操作,那么就可以称之 ...

  8. JavaScript DOM高级程序设计 5动态修改样式和层叠样式表2--我要坚持到底!

    把样式置于DOM脚本之外 style属性 我们可以这样设置前景色之类的属性: element.style.color='red'; 也可以使用下面的代码设置背景颜色: element.style.ba ...

  9. JavaScript DOM高级程序设计 5动态修改样式和层叠样式表1(源代码)--我要坚持到底!

    W3C DOM2样式规范 现在这边贴出本章要的源代码,注意要结合前面用到的ADS库http://vdisk.weibo.com/s/Dq8NU CSSStyleSheet对象属性: type :始终是 ...

  10. JavaScript DOM高级程序设计2.1创建可重用的对象--我要坚持到底!

    1.对象中包含什么 在javascript中,从函数到字符串实际上都是对象 继承 //创建一个person对象的实例 var penson={}; person.getName=function(){ ...

随机推荐

  1. L011-oldboy-mysql-dba-lesson11

    L011-oldboy-mysql-dba-lesson11 [root@ab01 ~]# mysqladmin -i 1 -r status     #mysqladmin监控的命令 Uptime: ...

  2. 真正的inotify+rsync实时同步 彻底告别同步慢

    真正的inotify+rsync实时同步 彻底告别同步慢       http://www.ttlsa.com/web/let-infotify-rsync-fast/     背景 我们公司在用in ...

  3. Hibernate的单向OneToMany、单向ManyToOne

    单向OneToMany 一个用户有多张照片,User----->Images是一对多关系,在数据库中Images维护一个外键useid 1.在映射关系的主控方Image这边,我们什么都不做.(为 ...

  4. Cassandra1.2文档学习(16)—— 模式的变化

    参考文档:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/dml/dml_schema ...

  5. Oracle访问数据的存取方法

    1) 全表扫描(Full Table Scans, FTS) 为实现全表扫描,Oracle读取表中所有的行,并检查每一行是否满足语句的WHERE限制条件.Oracle顺序地读取分配给表的每个数据块,直 ...

  6. hive-site.xml 参数设置

    <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="confi ...

  7. python学习笔记21(正则表达式)

    正则表达式模式: 模式 描述 ^ 匹配的开始的 $ 匹配行尾 . 匹配除换行符的任何单个字符.使用-m选项允许其匹配换行符也是如此. [...] 匹配括号内任何单个字符 [^...] 匹配非单个字符集 ...

  8. ExtJs 4.2.1 点击按钮弹出表单的窗口

    初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...

  9. SQL 去除重复、获取最新记录

    应用中常会有需要去除重复的记录,或者获取某些最新记录(如:每个用户可以答题多次,每次答题时间不同,现在要获取所有用户的最新答题记录,即每个用户取最新的一条) 使用group 和max 即可实现上述功能 ...

  10. C#学习笔记(二)

    1.注释:注销,解释2.单行://多行:/**/文档注释:///按enter主食要保证 别人一看就明白3.快速对期待吗:ctrl+k+d,按住ctrl不放,按k,迅速抬起,再按d(按D得时候k已经抬起 ...