JS之this那些事
一直以来,对this的讨论都是热门话题。有人说掌握了this就掌握了JavaScript的80%,说法有点夸张,但可见this的重要性。至今记录了很多关于this的零碎笔记,今天就来个小结。
本人看过对this解释的最简单的说法:谁调用这个函数,this指向谁。 好啦,就是这么简单。下面再来具体说一下,请随时用这个说法去验证。
先来看一道js面试题热热身:
var obj = {
foo: function(){
console.log(this)
}
}
var bar = obj.foo
obj.foo() // obj
bar() // window
obj.foo()套用“谁调用指向谁”的说法就很好理解了,但bar()为啥是window。其实,这个也是可以套用这个简单的说法。前面我们var了一个变量bar,请注意,这个bar是个全局变量,即bar===window.bar,并把函数obj.foo赋给bar,此时直接调用bar(),就等于window.bar()。这样就好理解了,这个函数就是window调用的,没毛病了。关于这道题的解释,也可以参考这篇文章:http://mp.weixin.qq.com/s/ksqtCd8ouxU-cVc_HnA4Aw
牢记这句话:“谁调用指向谁”,搞清谁调用的,解决大部分的this问题足够了。下面说几个this的特殊情况:
1、函数被具体对象调用时,指向直接调用者。如果这个函数里面嵌套有函数,里面函数的this不会指向这个调用者,可通过that=this改变指向。内部函数用that调用该对象属性。
var name="out";
var obj={
name:"in",
outFoo:function(){
var that=this;//将this赋给that,内部函数的that指向obj
function inFoo(){
this.name; // out,此时this指向window
that.name; // in,此时that指向obj
}
},
};
2、如果函数通过new调用,那么就会创建一个对象,并且this 指向新创建的对象。
function Foo(){
//var this=new Object();函数内部隐式默认创建this对象并返回this
this.name="foo";
//return this;
}
var obj=new Foo(); //将返回的this赋给obj
console.log(obj.name);// foo
3、setTimeOut、setInterval函数中的this指向window。
4、通过apply或call调用时,this会动态改变它的指向。这俩种方法都接受俩个参数,第一个都是调用这个函数的对象。用法:functionNmae.apply(调用的对象,参数2)。
5、通过bind()调用时,这个与前面两个用法差不多,只不过bind()静态绑定this,一旦绑定了就不会改变,即使用call或apply也没用,同时返回一个函数体待执行。
最后来一道js的this面试题:http://www.cnblogs.com/macq/p/6526809.html
附:别人面试阿里时的回答
描述一下this
this,函数执行的上下文,可以通过apply,call,bind改变this的指向。
对于匿名函数或者直接调用的函数来说,this指向全局上下文(浏览器为window,nodejs为global),剩下的函数调用,那就是谁调用它,this就指向谁。
当然还有es6的箭头函数,箭头函数的指向取决于该箭头函数声明的位置,在哪里声明,this就指向哪里。
JS之this那些事的更多相关文章
- js跨域那些事
原文:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其 ...
- JS中字符串那些事~
1:字符串 JS中的任何数据类型都可以当作对象来看.所以string既是基本数据类型,又是对象. 2:声明字符串 var sStr = ‘字符串’;(常用) var oStr = new String ...
- js 手机端触发事事件、javascript手机端/移动端触发事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...
- JS之DOM那些事
DOM 是 Document Object Model(文档对象模型)的缩写.DOM分为核心DOM.XML DOM.HTML DOM,我们接触的主要是HTML DOM,HTML DOM 定义了所有 H ...
- JS中数组那些事~
今天闲的没事,看了一些关于数组的操作,好久木有用过,很多都已经忘记的差不多了,所以今天花了一个小时写了一些demo,准备备份一下方便以后使用~~~ 下面是一些工作当中,经常用到的数组的方法,小伙伴可以 ...
- js处理时间的那些事
我们在实际需求中一般需要对时间进行相应的出来,比如:对时间串的拆分显示,两个时间差的求值显示等. 时间拆分: 一般对于这种处理我们使用正则表示式: 正则表达式拆分时间: var date = data ...
- JS实现简易的计算器
JS可以做的事多了,那就用来实现一个计算器吧 看看手机中的计算器,分为普通计算器和科学计算器 自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看 ...
- js触摸屏案例
js 手机端触发事事件.javascript手机端/移动端触发事件 处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1 2 3 4 touchstart: ...
- 专门针对初学者的Node.js教程
转载原文:http://www.csdn.net/article/2013-08-28/2816731-absolute-beginners-guide-to-nodejs Node.js的教程并不缺 ...
随机推荐
- 以太坊系列之十四: solidity特殊函数
solidity中的特殊函数 括号里面有类型和名字的是参数,只有类型是返回值. block.blockhash(uint blockNumber) returns (bytes32): hash of ...
- const限定符、constexpr和常量表达式------c++ primer
编译器将在编译过程中把用到const变量的地方都替换成对应的值,为了执行这种替换,编译器必须知道变量的初始值.如果程序包含多个文件,则那个用了const对象的文件都必须能访问到它的初始值才行.要做到这 ...
- nova挂载volume源码分析
当nova volume-attach instance_uuid volume_uuid 执行后,主要流程如下: 使用的存储类型是lvm+iscis 1.nova client解析该命令行,通过re ...
- cookie,session 的概念以及在django中的用法,以及cbv装饰器用法
cookie的由来: 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不会直接影响后 ...
- 【spring】InitializingBean接口
apollo 源码中有这么一个类 public class ReleaseMessageScanner implements InitializingBean @Override public voi ...
- Python中实现简单的插件框架
在系统设计中,经常我们希望设计一套插件机制,在不修改程序主体情况下,动态去加载附能. 我设想的插件系统: 1.通过类来实现 2.自动查找和导入 我们假设需要实现一个简单的插件系统,插件可以接收一个参数 ...
- Ntrip协议使用流程及服务器实现架构
Ntrip协议 在RTK接收机中,有多种方式获取到差分数据:电台.挂外串口.网络等.其中网络方式适合在有网络基准站的地区,省掉携带多一台RTK接收机来完成工作. CORS是网络基准站,通过网络收发GP ...
- PHP批量给目录下所有的文件转换编码
代码如下: function tree(&$arr_file, $directory, $dir_name=''){ $mydir = dir($directory); ...
- AVFoundation 文本播报
#import <Foundation/Foundation.h> #import <AVFoundation/AVFoundation.h> @interface Speak ...
- svn学习笔记(一)
一.svn介绍 1.1 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对代码文件.配置文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大 解决代码冲突困难 容易 ...