高程上的大前提:

1、this 对象是在运行时基于函数的执行环境绑定的:在全局函数中,this 等于window,而当函数被作为某个对象的方法调用时,this 等于那个对象;不过,匿名函数的执行环境具有全局性,因此其this 对象通常指向window。

2、每个函数在被调用时都会自动取得两个特殊变量:this 和arguments。内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量;

总结:

1、在事件处理程序中,事件绑定在哪个元素身上,this 就指向谁;分析戳这里;

2、在方法调用(如果某个对象的属性是函数,这个属性就叫方法,调用这个属性,就叫方法调用)中,执行函数体的时候,作为属性访问主体的对象和数组便是其调用方法内 this 的指向。(通俗的说,调用谁的方法 this 就指向谁;)

3、普通函数执行里的 this 都是 全局对象,非严格模式下浏览器端指的是 window(严格模式下 undefined,因为全局变量对象里没有定义this),因为都是在全局环境下执行的;

4、任意函数里如果嵌套了 函数,那这个时候 嵌套函数里的 this 在未指定的情况下,应该指向的是 window 对象(浏览器中非严格模式下,严格模式下返回 undefined ,因为嵌套函数里活动对象未指定 this);如果想在嵌套函数中继续用原来的 this 指向,需要保存下,比如 var self = this ,然后在嵌套函数中使用 self 变量,因为 this 不会传递;

这里加个案例:

var arr = [1, 2, 3];
arr.map(function() {
console.log(this);
});

你觉得这里 this 是 arr 对象么?

不是的,全局环境下,输出三个 window,你可能以为上面的理论错了,其实不是,map 作为 arr 对象的方法,在 map 函数里访问 this 当然是 arr 对象,而这里相当于在 arr.map 函数里又嵌套了一层函数,没指定的情况下,this 当然是 window,这里容易混淆,注意理解;

这里重写了默认的 map 方法,方便理解:

var arr = [1, 2, 3];

arr.map = function(fn) {
console.log(this); //输出 arr 对象
fn();
}; arr.map(function() {
console.log(this);//输出 window ,全局环境下
});

如果要把 map 里的 this 保存到嵌套的函数里:

var arr = [1, 2, 3];

arr.map = function(fn) {
fn.call(this); // 法一:把 this 作为参数传进去,替换了原来 fn 中的 this
var self=this; // 法二:保存下来,在嵌套函数里用
(function () {
console.log(self);
}()); }; arr.map(function() {
console.log(this);
});

这样就输出两次 arr 对象了,call 不会用点这里

5、通过构造函数创建对象,在调用构造函数之前就已经创建了新对象,并将构造函数的作用域赋给了新对象,因此构造函数里的 this 指向的就是这个新对象;

6、with 语句并没有改变 this 的指向,不过表现确实有点奇怪,看截图:

7、一些特殊情况,如:逗号运算符,赋值运算符

 var name = "The Window";
var object = {
name: "My Object",
getName: function() {
return this.name;
}
};
object.getName(); //"My Object"
(object.getName)(); //"My Object"
(object.getName = object.getName)(); //"The Window",在非严格模式下
(object.getName, object.getName)(); //"The Window",在非严格模式下

第9行代码解释:

虽然加上括号之后,就好像只是在引用一个函数,但this 的值得到了维持,因为object.getName 和(object.getName)的定义是相同的。

根据 MDN ,圆括号运算符() 用来控制表达式中的运算优先级。所以书上说,没有改变 this,我觉得是说的过去的;

第10行代码解释:

代码先执行了一条赋值语句,然后再调用赋值后的结果。因为这个赋值表达式的值是函数本身,所以this 的值不能得到维持,结果就返回了"The Window"。

我的理解是,赋值表达式返回了内存中的一个值,也就是函数本身,而不是原来方法的引用,所以 this 没有得到维持,结果返回了 window;

第11行代码解释:

同上,因为根据 MDN ,逗号操作符 也是返回最后一个操作数的值,也是函数本身,所以和上面一样;

按照这个逻辑的话,所有返回值操作的,都有可能去改变上面代码中的 this 值,都需要谨慎,譬如:

var a = {
func: function() {
return this;
}
}; function f(fn) {
console.log(fn());
} f(a.func);//window

因为函数中的参数也是按照值传递的,在向参数传递引用类型的值时,会把这个值在内存中的地址复制给一个局部变量。

参考资料:

JavaScript权威指南-第6版

JavaScript高级程序设计-第3版

js 中 this 的指向问题的更多相关文章

  1. 理解js中this的指向

         学习自原文  http://www.cnblogs.com/pssp/p/5216085.html后的一点小结(原文作者总结的很棒^_^)! 关于js中this的指向,在函数定义的时候还无法 ...

  2. js中this的指向

    在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1. ...

  3. JS中的this 指向问题

    我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...

  4. 轻松了解JS中this的指向

    JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向 ...

  5. js中改变this指向的call、apply、bind 方法使用

    前言: 由于js 中this的指向受函数运行环境的影响,指向经常改变,使得开发变得困难和模糊,所以在封装sdk,写一些复杂函数的时候经常会用到this 指向绑定,以避免出现不必要的问题,call.ap ...

  6. js中 this 的指向

    js中 this的指向一共存在3种地方: 1.全局的this; 2.构造函数的this; 3.call/apply; 一.全局的this: function test(){ this.d = 3;// ...

  7. 彻底理解js中this的指向,不必硬背。

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  8. 了解学习JS中this的指向

    [转] 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问 ...

  9. JS中this的指向问题

    JS中this的定义:this对象是在运行时基于函数的执行环境绑定的(通俗点来说就是:this代表当前函数属于哪个对象). this一般情况下都代表的是global对象,在浏览器中就是window对象 ...

  10. Js中的this指向问题

    函数中的this指向和当前函数在哪定义的或者在哪执行的都没有任何的关系分析this指向的规律如下: [非严格模式]1.自执行函数中的this永远是window [案例1] var obj={ fn:( ...

随机推荐

  1. Netty(七):流数据的传输处理

    Socket Buffer的缺陷 对于例如TCP/IP这种基于流的传输协议实现,接收到的数据会被存储在socket的接受缓冲区内.不幸的是,这种基于流的传输缓冲区并不是一个包队列,而是一个字节队列.这 ...

  2. Go语言核心之美 4.3-多返回值

    在Go语言中.函数能够有多个返回值,这个特性我们已经在之前的样例见过非常多,非常多标准库函数都会返回两个值,一个是期望得到的函数执行结果,另外一个是函数出错时的错误值. 以下的程序是findlinks ...

  3. p4n 今天与朋友沟通支付云服务普及以及跨境电子商务的光辉前景

    p4n 今天与朋友沟通支付云服务普及以及跨境电子商务的光辉前景 跨境电子商务也是个光忙四色和的跨境电子商务啊..支付项目也是个强大的项目.. 过几天我们就要宣布正式发布atipay ,并宣称将致力于推 ...

  4. Xilinx问题查找

    1.登录https://www.xilinx.com/ 2.在All下拉菜单选择Support选项查找技术问题,All选项会查找全部关键词,但是大多数我们只需要技术相关的内容

  5. 微软七届MVP桂素伟:移动互联网与职业规划

    原文地址:http://student.csdn.net/mcd/topic/163587/955481 2014年10月19日在哈尔滨工业大学举办了CSDN高校俱乐部全国巡讲. 此次邀请到了微软七届 ...

  6. SCWS 中文分词

    SCWS 中文分词v1.2.3 开源免费的中文分词系统,PHP分词的上乘之选! 首页 下载 演示 文档 关于 服务&支持 API/HTTP 论坛 捐赠 源码@github 文档目录 SCWS- ...

  7. 基于jdom 的 xmluti

    package cn.com.do1.wechat.common; import org.jdom.Attribute; import org.jdom.Document; import org.jd ...

  8. python保存爬取的图片

    用爬虫抓取图片的保存 保存图片 request=urllib2.Request(randNumberUrl,data,headers) picture=opener.open(request).rea ...

  9. 因客户机IP与服务器IP不在同一网段导致无盘客户机开机卡tftp,提示:PXE-E11: ARP timeout

    61的地址需要在上面的地址范围段之内 问题现象] 无盘客户机启动获取DHCP后卡在tftp界面提示:PXE-E11: ARP timeout,如下图: [原因说明] 客户机的IP地址与服务器IP地址不 ...

  10. 使用JavaScript获取select元素选中的value和text

    示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name= ...