我这样理解js里的this
关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:knockout,有时候不明白为什么不直接使用this,而要把 this 作为参数传入。
接下来你谈谈我对它的理解,也作为一个笔记,方便以后参阅。有不对的地方,欢迎指出批评。
1. 不像C#,this一定是指向当前对象。js的this指向是不确定的,也就是说是可以动态改变的。call/apply 就是用于改变this指向的函数,这样设计可以让代码更加灵活,复用性更高。
2. this 一般情况下,都是指向函数的拥有者。这一点很重要!这一点很重要!这一点很重要!
这也是一道常见的面试题,如下代码:
<script type="text/javascript">
var number = 1;
var obj = {
number: 2,
showNumber: function(){
this.number = 3;
(function(){
console.log(this.number);
})();
console.log(this.number);
}
};
obj.showNumber();
</script>
由于showNumber方法的拥有者是obj,所以this.number=3; this 指向的就是 obj 的属性 number。同理,第二个 console.log 打印的也是属性 number。
为什么第二点说一般情况下this都是指向函数的拥有者,因为有特殊情况。函数自执行就是特殊情况,在函数自执行里,this 指向的是:window。所以第一个 console.log 打印的是 window 的属性 number。
所以要加一点:
3. 在函数自执行里,this 指向的是 window 对象。
扩展,关于this,还有一个地方比较让人模糊的是在 dom 事件里,通常有如下3种情况:
如下:
1. 使用标签属性注册事件,此时this 指向的是 window 对象。
<input id="test" type="button" value="按钮" onClick="test()"/>
function test(){alert(this)}
2. 对于1,要让 this 指向 input,可以将 this 作为参数传递。
3. 使用 addEventListener 等注册。此时this 也是指向 input。
document.getElementById("test").addEventListener("click",test);
好久没写博客,完全生疏了~,以后争取多写一点,记录知识,分享知识。
我这样理解js里的this的更多相关文章
- 深入理解js里面的this
闲聊两句(可以忽略): 毕业有半年了,时间还过得真快,不过还好,感觉自己相对于刚毕业那会确实成长了很多:好久没有打游戏了(自己决心要戒掉的),消磨时光的时候就看看电影或者追追电视剧,再无聊就洗洗衣服. ...
- 理解JS里的偏函数与柯里化
联系到上篇博客讲的bind完整的语法为: let bound = func.bind(context, arg1, arg2, ...); 可以绑定上下文this和函数的初始参数.举例,我们有个乘法函 ...
- 理解JS里的稀疏数组与密集数组
一般来说,JavaScript中的数组是稀疏的. 什么是稀疏呢?稀疏也就是说,数组中的元素之间可以有空隙,因为一个数组其实就是一个键值映射.本文解释了如何创建稀疏数组和不稀疏的数组. 1.稀疏数组 创 ...
- 理解 Node.js 里的 process.nextTick()
有很多人对Node.js里process.nextTick()的用法感到不理解,下面我们就来看一下process.nextTick()到底是什么,该如何使用. Node.js是单线程的,除了系统IO之 ...
- 对于js里的闭包的理解
Ali的回答: 当function里嵌套function时,内部的function可以访问外部function里的变量. function foo(x) { var tmp = 3; ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- 简单理解js的this
js的this是什么?关于这个东西,博客园里面有太多的解释了,不过,本人看了一下,感觉对this解释的有点复杂了,因此,本人在此给this一个简单易于理解的定义. this其实是js的一个对象,至于是 ...
- js笔记——理解js中的call及apply
call及apply在js里经常碰得到,但一直感觉很陌生,不能熟练使用.怎样才能熟练应用呢? 为什么存在call和apply? 在javascript OOP中,我们经常会这样定义: function ...
- js里function的apply vs. bind vs. call
js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...
随机推荐
- Composer管理PHP包
安装 Composer包含两大逻辑部分:一个是用来存储包,另一个是命令行应用程序,帮助你发现.下载.更新和分享代码. $ cd/path/to/my/project $ curl -s http:// ...
- eclipse插件Maven添加依赖查询无结果的解决方法(Select Dependency doesn't work)
在eclipse中用过maven的可能都遇到过这种情况,我以前一直在search.maven里面搜索,然后添加pom信息. 今天在网上搜索时,找到了一个解决方法,在这里分享一下. 第一步,在prefe ...
- 利用 druid 解析器解析SQL
最近参与一个开源项目,一个功能的实现,用到了 druid 解析器来解析SQL,记录下如果使用 druid 来解析SQL,实现对SQL的拦截改写. 1. 对 insert 语句进行解析: private ...
- 解决"is marked as crashed and should be repaired"方法
初次遇到这个问题是在服务器上放置mysql的磁盘空间满了(数据库目录和网站目录一定要做一定的分离,不要放在一个磁盘空间了) 当请求写入数据库时,php会提示 **** is marked as cra ...
- oracle 数据库导出数据
cmd导出数据: exp ZD_ZD_ZDWW/zdzd1402!@11.111.111.213/orcl file=c:\1234.dmp owner=ZD_ZD_ZDWW
- nc分析代理服务器
最近洒家搞了一个代理服务器(参见 折腾阿里云笔记 ).以前ƒq的时候代理服务器都是开在127.0.0.1,浏览器到代理服务器之间不会有中间人监听问题.现在代理服务器不在本机,洒家就突然想到了这些问题: ...
- openwrt修改flash大小
前言 默认openwrt trunk编译出来的flash大小为8M,但是我们手上的板子可能flash大小更大,本文以MT7620a为例,将其flash大小由8M修改为16M或者32M 增加dts文件 ...
- SVN服务器&客户端的搭建和使用
目录结构: 1. SVN服务器搭建和使用-VisualSVNServer 2. SVN客户端安装和使用-TortoiseSVN 3. TortoiseSVN使用方法 SVN简介 SVN是Subvers ...
- POJ 1696 Space Ant 【极角排序】
题意:平面上有n个点,一只蚂蚁从最左下角的点出发,只能往逆时针方向走,走过的路线不能交叉,问最多能经过多少个点. 思路:每次都尽量往最外边走,每选取一个点后对剩余的点进行极角排序.(n个点必定能走完, ...
- Android开发中上线后修改应用名称的若干问题
一.在Android Studio 1.3中修改app的包名: 需求来源: 之前开发的app已经在腾讯的应用宝上线,应客户要求,app需要改名字,这个就有点麻烦了.如果申请改名字,要求如下: 截图上图 ...