js中this的深入研究
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的深入研究的更多相关文章
- js中for循环的研究
转自:http://blog.csdn.net/lushuaiyin/article/details/8541500 <html> <body> <b><ce ...
- js中new构造函数的研究
<javascript高级编程>里对new操作符的解释: new操作符会让构造函数产生如下变化: 1. 创建一个新对象: 2. 将构造函数的作用域赋给新对象(因此t ...
- 研究分析JS中的三种逻辑语句
JS中的三种逻辑语句:顺序.分支和循环语句. 一.顺序语句 代码规范如下:1. <script type="text/javascript"> var a = 10; ...
- 对Node.js 中的依赖管理的研究-----------------引用
nodejs依赖: dependencies devDependencies peerDependencies bundledDependencies optionalDependenc ...
- 深入研究js中的位运算及用法
什么是位运算? 位运算是在数字底层(即表示数字的 32 个数位)进行运算的.由于位运算是低级的运算操作,所以速度往往也是最快的(相对其它运算如加减乘除来说),并且借助位运算有时我们还能实现更简单的程序 ...
- js中几种实用的跨域方法原理详解(转)
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
- 由项目浅谈JS中MVVM模式
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1. 背景 最近项目原因使用了durandal.js和knock ...
- 三维空间旋转和Three.JS中的实现
三维空间中主要有两种几何变换,一种是位置的变换,位置变换和二维空间的是一样的.假设一点P(X1,Y1,Z1) 移动到Q(X2,Y2,Z2)只要简单的让P点的坐标值加上偏移值就可以了.但是三维空间的旋转 ...
- js中各种跨域问题实战小结(一)
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
随机推荐
- mahout算法源码分析之Collaborative Filtering with ALS-WR 并行思路
Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. mahout算法源码分析之Collaborative Filtering with ALS-WR 这个算 ...
- 关于微信浏览不能URL传参,URL中的问号被删除
关于微信浏览不能URL传参,URL中的问号被删除. 尼玛难道没有人遇到过这个问题?看了微信支付SDK3.0的代码,看到urlencode 看到了几次.实际上 在微信浏览器下 header('locat ...
- Garbage
垃圾回收 http://journal.stuffwithstuff.com/2013/12/08/babys-first-garbage-collector/ http://blog.jobbole ...
- The EF 6.x DbContextGenerator templates are not available for VS2010
问题描述:采用VS2010.MVC3.EF6.1.1,并使用Model first的方式建立数据模型,创建了edmx文件.在edmx文件设计界面上,通过点选鼠标右键,Generate Database ...
- NET Core开发-使用Nancy框架
NET Core开发-使用Nancy框架 Nancy简介 Nancy是一个轻量级的独立的框架,下面是官网的一些介绍: Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET ...
- Qt Style Sheet实践(一):按钮及关联菜单(24K纯开源,一共四篇)
导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...
- 排序算法 - 快速排序(Quick Sort)
算法思想 快速排序是C.R.A.Hoare于1962年提出的一种划分交换排序.它采用了一种分治的策略,通常称其为分治法(Divide-and-ConquerMethod). (1) 分治法的基本思想 ...
- cocos2d-x 3.1 集成 云风pbc
cocos2d-x 3.x版本号变动比較大,从改用cmake管理整个项目,到使用python集成一体化的项目工具. 这些都是我喜欢的.我能够非常easy的在我的ubuntu上面搭建好开发环境,并且根本 ...
- ORA-02396: exceeded maximum idle time, please connect again的原因
一般为了防止过多活动的session占用资源,可以对允许连接到数据库的session个数,已连接到数据库的session空闲时间等进行限制(当然也可以对尝试连接次数等其它很多内容进行限制).方式就是可 ...
- 关于jq操作table下多个type=radio的input的选中
假如有2个table: <table id="table1" border="0"> <tr> <td><input ...