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中的同源策略 ...
随机推荐
- win7系统下连接使用mac 蓝牙键盘(Apple Wireless Keyborad)
这几天买了一个apple wireless keyborad 玩玩,主要是给孩子买了一个ipad 搭配上wireless keyborad让她玩app足够了,就当一部电脑用吧. 看起来挺精致的,可以了 ...
- expect交互式自动化脚本
一 什么是expect 1 Expect is a tool for automating interactive applications such as telnet, ftp, passwd, ...
- python学习【一】基础入门
Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- SQL Server 镜像
sql server 2005镜像制作 以下是操作步骤:-- =========================================== -- 无论是主体服务器.镜像服务器, 还是见证服务 ...
- DGIM
http://blog.liulixiang.info/2011/04/05/dgim%E7%AE%97%E6%B3%95%EF%BC%9A%E4%BC%B0%E8%AE%A1%E6%BB%91%E5 ...
- C功底挑战Java菜鸟入门概念干货(一)
一.认识Java 1.Java 程序比较特殊,它必须先经过编译,然后再利用解释的方式来运行. 2.Byte-codes 最大的好处是——可越平台运行,可让“一次编写,处处运行”成为可能. 3.使用 ...
- Java学习——Ubuntu下jdk的安装以及Java环境的配置
第一步.下载 到官网下载jdk,在Java SE Development Kit 7uXX里面,把Accept License Agreement 打勾,这样才能下载jdk,然后我们选择对应的Ubun ...
- 向前辈致敬 strspn
把8位的CHAR型数据分解为:前5位和后3位,这样2^5 = 32个CHAR型数+值就可表示所有的CHAR型数据 这样做的好处:在给出子串后,不用比较256次,最多比较32次即可判断出是否一个数在子串 ...
- js中this指向问题
1.在全局范围内使用this的时候 它指向的是全局对象 this Window {top: Window, window: Window, location: Location, external: ...
- SQL Server 2012学习笔记 1 命令行安装
setup.exe /Q /IACCEPTSQLSERVERLICENSETERMS /ACTION=install /PID=748RB-X4T6B-MRM7V-RTVFF-CHC8H /FEATU ...