浅谈javascript中的this
js的this是什么?关于这个东西,博客园里面有太多的解释了,不过,本人看了一下,感觉对this解释的有点复杂了,因此,本人在此给this一个简单易于理解的定义。
this其实是js的一个对象,至于是什么对象呢?很简单,this这个对象就是:谁调用它它就指向谁。
关于这一点,其实,博客园的文章已经说明了很多了,有的文章也说到了点子上,只不过,他们解释的还是有点模糊,这里,我给大家做几个简单的对照实验,根据这几个对照实验的结果,大家应该很清楚了。
希望大家根据我的代码重复实现下面的实验。
首先,我们来看下面的代码:
//创建一个局部对象a var a = { user:'小东', getName:function(){ return this.user;//返回当前对象的user属性值 } } //调用a的getName方法 alert(a.getName());
上面的代码会输出什么呢?没错,这里alert的是・・・・小东・・・・,很简单,这里是在a对象的内部调用this嘛,肯定是a对象调用this,所以根据・・・・・・・・・・・谁调用this它就指向谁这个定义・・・・・・・・・・・,那么这里的this指向的就是a对象。
接下来,我们再给上面的代码添加一行:
//创建一个局部对象a var a = { user:'小东', getName:function(){ return this.user;//返回当前对象的user属性值 } } //调用a的getName方法 alert(a.getName()); //把局部对象的属性函数赋值给外面的变量out var out = a.getName; //调用out函数 alert(out());
根据上面的实验结果,我们知道直接调用a.getName输出的是小东,对吧?那么,我们把a.getName这个属性函数赋值给out变量之后,再来调用out会输出什么呢?结果是:undefined的。为什么会是undefined的?请思考一会。要是你明白这里为什么输出的是undefined的原因,那么,我想你对this的理解已经很清楚了。但是,如果,你对本文感兴趣,你还是可以继续看下去的。
这里,我先不解释为什么在外面引用a对象的getName函数却得不到a对象里面的值,我们转过弯来讲,请看下面的代码(其实和上面的代码是差不多的,呵呵):
//创建一个局部对象a var a = { user:'小东', getName:function(){ return 1;//这里我们不返回this,而是返回1 } } //调用a的getName方法 alert(a.getName()); //把局部对象的属性函数赋值给外面的变量out var out = a.getName; //调用out函数 alert(out());
上面的代码很简单吧,这里,我们不在a对象的getName属性函数里面返回a对象的东西,而是返回・・・1・・・・・,那么,此刻你再调用out函数,你觉得会输出什么呢?没错,你得到的不再是・・・・undefined・・・・的,而是一个实实在在的数字・・・・1・・・・・・。这就奇怪了,是吧?当a.getName函数返回的是a对象里面的user属性时,我们用out来引用a.getName函数时,我们得到的是undefined的结果,而当a.getName函数返回的是1时,我们再用out引用a.getName函数却可以得到a.getName里面的东西?这是怎么回事呢?
原因很简单,当我们调用外面的全局变量out的时候,this它指向的应该out的对象,而不是a对象,而out的对象是谁呢?我们应该知道,js在全局中声明的变量的对象是window对象吧。既然调用out时,this指向的是window,那么函数out=a.getName=function(){return this.user;}里面的this.user我们应该写出window.user对吧?但是,此刻,全局变量中有没有一个window.user的属性值呢?没有吧?既然没有window.user这个属性值,那么我们alert(window.user)肯定是undefined啦。为了证明这一点,我们来做下面的实验:
//创建一个局部对象a var a = { user:'小东', getName:function(){ return this.user;//返回当前对象的user属性值 } } //调用a的getName方法 alert(a.getName()); //把局部对象的属性函数赋值给外面的变量out var out = a.getName; //我们增加一个window.user的全局属性,看看再次调用out函数会输出什么 var window.user='window"s username'; //调用out函数 alert(out());
此刻,当你再执行上面的代码时,你会发现,out函数输出的不再是undefined,而是window's username,这证明了什么?证明了当out调用this时,this确实指向了window,同时也证明了,this确实是:谁调用它它就指向谁。
如果你不理解js的全局变量,那么,我们可以把上面的代码换成下面的代码再来调用out,你就更加明白了:
//创建一个局部对象a var a = { user:'小东', getName:function(){ return this.user;//返回当前对象的user属性值 } } //调用a的getName方法 alert(a.getName()); //把局部对象的属性函数赋值给外面的变量out var out = a.getName; //此刻,我们增加一个user的变量,看看再次调用out函数会输出什么 var user='window"s username'; //调用out函数 alert(out());
这里,我们不再启用window这个对象,对于外面的属性和函数,我们一律都用var 来声明,既然都用var来声明,那么他们应该都指向同一个对象吧?此刻,你再执行上面的代码,也就是执行out函数,依然可以alert出window's username。行文到此,this的定义已经再明白不过了,它就是:谁调用它它就指向谁。
this不难理解,难以理解的是,你要找到那个调用它的・・・・・・・・对象・・・・・,只有找到调用this的对象,你才知道this到底指向谁,因为:this的定义就是:谁调用它它就指向谁。
以上是浅谈javascript中的this 的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

JavaScript是一种广泛应用于Web开发的编程语言,而WebSocket则是一种用于实时通信的网络协议。结合二者的强大功能,我们可以打造一个高效的实时图像处理系统。本文将介绍如何利用JavaScript和WebSocket来实现这个系统,并提供具体的代码示例。首先,我们需要明确实时图像处理系统的需求和目标。假设我们有一个摄像头设备,可以采集实时的图像数

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务
