文档章节

javascript中this值的引用

JavaSon712
 JavaSon712
发布于 2017/09/10 12:34
字数 655
阅读 14
收藏 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
粉丝 11
博文 170
码字总数 28408
作品 0
延安
程序员
私信 提问
细说JavaScript数据类型及转换

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

开元中国2015
2015/07/13
0
0
前端进阶(第一期)-调用堆栈笔记

1-1 理解 Javascript 执行上下文和执行栈 原文地址 知识点有: JavaScript程序的内部执行机制; 理解执行上下文和执行栈; 理解以上知识点有助于理解JavaScript的提升机制、作用域和闭包 执行...

xszi
12/04
0
0
Javascript在网页页面加载时的执行顺序

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

樂天
2015/11/20
0
0
《JavaScript面向对象精要》之一:基本类型和引用类型

1.1 什么是类型 原始类型 保存为简单数据值。 引用类型 保存为对象,其本质是指向内存位置的引用。 为了让开发者能够把原始类型和引用类型按相同的方式处理,JavaScript 花费了很大的努力来保...

明易
前天
0
0
【摘】【编写可维护的JavaScript】判断javascript中的类型

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

jackzlz
2015/08/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

局域网共享文件读写的实现方式

首先是设置共享目录,支持用户和密码等权限控制 然后我们可以使用Windows资源管理器操作共享目录下的文件 这中间隐藏了资源管理器帮我们建立目录映射和连接的过程,如果设置了用户名和密码,...

夏至如沫
16分钟前
2
0
Elasticsearch安装与配置

一、Docker安装ES 开发模式 可以使用以下命令快速启动Elasticsearch以进行开发或测试: $ docker run -p 9200:9200 -p 9300:9300 -d --name es -e "discovery.type=single-node" docker.ela...

吴伟祥
22分钟前
1
0
移动页面滚动穿透解决方案(荐)

移动页面滚动穿透解决方法目前有多种解决方案,我介绍下几种方案: 解决方案1:阻止冒泡。 //关键代码$(".sliders,.modals").on("touchmove",function(event){    event.preventDefau...

壹峰
23分钟前
0
0
调用infura实现java项目调用智能合约

https://infura.io/dashboard 注册一个帐号 添加一个project 可选择主网或者其他网络,然后复制地址放进pom.xml中 复制智能合约地址复制到pom.xml中 复制任意一个帐号的private key到pom.xml...

八戒八戒八戒
30分钟前
3
0
vue+koa2+token 登录验证

https://segmentfault.com/a/1190000017379244?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly...

Js_Mei
33分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部