深究js中无所不在的this

总是感觉js中的this无处不在却又琢磨不透,虽然他的调用原理很简单,就是跟调用形式相关,但是调用方式多种多样,海底针啊..试图用各种方法去诠释,有时候也说不出个所以然..今天干脆耐下心来实际体验下,尝试下,试图根据实际情况自己理解一下this的行为方式,欢迎交流。

----------------------------------------------->函数相关的this<-----------------------------------------------------

先看一个最最简单的例子:

this当然会undefined,因为this的指向实际是指向它的调用的。

下面还有两个特殊的情况,闭包中this的表现:

因为闭包立即执行,这相当于在全局的作用于下调用了函数,于是乎,可以看到,他就是指向了window了。

可是.......strict模式下的:

这就是闭包中使用严格模式的后遗症,它不让this指向全局作用域了呢。

这有个总结javascript中‘use strict’的资料,总结的挺好听明白的:http://www.web-tinker.com/article/20125.html

那么说了this是指向他的调用了,到底是怎么指向的呢,我们试试几个小例子,看看它的行为:

1.最普通的:

看吧,刚才还undefined呢,调用一下this就指向调用它的作用域了喔。

这个更印证了this指向调用他的作用域。

2.那我现在把函数嵌套一下试试看呢:

还是window喔,这里this是属于window喔,好像说也说不清楚,自己写写试试想想,体会体会喔。

3.上面基本上都是函数调用时候的情况,那下面我试一下函数引用,来看看会是什么样子呢,稍稍复杂些:

上面事实证明,引用函数是可以改变函数的执行作用域的,但是像之前的,调用函数是不会改变函数的执行作用域的呢:

事实证明条用函数是不会改变函数的执行作用域的(注意上面两段代码中me:后面的使用方式)。

------------------------------------------------>构造函数中的this<----------------------------------------------------

1.下面我们先看看js中简单封装过程中用到的this:

上面实现的并不是严格的封装,但是从中我们可以看到this的作用。

2.别急,肯定还是有点有意思的事情的:

这里通过new创建了一个新的对象呢,并将这个对象通过this传入到了构造器中,这也就是为什么b的作用域跑到了a{}里面。

这是为什么呢?? 我们来来看new构造函数这种用法是怎么回事吧:

简单来看:

其实new的作用就是使this指向一个新建的对象,然后return this。

实际它的运行情况是这样的:

1 function Person (){
2     // var obj = new Object();
3     // this = obj;
4     alert(this);     // new 出来的 Person 对象
5     // return this;
6 }
7 var person = new Person(); 

实际上js的实现是这样的:

1 function newOperator(Constr, args) {
2     var thisValue = Object.create(Constr.prototype); // (1)
3     var result = Constr.apply(thisValue, args);
4     if (typeof result === ‘object‘ && result !== null) {
5         return result; // (2)
6     }
7     return thisValue;
8 }

在网上看资料的时候看到的,链接在这里:http://speakingjs.com/es5/ch17.html#_the_new_operator_implemented_in_javascript

--------------------------------------------->call和apply对this的影响 <------------------------------------------------------------

看例子:

这里this就指向String了。

上面这个例子就通过call(),把x,y,传到了函数中。

------------------------------------------------------->定时器(setTimeout,setInterval)中的this<--------------------------------------------------------------

先看最简单的:

这里面this就是指向window。

实际上因为setTimeout()和setInterval()发放根本就是window的,所以当然指向window了。

更加印证了上面所说的。

--------------------------------------------------------------->eval()中的this<---------------------------------------------------------------------------

直接调用eval():

直接调用eval()的话,this指向当前作用域的。(‘use strict‘不用也是一样的)

下面展示了不直接调用的情况:

------------------------------------------------------->复杂情况中的this<--------------------------------------------------------

在查找资料的过程中,发现了一个总结的挺好的,复杂情况下this的优先级,贴过来收藏:

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

注:不管如何修改this,this只会影响一层

例:

后面要是在发现别的this相关,再补充咯.......

时间: 10-16

深究js中无所不在的this的相关文章

JS中的闭包(closure)

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.下面就是我的学习笔记,对于Javascript初学者应该是很有用的. 一.什么是闭包 JS中,在函数内部可以读取函数外部的变量 function outer(){ var localVal = 30; return localVal; } outer();//30 但,在函数外部自然无法读取函数内的局部变量 function outer(){ var localVal = 30; } aler

js中获取时间new date()的用法

js中获取时间new date()的用法 获取时间:   var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,0代表1月) 4 myDate.getDate(); //获取当前日(1-31) 5 myDate.getDay();

JS中的运算符&amp;JS中的分支结构

一.JS中的运算符 1.算术运算(单目运算符) + 加.- 减.* 乘./ 除.% 取余.++ 自增.-- 自减 >>> +:有两种作用,连接字符串/加法运算.当+两边全为数字时,进行加法运算: 当+两边有任意一边为字符串时,起连接字符串的作用,连接之后的结果为字符串 除+外,其余符号运算时,会先尝试将左右变量用Number函数转为数字 >>> /: 结果会保留小数点 >>> ++: 自增运算符,将变量在原有基础上+1: --: 自减运算符,将变量在原

Js中的数据属性和访问器属性

Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性包含四个特性,分别是: configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true enumerable:表示能否通过for-in循环返回属性 writable:表示能否修改属性的值 value:包含该属性的数据值.默

在Node.js中使用RabbitMQ系列二 任务队列

在上一篇文章在Node.js中使用RabbitMQ系列一 Hello world我有使用一个任务队列,不过当时的场景是将消息发送给一个消费者,本篇文章我将讨论有多个消费者的场景. 其实,任务队列最核心解决的问题是避免立即处理那些耗时的任务,也就是避免请求-响应的这种同步模式.取而代之的是我们通过调度算法,让这些耗时的任务之后再执行,也就是采用异步的模式.我们需要将一条消息封装成一个任务,并且将它添加到任务队列里面.后台会运行多个工作进程(worker process),通过调度算法,将队列里的任

js 中arguments的应用

在js中每个函数类都有一个Arguments对象实例arguments,.首先他不是一个数组,可以说算一个伪数组,但是用数组的索引形式也能获取到他的值,如 let len = arguments.length;表示函数参数的个数 arguments[0]表示第一个参数 在函数中使用它的好处就是这个函数在多处调用且参数有不是必须传递的,这样可以利用arguments来处理,解决了不需要的参数也要传递的问题 在实际应用中分装的函数中使用了一下,有不对的和需要改进的地方,还请大家多多指教,一起学习 e

js中,实现css格式的改变

js中,实现属性值的改变 (1)prop属性实现,html中标签的class属性值发生改变: 语法:$(元素标识).prop("class",类属性值); 例子:$("#num_"+currentId).prop("class","no-selected"); 类似的改变class属性: $("#index_" + index).removeClass("current"); $(&qu

JS中的循环结构、循环嵌套以及函数介绍

[循环结构的步骤]    *①声明循环变量    *②判断循环条件    *③执行循环体(while的{}中的所有代码)操作     *④更新循环变量    *     * 然后,循环执行②③④    *     *     * [JS中循环条件支持的数据类型]    * ①boolean:true 真     false   假    * ②string: 非空字符串为真       空字符串为假    * ③null/NaN/undefined:  全为假    * ④object:全为真 

关于js中window.location.href,location.href,parent.location.href,top.location.href的用法

关于js中window.location.href,location.href,parent.location.href,top.location.href的用法 "window.location.href"."location.href"是本页面跳转. "parent.location.href" 是上一层页面跳转. "top.location.href" 是最外层的页面跳转. 举例说明: 如果A,B,C,D都是html,D

js中的循环语句

js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) {    //statements;} var a=1,b=0; while(a<=1000){ if(a%2==0){ if(b%20==0) { document.write("<br>第"+parseInt(b/20+1)+"行偶数"); } document.write(a+"&nbsp"