this,小心!

this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在JS中,由于 javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性让我们有时会给乱了方向,如果掌握了它的工作原理,那么它给我们带来了编程上的 自由和灵活,结合apply(call)方法,可以使JS变得异常强大。

默认的this:
Javascript 下,所有的属性都默认为window对象所有,所以说this也不例外,看下面的例子,先来个热身:

1 var txt = “Hello,Alex!”;
2 function demo(){
3     var txt = “Hi,Alex!”;
4     alert(this.txt);//与window.txt相同
5 }
6 demo();//output  Hello,Alex!

由此可见,demo()执行时,函数里的this 指向全部对象window。接下来,我们换一种方式,以类的方式来调用一下demo,看看this把方向指向何方

1 var AA = new demo();
2 AA();//output undefined

当demo被实例化后,this就指向了当前实例化的对象,所以在demo这个类里虽然有个txt变量,这里txt属于类demo的局部变量,而没有定义指针引用,所以,demo被实例化后,this根本没指向局部变量txt,所以一量引用txt,会被告知未定义(undefined)。

接下来,我们来看看,绑定事件的this又指向何方
html:

1 <input  id=”demo” style=”width:200px; height:50px ;background:#000″ type=”button” value=”demo” />

Javascript:

1 function showMsg(){
2     alert(this.style.width);
3 }
4 window.onload = function(){
5     document.getElementById(“demo”).onclick = showMsg;
6 }

当div被点击: alert(this.style.width) 输出是 200px,可见当前this为onclick引用的对象(document.getElementById(“demo”))

换一下方式,看看this又指向谁?

1 window.onload = function(){
2     document.getElementById(“demo”).onclick = function(){showMsg()};
3 }

这里,当div被点击 alert(this.style.width) 脚本报错this.style.width为空或不是对象,原因:当前this指向function(){}匿名函数,这匿名函数里不存在style.width属性,所以脚本报错。

顺着上面绑定事件的this,说说YUI里的on方式绑定的this指向:

 1 YUI({combine: true}).use(‘io’, ‘until’, function (Y) {
 2     var Demo = {
 3         init : function(){
 4             Y.one(“#demo”).on(“click”,this.showMsg)
 5         },
 6         demo_txt : “hello,tid!”,
 7         showMsg : function(){
 8             alert(this.demo_txt);
 9         }
10     }
11 });
12 Demo.init();

当input 被点击的时候, showMsg是有被执行,可是this.demo_txt 输出的却是undefined,而不是hello,tid!。因为这里的this已不再指向Demo对象,而是指向on绑定的函数的对象了,所以绑定的对象里不存在demo_txt属性。
如果想得到输出为“hello,tid!”,我们得换别一种方式去调用:

1 init : function(){
2     var $this = this;
3     Y.one(“#demo”).on(“click”,function(){$this.showMsg()})
4 }

这样,showMsg的this就指向了Demo对象,这情况,就像我们平时使用AJAX发出请求,请求成功后回调方法里的this一样,在这里就不展开说明了。

apply/call函数里的this:
先简单介绍apply/call这两个方法:
call, apply作用就是借用别人的方法来调用,就像调用自己的一样.从而改变了当前this的指向.
call(this, args1, args2, args3,…)  //参数为个数
apply(this, [args1, args2, args3,…])//参数为数组

下面来看几个简单的例子:

1 function sayMsg(word1,word2){
2     alert(word1 + word2);
3 }
4 function sayMsgToo(word1,word2){
5     sayMsg.call(this,word1,word2);
6     //sayMsg.apply(this,[word1,word2]);
7     //sayMsg.apply(this,arguments);
8 }
9 sayMsgToo(“Hi”,”,Alex!”); //output Hi,Alex!

上述只简单介绍apply/call两方法的调用与区别,下面,我们看看这两个方法如何改变this指向(this引用的传递)

 1 function sayMsg(){
 2     alert(this.word1 + this.word2);
 3 }
 4 function sayMsgToo(word1,word2){
 5     this.word1 = word1;
 6     this.word2 = word2;
 7     sayMsg.call(this);
 8     //sayMsg.apply(this);
 9 }
10 sayMsgToo(“Hi”,”,tid!”) //output Hi,tid!

这里可以看出来sayMsg里的this指向了sayMsgToo,这种方式的运用,可以用于模拟继承,从而实现了代码的重用。

this,小心!,布布扣,bubuko.com

时间: 2024-10-13 02:02:44

this,小心!的相关文章

centos不小心删除/root目录解决办法

在测试的时候不小心把centos的/root用rm -rf给删除了 删除/root目录,系统不会崩溃,也可以正常启动,但就是看着不爽! 解决办法: 1.直接创建/root目录:mkdir /root 2.复制/etc/skel/下的隐藏文件到/root目录下:cp /etc/skel/.bash* /root 3.重启即可 4.生产环境用rm -rf的时候一定要慎重,最好在测试环境先测试确定没有问题再用!!!

bug_ _小心android-support-v4.jar版本混乱造成的NoClassDefFoundError

当你的项目出现以下红色提示的时候,要小心了, 因为很可能因为这个错误而导致解释不通的异常出现. Found 2 versions of android-support-v4.jar in the dependency list,but not all the versions are identical (check is based on SHA-1 only at this time). 这个错误是因为导入的某个jar包版本跟第三方库的jar版本不一致造成的. 最常见的是android-su

2016年小心这6种“没脑子的事”!(深度好文)

序言:许多时候,一个人没能成功,归根结底是败在了思维上! 错误的思维方式如同枷锁,时刻消耗你的精力,成为你前进的阻力:并在关键时刻,给你致命一击,让你与成功越行越远! 尤其有6种思维方式,是一定要小心避开的! 1.仇富思维 VS 爱富思维 从小伴随我们长大的<聊斋>.<水浒传>.<三国演义>,这些故事都潜移默化地告诉我们:当官的往往是“酷吏”,富人往往“为富不仁”.随着成长,我们会不自觉的恨当官的.恨富人,至少不喜欢他们. 但是恨他们,我们就成不了他们!恨他们的时候,我

小心陷阱: 迁移应用到Cluster遇到的Timer问题

最近Customer Site报了一个错误,在Weblogic Cluster HA测试过程中,发生了Traffic集群中有一个节点在重启过程中仍然有请求数据送到该节点的问题.研究了相关的代码,发现了一个非常有趣又普遍的问题. 由于Traffic分发系统没有部署在Weblogic集群中,又需要分发到Weblogic集群中的Traffic节点,系统中使用了自己的load balancing机制. 代码中负责traffic分发的loadbalancer从Cluster当中部署的ClusterWebA

不小心忘记了linux的root密码

很多时候,由于root用户,我们并不常用,所以忘记密码是常有的事,那么我们如何解决呢?我目前知道的有两种开机时进入单用户模式可以直接修改root密码: 方法一: 第一步: 开机时,会进入一个3秒的等待状态,如下图所示 这个时候需要你快速的将鼠标点入屏幕(我用的虚拟机,所以需要手动点入进去),紧接着就会出现下面的状态: 第二步: 这个时候,按e键进入grub编辑状态,会出现如下界面: 第三步: 选择再第二项(kernel内核开头的),按e键进入编辑,进入: 第四步: 在末尾手动添加上 single

iptables 执行清除命令 iptables -F 要非常小心的

http://blog.csdn.net/netingcn/article/details/5692972 使用 /sbin/iptables -F 要小心,搞不好,你就马上同服务器断开连接了 以下是来自 http://wiki.ubuntu.org.cn/IptablesHowTo 上的说明 可以通过/sbin/iptables -F清除所有规则来暂时停止防火墙: (警告:这只适合在没有配置防火墙的环境中,如果已经配置过默认规则为deny的环境,此步骤将使系统的所有网络访问中断) 如果想清空的

创业者谨记:与这五个部门打交道要小心(要知错就改,或积极解释,或示弱,或求被监管,或变通,就是千万别对着干)

创业者谨记:与这五个部门打交道要小心 2015年01月29日11:43  <创业家>杂志     收藏本文 刚出来的消息,淘宝因为抽查一事要投诉国家工商总局,乱了乱了. 1月23日,国家工商总局发布网络交易商品定向监测报告,结果显示淘宝正品率最低,为37.25%.4天后,淘宝发文表示不满,称相关司司长刘红亮“吹黑哨”,有着“神一样的逻辑”.昨日下午,工商局召开新闻发布会,网络商品交易监管司副司长杨洪丰对此作出回应,称委托第三方抽检目的是找问题,而不是为了反应网购领域质量有多差,不能过度解读.

AngularJS最佳实践: 请小心使用 ng-repeat 中的 $index

"有客户投诉,说在删除指定的某条记录时,结果删掉的却是另外一条记录!" 看起来是个很严重的BUG. 有一次我们在工作中碰到了这个问题. 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题. 后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的.下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训. 一个简单动作(action)的列表 先来看看一个完整有效的ng-repeat示例. <ul ng-co

Qt入门之小心read()给你设下的陷阱

最近帮学长写了个Qt Tcpsocket客户端的应用程序,被一个问题困扰了许久.因为以前没有用Qt 写过socket的客户端程序 加上时间比较紧,都没能好好的查看些资料就急忙的写代码,看了一些别人的代码,差不多都是相同的,但是我就出现了收数据 不全的问题.. 最后查出原因是我在接受服务器端的数据时使用了read()这个函数,接收的是个结构体,这里顺便说下怎么在Qt 下收发结构体 发: clientsocket->write((char *)&CardInfo, sizeof(CardInfo