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的教程并不缺 ...
随机推荐
- 基于verilog的FFT算法8点12位硬件实现
FFT算法8点12位硬件实现 (verilog) 1 一.功能描述: 1 二.设计结构: 2 三.设计模块介绍 3 1.蝶形运算(第一级) 3 2.矢量角度旋转(W) 4 3.CORDIC 结果处理 ...
- (一)用C或C ++扩展(翻译)
用C或C ++扩展 如果你知道如何用C语言编程,那么为Python添加新的内置模块是很容易的.这种扩展模块可以做两件不能直接在Python中完成的事情:它们可以实现新的内置对象类型,以及调用C库函数和 ...
- 《C#多线程编程实战》1.11 Monitor.TryEnter()避免死锁
这章的内容是真的有意思 特别是代码. 先贴上代码: class Program { static void Main(string[] args) { object lock1 = new objec ...
- 命令行里打 cd 简直是浪费生命
简评:作为工程师,你在命令行下最常打的命令无非就是 cd 与 ls.这些年你浪费了多少时间? 作为一个程序员或者在 shell 中花费大量时间的人,你可能会经常以一种低效率的方式在目录中来回移动,特别 ...
- 'javac' 不是内部或外部命令,也不是可运行的程序
win10 系统下'javac' 不是内部或外部命令,也不是可运行的程序 1.在系统变量下面配置 JAVA_HOME:你自己的jdk的路径 CLASSPATH= .;%JAVA_HOME%libdt. ...
- [POI2007]MEG-Megalopolis 树的dfs序+树状数组维护差分 BZOJ1103
题目描述 Byteotia has been eventually touched by globalisation, and so has Byteasar the Postman, who onc ...
- 获取一个表中的字段总数(mysql) Navicat如何导出Excel格式表结构 获取某个库中的一个表中的所有字段和数据类型
如何获取一个表中的字段总数 1.function show columns from 表明: 结果 : 2.functiuon select count(*) from INFORMATION_SCH ...
- jeesite 的提示消息图标
jeesite 的提示消息图标 jeesite 框架的提示信息 保存数据时 总是显示一个叉子图标 不符合要求 原因: 不加成功两字:如下 后来大神说 保存数据提示语句必须加“”“成功” 才会出现正确 ...
- 在pycharm中使用指定的虚拟环境virtualenv
第一步 建立虚拟环境 cmd下: pip install virtualenv 创建虚拟环境目录 env 第二步:激活虚拟环境 进入虚拟环境下的script目录 第三步:创建一个flask文件夹并打开 ...
- python学习,day2:列表的复制
主要涉及列表的潜复制(第二层受后面修改的影响)和深复制(不受后面修改的影响) 代码如下 # coding=utf-8 # Author: RyAn Bi import copy names = ['A ...