我这样理解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的这个答案里说的最清楚, ...
随机推荐
- JavaScript Patterns 5.1 Namespace Pattern
global namespace object // global object var MYAPP = {}; // constructors MYAPP.Parent = function() { ...
- Linux hostname对Oracle实例以及监听的影响
在Linux平台中,对hostname的修改,是否对ORACLE数据库实例或监听进程有影响呢?如果有影响,又要如何解决问题呢?另外/etc/hosts下相关内容的修改,是否也会影响实例或监听呢?这里涉 ...
- 使用dwr时动态生成table的一个小技巧
这篇随笔是我在07年写的,因为当时用了自己建设的blog,后来停止使用了,今天看到备份数据库还在,恢复出来放到这里.留着记录用. 我在使用DWR时,试了很多次都无法在动态生成的table中的一个或多个 ...
- jasperreports+iReport制作报表笔记
一. 准备工作 1. 下载相关工具:点击此下载相关工具,jasperreports-5.6.0-project.zip中有提供所需的jar包. 二. 安装ant 1. 解压apache-ant-1.9 ...
- 高性能MySQL笔记:第1章 MySQL架构
MySQL 最重要.最与众不同的特性是他的存储引擎架构,这种架构的设计将查询处理(Query Precessing)及其系统任务(Server Task)和数据的存储/提取相分离. 1.1 MyS ...
- plain framework 1 版本更新 1.0.2 增加打包插件
由于个别因素,该框架的文档没有及时的更新到博客上,但是离线的文档已经完成.本次更新对框架来说显得比较重要,因为在文档的编写过程中经过再次的阅读代码修复了不少错误,最主要的是统一了整个框架的标准风格.对 ...
- No 'Access-Control-Allow-Origin' header is present on the requested resource.
今天做一个AJAX案例时,浏览器监控到如下错误: XMLHttpRequest cannot load http://54.169.69.60:8081/process_message. No 'Ac ...
- leetcode-HouseRobber
这道题比较简单,所以我会介绍的比较粗略: 题目: 有一个小偷想沿着马路上的房子偷东西,每家每户都有一些钱,但这条街上装了监控系统,如果相邻的两户人家都被偷了的话那么就会触发报警器.小偷的目标就是在不触 ...
- UVA 12169 Disgruntled Judge【扩展欧几里德】
题意:随机选取x1,a,b,根据公式xi=(a*xi-1+b)%10001得到一个长度为2*n的序列,奇数项作为输入,求偶数项,若有多种,随机输出一组答案. 思路:a和b均未知,可以考虑枚举a和b,时 ...
- 第10章 同步设备I/O和异步设备I/O(3)_接收I/O请求完成通知的4种方法
10.5 接收I/O请求完成的通知 (1)I/O请求被加入设备驱动程序的队列,当请求完成以后,设备驱动也要负责通知我们I/O请求己经完成. (2)可以用4种方法来接收I/O请求己经完成的通知 技术 特 ...