我这样理解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的这个答案里说的最清楚, ...
随机推荐
- yii2 GridView 日期格式化并实现日期可搜索 案例
作者:白狼 出处:http://www.manks.top/article/yii2_gridview_dateformat_search 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且 ...
- Java Se:自定义ClassLoader
JVM是如何知道java.lang包中的类的?JVM又是如何知道我们应用中的类的?我们的应用中明明是有某个类, 但是JVM却抛出ClassNotFoundException,这是为什么?XxxImpl ...
- .NET序列化的一点技巧(附Demo)
阅读目录 介绍 详细 处理 结论 Demo下载 介绍 序列化是将对象状态转换为可保持或传输的形式的过程.序列化的补集是反序列化,后者将流转换为对象.这两个过程一起保证数据易于存储和传输. .NET F ...
- SQL Server调优系列基础篇(常用运算符总结——三种物理连接方式剖析)
前言 上一篇我们介绍了如何查看查询计划,本篇将介绍在我们查看的查询计划时的分析技巧,以及几种我们常用的运算符优化技巧,同样侧重基础知识的掌握. 通过本篇可以了解我们平常所写的T-SQL语句,在SQL ...
- Attribute 用法
public class Program { //定制特性也可以应用在其他定制特性上, //应用AttributeUsage,来控制如何应用新定义的特性 [AttributeUsage(Attribu ...
- SQL SERVER 查看数据库表的字段类型,是否允许为NULL,默认值,主键等
)-- 表名 set @table_name='bqcform101' --============表结构 select 类别,表名or字段名,描述,字段类型,是否自增,允许为NULL,默认值 fro ...
- Java api 入门教程 之 JAVA的包装类
Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个和基本数 ...
- shell流程控制&函数
条件 if-then-elif-then-fi if的条件部分经常使用test EXPRESSION或[ EXPRESSION ]实现,test的用法可以参见test if 条件1 #if 条件1;t ...
- Linux多进程编程
进程的状态 Linux进程有7种基础状态(两种running算一种),除了traced都可以用$ps命令查看,$ps可以查看的进程状态如下,更多进程状态信息参见Linux Process VS Thr ...
- C++杂谈(三)产生随机数与time函数
产生随机数在程序中很有用,这篇文章简单介绍一下产生随机数的方法. 伪随机数 使用标准库<cstdlib>中的rand()函数产生随机数. #include<iostream> ...