实例浅析js的this


Posted in Javascript onDecember 11, 2016

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 相关文章推荐
javascript获取元素CSS样式代码示例
Nov 28 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
解析js如何获取css样式
Dec 11 #Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 #Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 #Javascript
JS产生随机数的用法小结
Dec 10 #Javascript
基于JavaScript实现随机颜色输入框
Dec 10 #Javascript
BootStrap中
Dec 10 #Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 #Javascript
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
PHP提取中文首字母
2008/04/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
你必须知道的Javascript知识点之"单线程事件驱动"的使用
2013/04/23 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python通过future处理并发问题
2017/10/17 Python
python中kmeans聚类实现代码
2018/02/23 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
有机童装:Toby Tiger
2018/05/23 全球购物
2014年销售经理工作总结
2014/12/01 职场文书
成本会计岗位职责
2015/02/03 职场文书
大学副班长竞选稿
2015/11/21 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS