文档章节

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
博文 142
码字总数 24143
作品 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能做什么?我所了解的 ⑴在HTML网页中放入动态文本 ⑵响应用户在使用网页时产生的事件 ⑶检...

睡觉谁教谁叫呢
2014/02/18
0
0
【摘】【编写可维护的JavaScript】判断javascript中的类型

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

jackzlz
2015/08/23
0
0
javascript深入理解js闭包

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

Yamazaki
2012/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
0
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
18
4
centos7安装redis及开机启动

配置编译环境: sudo yum install gcc-c++ 下载源码: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压源码: tar -zxvf redis-3.2.8.tar.gz 进入到解压目录: cd redis-3......

hotsmile
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部