文档章节

javascript中this值的引用

JavaSon712
 JavaSon712
发布于 2017/09/10 12:34
字数 655
阅读 11
收藏 0
点赞 0
评论 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
博文 120
码字总数 23136
作品 0
延安
程序员
JavaScript 内存机制(前端同学进阶必备)

简介 每种编程语言都有它的内存管理机制,比如简单的C有低级的内存管理基元,像,。同样我们在学习JavaScript的时候,很有必要了解JavaScript的内存管理机制。 JavaScript的内存管理机制是:内...

梁音 ⋅ 06/01 ⋅ 0

JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒 ⋅ 04/28 ⋅ 0

将一个前端项目改写为chromo插件(一)

编写第一个chrome插件? 编写chrome插件完全就是前端知识加上一些专门的知识。 假设文件夹下有文件 嗯,现在看来他只是普通的html,其实,你只要在当前文件夹下加上文件,chrome浏览器就可以把...

saltfish666 ⋅ 05/27 ⋅ 0

再谈 load 与 DOMContentLoaded

本文首发在github,感兴趣请点击此处 window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了,相信大家在刚入门时,见的最多的可能就是 load 事件了。load 事件接触多了,大家就会接触...

lucefer ⋅ 昨天 ⋅ 0

Java的==、equals和JavaScript的===、==比较

之前QQ群里有人问过这样一个问题——Java中有===吗,我想了想,没有,会问这个问题,那他肯定学过JavaScript,毕竟===就是JavaScript里面的,于是,我说——Java中的==就相当于JavaScript中的...

Mthinkway ⋅ 2017/11/12 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JS 底蕴之 变量、作用域和垃圾回收

基本类型和引用类型 在 JavaScript 中,数据类型可分为基本类型和引用类型, 基本类型有六种:Null,Undefined,String,Boolean,Number,Symbol; 而引用类型就是传说中的 Object 了。 其中...

Fly_001 ⋅ 05/23 ⋅ 0

Node.js Event Loop与浏览器 Event Loop(事件环)

要理解Event Loop首先要学习几个概念,下面就通过这些概念来一步步解析Event Loop 一:进程与线程 进程是操作系统分配资源和调度任务的基本单位,线程是建立在进程上的一次程序运行单位,一个...

张文梦 ⋅ 06/07 ⋅ 0

由js数组类型判断触发的浪漫思绪

一、前言 众所周知,js是门“动态”、“弱类型”编程语言,这意味着在js中可以很任性的定义变量,任性的同时也意味着需常在开发中对变量做类型判断,曾几何时,对数组变量的类型的判断是件很...

hanmin ⋅ 06/08 ⋅ 0

【译】为什么需要在 React 类组件中为事件处理程序绑定 this

原文地址:This is why we need to bind event handlers in Class Components in React 原文作者:Saurabh Misra 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:whu...

whuzxq ⋅ 05/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 7分钟前 ⋅ 0

MySQL 内核深度优化

MYSQL数据库适用场景广泛,相较于Oracle、DB2性价比更高,Web网站、日志系统、数据仓库等场景都有MYSQL用武之地,但是也存在对于事务性支持不太好(MySQL 5.5版本开始默认引擎才是InnoDB事务...

OSC_cnhwTY ⋅ 14分钟前 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 16分钟前 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 24分钟前 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 25分钟前 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 54分钟前 ⋅ 0

Linux(CentOS)下配置php运行环境及nginx解析php

【part1:搭建php环境】 1.选在自己需要安装的安装包版本,wget命令下载到服务器响应目录 http://php.net/releases/ 2.解压安装包 tar zxf php-x.x.x 3.cd到解压目录执行如下操作 cd ../php-...

硅谷课堂 ⋅ 今天 ⋅ 0

Nginx服务架构初探(四):nginx服务器的rewrite功能

nginx服务器的rewrite功能 1.nginx后端服务器组的配置 1>upstream name {…} name是给服务器组限的组名 2>server address [parameters]; address为服务器地址 parame......

余温灬未存 ⋅ 今天 ⋅ 0

layer.prompt使文本框为空的情况下也能点击确定

最近一直在使用layui,但是用到弹出层layer.prompt时,如果文本框是空的话点击确定没有反应,不能向下执行。 但是我又需要空值,看看我原来的代码。 123456789 layer.prompt...

孟飞阳 ⋅ 今天 ⋅ 0

Linux普通文件压缩工具gzip、Bzip2、xz

第六章 文件压缩和打包 6.1 压缩打包介绍 Linux环境常见压缩文件类型: .zip,.gz,.bz2,.xz, .tar.gz,.tar.bz2,.tar.xz 压缩打包的目的 方便文件传输 节省磁盘空间 减少传输花费的时间 ...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部