一直以来,对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那些事的更多相关文章

  1. js跨域那些事

    原文:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其 ...

  2. JS中字符串那些事~

    1:字符串 JS中的任何数据类型都可以当作对象来看.所以string既是基本数据类型,又是对象. 2:声明字符串 var sStr = ‘字符串’;(常用) var oStr = new String ...

  3. js 手机端触发事事件、javascript手机端/移动端触发事件

    处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...

  4. JS之DOM那些事

    DOM 是 Document Object Model(文档对象模型)的缩写.DOM分为核心DOM.XML DOM.HTML DOM,我们接触的主要是HTML DOM,HTML DOM 定义了所有 H ...

  5. JS中数组那些事~

    今天闲的没事,看了一些关于数组的操作,好久木有用过,很多都已经忘记的差不多了,所以今天花了一个小时写了一些demo,准备备份一下方便以后使用~~~ 下面是一些工作当中,经常用到的数组的方法,小伙伴可以 ...

  6. js处理时间的那些事

    我们在实际需求中一般需要对时间进行相应的出来,比如:对时间串的拆分显示,两个时间差的求值显示等. 时间拆分: 一般对于这种处理我们使用正则表示式: 正则表达式拆分时间: var date = data ...

  7. JS实现简易的计算器

    JS可以做的事多了,那就用来实现一个计算器吧 看看手机中的计算器,分为普通计算器和科学计算器     自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看 ...

  8. js触摸屏案例

    js 手机端触发事事件.javascript手机端/移动端触发事件   处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1 2 3 4 touchstart:  ...

  9. 专门针对初学者的Node.js教程

    转载原文:http://www.csdn.net/article/2013-08-28/2816731-absolute-beginners-guide-to-nodejs Node.js的教程并不缺 ...

随机推荐

  1. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  2. 洛谷P2761 软件补丁问题(状压dp)

    传送门 啊咧……这题不是网络流二十四题么……为啥是个状压dp…… 把每一个漏洞看成一个状态,直接硬上状压dp 然后因为有后效型,得用spfa //minamoto #include<iostre ...

  3. selenium+PhantomJS简单爬虫

    #!/usr/bin/env python # -*- coding: utf-8 -*- ''' Created on 2017年10月19日 @author: zzy ''' import tim ...

  4. Python3用sys和time模块实现进度条

    import sys import time def view_bar(num, total): rate = float(num) / float(total) rate_num = int(rat ...

  5. Odd number problem

    描述 你一定玩过八数码游戏,它实际上是在一个3*3的网格中进行的,1个空格和1~8这8个数字恰好不重不漏地分布在这3*3的网格中.例如:5 2 81 3 _4 6 7在游戏过程中,可以把空格与其上.下 ...

  6. 神马是代码简单的cmd模式,这就是!

    小狼正在研究 “怎么查找连在一起的同色方块?”算法问题 ,突然感觉我是不是需要一种开发模式,不然感觉自己的代码好乱的. 可能是研究算法吧,导致小狼的思路特别清晰,加上也用了差不多1年的nodejs.s ...

  7. PIE SDK打开网络地图数据

    1. 数据介绍 网络地图数据是在线地图服务发布出来的数据,其支持数据的网络查看和传输,极大的促进了GIS的发展. 目前PIE SDK支持百度地图.谷歌地图.高德地图.天地图.Bing地图.ArcGIS ...

  8. 2.5 Go错误处理

    defer import "fmt" func testDefer(){ defer fmt.Println() defer fmt.Println() fmt.Println() ...

  9. redis——基础知识

    redis默认端口:6379 一.为何要用redis? redis广义上来讲类似于mongodb,rabitmq,都属于nosql——即非关系型数据库中的一种,通常而言,mongodb不能说是mq(消 ...

  10. Promise个人笔记---【Promise的前世今生】

    Promise第一版本 案例是使用Node.js内置的fs模块[就是文件系统模块,负责读写文件.]来模拟异步操作 const fs = require('fs'); function getFileP ...