文档章节

javascript中this值的引用

JavaSon712
 JavaSon712
发布于 2017/09/10 12:34
字数 655
阅读 11
收藏 0

严格模式下

1.全局作用域指向当前Window

2.函数内部的this,运行在全局作用域下,this值为undefined

3.立即执行函数的 this值为undefined

 			"use strict"
 			var sb='sb';
 			
 			//全局作用下的this
 			console.log(this);//Window
 			
 			function sayHello(){
 					console.log('function');
 					//console.log(this);//undefined
 				}
 				
 				//运行在全局作用域下的函数
 				sayHello();
 				
 				
 				//匿名立即执行函数
 				(function(){
 					console.log('anonymous');
 					console.log(this);//undefined
 					})();

在非严格模式下

在该模式下**this** 引用总是指向一个值,该值总是指向持有**this**的 **Funtion或者Object **所运行的作用域

 	 var firstName="Peter",
 	  lastName='Ally';
 	  
 	  function showFullName(){
 	  		//持有this的Funtion showFullName运行在全局作用域下,所以this指向Window
 	  		//输出PeterAlly
 	  		console.log(this.firstName+""+this.lastName);
 	  	}	
 	  	
 	  	showFullName();	
 	  	
 	  	var person={
 	  				firstName:"Penelope",
 	  				lastName:'Barrymore',
 	  				showFullName:function(){
 	  					//持有this的Funtion showFullName运行在person作用域下,所以this指向person
 	  					//输出PenelopeBarrymore
 	  					console.log(this.firstName+""+this.lastName);
 	  					}
 	  		}
 	  		
 	  		person.showFullName();

一些特殊情况

1.我们可以利用**Bind ()**, Apply (), **Call ()重新指定this**引用

 	  	var person={
 	  				firstName:"Penelope",
 	  				lastName:'Barrymore',
 	  				showFullName:function(){
 	  					//持有this的Funtion showFullName运行在person作用域下,所以this指向person
 	  					//输出PenelopeBarrymore
 	  					console.log(this.firstName+""+this.lastName);
 	  					}
 	  		}
 	  		
 	  		//person.showFullName();
 	  		
 	  		var anotherPerson={
 	  				firstName:'Rohit',
 	  				lastName:'Khan'
 	  			}
 	  			
 	  			//重新指定this为anotherPerson
 	  			//输出为RohitKhan
 	  			person.showFullName.apply(anotherPerson);

2.回调函数中的**this**

 	  			var user={
 	  				data:[{
 	  					name:"T.Woods",
 	  					age:37
 	  				},{
 	  					name:"P. Mickelson",
 	  					age:43
 	  					}],
 	  				clickHandler:function(event){
 	  						 var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1​
 	  						 console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
 	  					}
 	  				}
 	  				
 	  				 $ ("button").click (user.clickHandler); 

**buttonclick事件击发的时候this并不能访问到 user的属性data,因为此时的this**引用的是 **$ ("button")**对象

修正如下:

 $("button").click (user.clickHandler.bind (user));

3.闭包

 	  			var user={
 	  				tournament:"The Masters",
 	  				data:[{
 	  					name:"T.Woods",
 	  					age:37
 	  				},{
 	  					name:"P. Mickelson",
 	  					age:43
 	  					}],
 	  				clickHandler:function(event){
 	  						this.data.forEach(function(person){
 	  							//这是一个内部函数this不再指向user
 	  							//this只能被Function,Object自身访问
 	  								console.log ("What is This referring to? " + this); //[objectWindow]
 	  								console.log (person.name + " is playing at " + this.tournament);
 	  								 // T. Woods is playing at undefined​
 	  								 // P. Mickelson is playing at undefined​​
 	  							})
 	  					}
 	  				}
 	  				  user.clickHandler();

修正如下:

 	  				clickHandler:function(event){
 	  					var theUserObj = this;
 	  						this.data.forEach(function(person){
 	  							//这是一个内部函数this不再指向user
 	  							//this只能被Function,Object自身访问
 	  								console.log ("What is This referring to? " + this); //[objectWindow]
 	  								console.log (person.name + " is playing at " + theUserObj.tournament);
 	  								 // T. Woods is playing at undefined​
 	  								 // P. Mickelson is playing at undefined​​
 	  							})
 	  					}

在外部函数中定义一个变量保存**this,在闭包中通过访问这个变量访问外部的this**

4.将方法赋值给变量

var data=[{
 	  						name:"Samantha",
 	  						age:12
 	  					},{
 	  						name:"Alexis",
 	  						age:14
 	  						}];
 	  				
 	  			var user={
 	  				tournament:"The Masters",
 	  				data:[{
 	  					name:"T.Woods",
 	  					age:37
 	  				},{
 	  					name:"P. Mickelson",
 	  					age:43
 	  					}],
						showData:function(event){
								var randomNum = ((Math.random () * 2 | 0) + 1) - 1;
                                                         // random number between 0 and 1
								
                        console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
							}
 	  				}
 	  				
 	  				var showUserData = user.showData;
 	  				showUserData (); // Samantha 12 (from the global data array)​

最终输出的数据为全局变量中**data**的数据

修正如下:

var showUserData = user.showData.bind (user);

© 著作权归作者所有

共有 人打赏支持
JavaSon712
粉丝 10
博文 155
码字总数 26417
作品 0
延安
程序员
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
Javascript在网页页面加载时的执行顺序

原文:http://blog.csdn.net/kylinbl/article/details/6160587 操作HTML DOM文档的一个难题是,你的JavaScript代码可能在DOM完全载入之前运行,这会导致你的代码产生一些问题。页面加载时浏览...

樂天
2015/11/20
0
0
【摘】【编写可维护的JavaScript】判断javascript中的类型

判断javascript中的类型--编写维护的JavaScript 检测原始值 你希望一个值是字符串、数字、布尔值或undefined,最佳选择是使用typeof运算符 typeof运算符的独特之处在于,将其用于一个未声明的...

jackzlz
2015/08/23
0
0
JavaScript菜鸽子基础知识总结(一)

学习JavaScript有段时间了,尽管学的不怎么好。但我相信有志者,铁杵磨成针。呵呵呵~~ ①JavaScript能做什么?我所了解的 ⑴在HTML网页中放入动态文本 ⑵响应用户在使用网页时产生的事件 ⑶检...

睡觉谁教谁叫呢
2014/02/18
0
0
javascript深入理解js闭包

一、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量...

Yamazaki
2012/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

区块链100讲:盘点那些常用的加密算法原理

在开发过程中,常常用到各种加密方法和算法,本文总结了几种常用加密方法的原理。 1 对称加密 原理:加密和解密数据使用同一个密钥,适合对大量数据进行加解密 安全性:关键是密钥的保存方式...

HiBlock
12分钟前
0
0
zookeeper基本常识

一、Zookeeper基础知识 1 zookeeper是一个类似hdfs的树形文件结构,zookeeper可以用来保证数据在(zk)集群之间的数据的事务性一致。2 zookeeper有watch事件,是一次性触发的,当watch监视的数...

啃不动地大坚果
18分钟前
0
0
Forrester企业级容器平台权威排行出炉,小初创Rancher缘何成为领导者?

全球著名的调研机构Forrester Research近日发布了《The Forrester New Wave: Enterprise Container Platform Software Suites, Q4 2018》报告,对企业级容器平台(ECP)市场进行全面评估,希...

RancherLabs
21分钟前
0
0
【三 异步HTTP编程】 2. 流式HTTP响应

标准响应及Content-Length头 自HTTP1.1以来,服务器为了在一个链接中处理多个HTTP请求及响应,必须随response一起返回合适的Content-Length值。 默认情况下,对于简单请求你无需返回 Conten...

Landas
56分钟前
0
0
Java后端技术栈,到底如何深入学习?

Java,是现阶段中国互联网公司中,覆盖度最广的研发语言。有不少朋友问,如何深入学习Java后端技术栈,今天分享一个,互联网牛人整理出来的Java深入学习路线图,以及免费学习资料。 一 。性能...

别打我会飞
今天
1
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部