this对象是函数在运行时由调用函数的对象决定的:

1、在全局对象中运行函数时,this等于window

2、当函数被作为某个对象的方法调用时, this等于那个对象.

需要注意的几点:

声明函数里的this指向window(不论在哪里声明)

  1. function ftn01(){
  2. console.log(this);//window
  3. function ftn02(){
  4. console.log(this);//window
  5. }
  6. ftn02();
  7. }
  8. ftn01();

匿名函数里的this指向window(不论在哪里赋值)

  1. var f3=function(){
  2. console.log(this);//window
  3. var f4=function(){
  4. console.log(this);//window
  5. };
  6. f4();
  7. };
  8. f3();

属于对象的方法或者说被对象调用时,this属于这个对象

  1. var obj = {
  2. name:"sharpxiajun",
  3. job:"Software",
  4. show:function(){
  5. console.log("Name:" + this.name + ";Job:" + this.job);
  6. console.log(this);// Object { name="sharpxiajun", job="Software", show=function()}
  7. }
  8. };
  9. var otherObj = new Object();
  10. otherObj.name = "xtq";
  11. otherObj.job = "good";
  12. otherObj.show = function(){
  13. console.log("Name:" + this.name + ";Job:" + this.job);
  14. console.log(this);// Object { name="xtq", job="good", show=function()}
  15. };
  16. obj.show();//Name:sharpxiajun;Job:Software
  17. otherObj.show();//Name:xtq;Job:good

如果通过new加构造函数(包括对象字面量定义)出来的对象,则对象里的this属于这个对象本身,如果通过这个对象再引用函数,则这个函数里的this属于这个对象

  1. function Person(name,sex,age,job){
  2. this.name = name;
  3. this.sex = sex;
  4. this.age = age;
  5. this.job = job;
  6. this.showPerson = function(){
  7. console.log("姓名:" + this.name);
  8. console.log("性别:" + this.sex);
  9. console.log("年龄:" + this.age);
  10. console.log("工作:" + this.job);
  11. console.log(this);// Person { name="马云", sex="男", age=46, 更多...}
  12. }
  13. }
  14. var person = new Person("马云", "男", 46, "董事长");
  15. person.showPerson();

new操作符的解释

new操作符会让构造函数产生如下变化:

  1.       创建一个新对象;

  2.       将构造函数的作用域赋给新对象(因此this就指向了这个新对象);

  3.       执行构造函数中的代码(为这个新对象添加属性);

  4.       返回新对象

Call和apply是将this指针指向方法的第一个参数。

  1. var name = "sharpxiajun";
  2. function ftn(name){
  3. console.log(name);
  4. console.log(this.name);
  5. console.log(this);
  6. }
  7. ftn("101");
  8. var obj = {
  9. name:"xtq"
  10. };
  11. ftn.call(obj,"102");
  12. /*
  13. * 结果如下所示:
  14. *101
  15. T002.html (第 73 行)
  16. sharpxiajun
  17. T002.html (第 74 行)
  18. Window T002.html
  19. T002.html (第 75 行)
  20. 102
  21. T002.html (第 73 行)
  22. xtq
  23. T002.html (第 74 行)
  24. Object { name="xtq"}
  25. * */

以定义对象里的方法里传入函数为例:

  情形一:传入的参数是函数的别名,那么函数的this就是指向window

  情形二:传入的参数是被new过的构造函数,那么this就是指向实例化的对象本身;

  情形三:如果我们想把被传入的函数对象里this的指针指向外部字面量定义的对象,那么我们就是用apply和call

  1. var obj={};
  2. obj.f=function(){
  3. console.log(this);
  4. };
  5. obj.f();
  6. function f2(f){
  7. f();
  8. }
  9. f2(obj.f);
  10. setTimeout(obj.f,1000);
    //obj
    //window
    //window
优先级 情景 this 的值 备注
1 new new出来的空 object  
  apply / call 传入的参数 并列第一,apply / call不能和 new 同时出现
new arr1.show.apply(“1”); // 报错
2 定时器 window  
3 事件 发生事件的元素  
4 方法 所有者  
5 其他(嵌套等) window || undefined 看是否为严格模式

js中this的深入研究的更多相关文章

  1. js中for循环的研究

    转自:http://blog.csdn.net/lushuaiyin/article/details/8541500 <html> <body> <b><ce ...

  2. js中new构造函数的研究

    <javascript高级编程>里对new操作符的解释: new操作符会让构造函数产生如下变化: 1.       创建一个新对象: 2.       将构造函数的作用域赋给新对象(因此t ...

  3. 研究分析JS中的三种逻辑语句

    JS中的三种逻辑语句:顺序.分支和循环语句. 一.顺序语句 代码规范如下:1. <script type="text/javascript"> var a = 10;  ...

  4. 对Node.js 中的依赖管理的研究-----------------引用

    nodejs依赖:  dependencies   devDependencies   peerDependencies  bundledDependencies  optionalDependenc ...

  5. 深入研究js中的位运算及用法

    什么是位运算? 位运算是在数字底层(即表示数字的 32 个数位)进行运算的.由于位运算是低级的运算操作,所以速度往往也是最快的(相对其它运算如加减乘除来说),并且借助位运算有时我们还能实现更简单的程序 ...

  6. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  7. 由项目浅谈JS中MVVM模式

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    背景 最近项目原因使用了durandal.js和knock ...

  8. 三维空间旋转和Three.JS中的实现

    三维空间中主要有两种几何变换,一种是位置的变换,位置变换和二维空间的是一样的.假设一点P(X1,Y1,Z1) 移动到Q(X2,Y2,Z2)只要简单的让P点的坐标值加上偏移值就可以了.但是三维空间的旋转 ...

  9. js中各种跨域问题实战小结(一)

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

随机推荐

  1. Apache与Nginx优缺点比较

    本文来源:收集.整理自互联网 1.nginx相对于apache的优点:  轻量级,同样起web 服务,比apache 占用更少的内存及资源  抗并发,nginx 处理请求是异步非阻塞的,而apache ...

  2. AN ESAY HIT COUNTER

    <?php $counts = ("hitcounter.txt"); $hits = file($counts); $hits[0] ++; $fp = fopen($co ...

  3. JS笔记 入门第四

    小测试: 注意:取消所有的设定可以直接使用 document.getElementById("txt").removeAttribute("style"); 这 ...

  4. APM代码学习笔记1

    libraries目录 传感器 AP_InertialSensor 惯性导航传感器 就是陀螺仪加速计 AP_Baro 气压计 居然支持BMP085 在我印象中APM一直用高端的MS5611 AP_Co ...

  5. 关于Struts2的碎碎念

    一:安全,还是安全 我入行比较晚,那会Spring MVC什么的都很流行了,一直觉得struts2作为一个Web MVC框架实在太笨重了点.所以虽然之前一直在用,但是其实没有真正研究过. 今天公司又遇 ...

  6. Java 初学者帮助文档以及基础教程

    一下午的时间,大致看了一下Java的文档,进一步熟悉了Java的大体框架和结构,整理了一下有用的资源. 帮助文档: JSE 8 API 英文版 在线HTML格式:http://docs.oracle. ...

  7. 第七届河南省赛F.Turing equation(模拟)

    10399: F.Turing equation Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 151  Solved: 84 [Submit][St ...

  8. Android开发(26)--补间动画(Tween)的实现

    补间动画(Tween Animation) 补间动画与逐帧动画在本质上是不同的,逐帧动画通过连续播放图片来模拟动画的效果,而补间动画则是通过在两个关键帧之间补充渐变的动画效果来实现的.补间动画的优点是 ...

  9. ios之TableViewCell重用机制避免反复显示问题

    常规配置例如以下 当超过tableView显示的范围的时候 后面显示的内容将会和前面反复 // 这样配置的话超过页面显示的内容会反复出现 - (UITableViewCell *)tableView: ...

  10. Unity3d 通过协程来实现文件的全部加载后执行

    相信大家会经常遇到在游戏中需要WWW从本地或者服务器上获取数据,而我们通常容易会犯下面这种个错误:当数据较少或者网速较好时程序运行正常.而当数据较大或者网速不好时程序会出错误.比如卡住. 所以我们要使 ...