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

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

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

需要注意的几点:

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

 function ftn01(){
console.log(this);//window
function ftn02(){
console.log(this);//window
}
ftn02();
}
ftn01();

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

var f3=function(){
console.log(this);//window
var f4=function(){
console.log(this);//window
};
f4();
};
f3();

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

   var obj = {
name:"sharpxiajun",
job:"Software",
show:function(){
console.log("Name:" + this.name + ";Job:" + this.job);
console.log(this);// Object { name="sharpxiajun", job="Software", show=function()}
}
};
var otherObj = new Object();
otherObj.name = "xtq";
otherObj.job = "good";
otherObj.show = function(){
console.log("Name:" + this.name + ";Job:" + this.job);
console.log(this);// Object { name="xtq", job="good", show=function()}
};
obj.show();//Name:sharpxiajun;Job:Software
otherObj.show();//Name:xtq;Job:good

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

  function Person(name,sex,age,job){
this.name = name;
this.sex = sex;
this.age = age;
this.job = job;
this.showPerson = function(){
console.log("姓名:" + this.name);
console.log("性别:" + this.sex);
console.log("年龄:" + this.age);
console.log("工作:" + this.job);
console.log(this);// Person { name="马云", sex="男", age=46, 更多...}
}
}
var person = new Person("马云", "男", 46, "董事长");
person.showPerson();

new操作符的解释

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

  1.       创建一个新对象;

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

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

  4.       返回新对象

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

  var name = "sharpxiajun";
function ftn(name){
console.log(name);
console.log(this.name);
console.log(this);
}
ftn("101");
var obj = {
name:"xtq"
};
ftn.call(obj,"102");
/*
* 结果如下所示:
*101
T002.html (第 73 行)
sharpxiajun
T002.html (第 74 行)
Window T002.html
T002.html (第 75 行)
102
T002.html (第 73 行)
xtq
T002.html (第 74 行)
Object { name="xtq"}
* */

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

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

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

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

var obj={};
obj.f=function(){
console.log(this);
};
obj.f();
function f2(f){
f();
}
f2(obj.f);
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. 通过springmvc的RequestMapping的headers属性的使用

    直接上图: springmvc中可以通过@RequestMapping注解折配置headers属性,也就是通过headers属性来配置请求头信息,从而通过这个属性值来映射请求,因为不同浏览器的Acce ...

  2. 关于CSS动画几点要注意的地方

    关于CSS动画几点要注意的地方 js操作transition无效果 先看这个demo以及stackoverflow的问题 http://jsfiddle.net/ThinkingStiff/QNnnQ ...

  3. qcow2、raw、vmdk等镜像格式

    转自 http://www.prajnagarden.com/?p=248 http://blog.csdn.net/starshine/article/details/8179483 转者言:对pr ...

  4. When Is Cheryl's Birthday

    大早上起来逛微博,看见@西瓜大丸子汤Po的一个逻辑题,遂点开看之... 原文链接:http://nbviewer.ipython.org/url/norvig.com/ipython/Cheryl.i ...

  5. cpu亲和力总结taskset和setcpu及其他相关

    一:taskset -- 获取或指定进程运行的CPU. man taskset出现 CPU affinity is a scheduler property that "bonds" ...

  6. Android企业级程序完全退出的解决方案【转】

    http://blog.csdn.net/wangjinyu501/article/details/8763552 问题描述 在平常开发的过程中可以发现,很多开发者对于程序的退出都没有去认真的解决.一 ...

  7. IOS学习之蓝牙4.0

    1建立中心角色 1 2 3 #import <CoreBluetooth/CoreBluetooth.h>  CBCentralManager *manager;  manager = [ ...

  8. Java中布尔类型操作符&=,|=与^=的使用

    今天在对同事的代码进行code review的时候,见到一个比较好玩的写法.“flag &= false:”,乍一看,还感觉他写错了,但是程序可以正常运行,赶紧去百度,看一下这个写法到底是怎么 ...

  9. ArrayList-VS-LinkedList

    ArrayList 是List接口的实现类:底层的数据结构是数组,而LinkedList底层数据结构是双向循环链表. 所以在查询时ArrayList效率高,增删时LinkedList高.由于List中 ...

  10. 【转】OpenCV与CxImage转换(IplImage)、IplImage QImage Mat 格式互转

    最近由于在项目中用到了Opencv库,但是为了更好的显示图像还是使用了Cximage库,它可以快捷地存取.显示.转换各种图像.Opencv库用于高级图像处理与识别.为了使Cximage图像与Openc ...