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

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

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

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

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

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

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

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

Javascript:

 function showMsg(){
alert(this.style.width);
}
window.onload = function(){
document.getElementById(“demo”).onclick = showMsg;
}

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

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

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

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

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

 YUI({combine: true}).use(‘io’, ‘until’, function (Y) {
var Demo = {
init : function(){
Y.one(“#demo”).on(“click”,this.showMsg)
},
demo_txt : “hello,tid!”,
showMsg : function(){
alert(this.demo_txt);
}
}
});
Demo.init();

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

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

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

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

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

 function sayMsg(word1,word2){
alert(word1 + word2);
}
function sayMsgToo(word1,word2){
sayMsg.call(this,word1,word2);
//sayMsg.apply(this,[word1,word2]);
//sayMsg.apply(this,arguments);
}
sayMsgToo(“Hi”,”,Alex!”); //output Hi,Alex!

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

 function sayMsg(){
alert(this.word1 + this.word2);
}
function sayMsgToo(word1,word2){
this.word1 = word1;
this.word2 = word2;
sayMsg.call(this);
//sayMsg.apply(this);
}
sayMsgToo(“Hi”,”,tid!”) //output Hi,tid!

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

this,小心!的更多相关文章

  1. 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑

    阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...

  2. Qt 中使用Singleton模式需小心

    在qt中,使用Singleton模式时一定要小心.因为Singleton模式中使用的是静态对象,静态对象是直到程序结束才被释放的,然而,一旦把该静态对象纳入了Qt的父子对象体系,就会导致不明确的行为. ...

  3. “如何稀释scroll事件”的思考(不小心写了个异步do...while)

    看了下园友的一帖子:http://www.cnblogs.com/xzhang/p/4145697.html#commentform 本来以为是很简单的问题,但仔细想想还挺有意思的.简单的说就是增加事 ...

  4. linux中不小心将rpm命令卸载了,怎么恢复?

    今天在搭建mysql的集群服务时,安装mysql集群服务前,先卸载原来mysql的软件包,不小心将rpm的命令也给卸载掉了,这下惨了,什么也做不了了.在google了翻了好多个页面,甚至官网也看了,没 ...

  5. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  6. [Android Pro] 小心ReleaseByteArrayElements 中的参数问题

    referen to : http://blog.csdn.net/rainlight/article/details/818964 在Sun的官方文档中,关于该函数的用法如下 The array i ...

  7. 桥牌笔记 Skill Level 4 C7 小心将吃

    南主打5H. 看来问题不大,但要小心南的方块AK会阻塞桥路. 如果方块3-2分布,并且将牌也3-2分布,就很容易. 如果红桃4-1分布,那是死定了. 如果方块4-1分布,还有希望完成的! 为了防止东家 ...

  8. OC小实例关于init方法不小心的错误

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  9. 不小心rm删除文件怎么办

    不小心rm删除文件怎么办 rm 命令的副作用越来越显现.而且rm掉之后的东西想找回来很困难.有2个原则: 1 永远不要在root下操作,尤其是rm命令 2 写一个别名,代替rm 我就是在~/.bash ...

  10. 小心Windows7的UTF-8代码页

    目录 第1章小心Windows7的UTF-8代码页    1 1.1 UTF-16与UTF-8相互转换    1 1.1.1 使用Windows API    1 1.1.2 自己编码    1 1. ...

随机推荐

  1. python网络编程--进程(方法和通信),锁, 队列,生产者消费者模型

    1.进程 正在进行的一个过程或者说一个任务.负责执行任务的是cpu 进程(Process: 是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在 ...

  2. MVC框架入门准备(二) - 语言包类与工厂模式

    语言包类: 相关配置项 LANG_FOLDER : 语言包目录名,默认为Lang LANG_AUTO : 自动识别语言,默认为true DEFAULT_LANG : 默认语言,默认为zh-cn方法 取 ...

  3. kali linux之无线渗透

    无线技术变化大,难度大,既新鲜刺激,又压力山大.一半协议  一半理论 无线技术特点: 行业发展迅猛 互联网的重要入口 边界模糊 安全实施缺失而且困难 对技术不了解造成配置不当 企业网络私自接入ap破坏 ...

  4. mxonline实战6 , 忘记用户密码时进行重置

        对应github地址:密码重置   原理:  1. 一个需要输入用户邮箱和注册码的密码忘记页面 2. 点击提交后,用户邮箱收到一个邮件,包含重置密码的链接 3. 点击链接进入密码重置页面   ...

  5. Antd 初识

    mark 参考 antd - 官网:Ant Design Pro: Ant Design - github:Ant Design pro - github:

  6. Centos7 自定义systemctl服务脚本

    序言篇: 之前工作环境一直使用Centos6版本,脚本一直在使用/etc/init.d/xxx:系统升级到Cento7后,虽然之前的启动脚本也可以使用,但一直没有使用systemctl 的自定义脚本. ...

  7. SpringMvc redirect

    SpringMVC redirect 核心 首先网上百度到的资源基本已经够用, 留作记录. SpringMVC-redirect重定向跳转传值 虽然这哥们也是转的, 但又没有留源地址. 因此 ... ...

  8. Springmvc之表单验证

    1.需要的相关jar 这里采用的是hibernate-validator-5.2.4.Final 和validation-api-1.1.0.Final 两个jar包.Hibernate Valida ...

  9. Luogu P1342 请柬 题解

    差不多是Dijkstra的裸题吧... 这道题可以分为来回两个阶段. 去的时候很简单,直接用一次Dijkstra,然后统计答案. 回来的时候就有些巧妙了,虽然表面上是每个点回到起点,但是何尝不可将其看 ...

  10. [黑科技]跑的比fread还快的cin挂和cout挂

    CCPC赛后摸鱼搞了个新的奇怪外挂 这里贴上利用sgetn和sputn来实现的读入读出挂,理论上比fread更优 期望在赛中TLE的代码能强行卡过去hhh 利用小规模的Codeforces - 103 ...