简单理解js的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的定义就是:谁调用它它就指向谁。
简单理解js的this的更多相关文章
- 简单理解js的prototype属性
在进入正文之前,我得先说说我认识js的prototype这个东西的曲折过程. 百度js的prototype的文章,先看看,W3School关于prototype的介绍: 你觉得这概念适合定义js的pr ...
- 简单理解js闭包
什么是闭包?我们先来看一段代码: function a() { var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a ...
- 如何简单理解js中this的指向
前序 每个人学js都会被this指向这个东西搞得很蒙,那就是this的指向问题.首先,我们要明白 this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上thi ...
- 简单理解js回调函数
前言 其实回调函数简单通俗点就是当有a和b两个函数,当a作为参数传给b,并在b中执行,这时a就是一个回调(callback)函数,如果a是一个匿名函数,则为匿名回调函数那下面们来通过一个实例来具体解释 ...
- Js 职责链模式 简单理解
js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...
- 从一个简单例子来理解js引用类型指针的工作方式
<script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...
- 简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
- 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制
[原创]分布式之数据库和缓存双写一致性方案解析(三) 正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...
- JS闭包的简单理解。优缺点以及垃圾回收机制
闭包是什么? ·了解闭包首先了解js的‘链式作用域’结构,对象可以一级一级的向上查找父对象的变量,所以父对象的变量对子对象可见,反之不成立:所以都可以访问全局变量 ·为了解决函数外部无法访问函数内局部 ...
随机推荐
- win7 打印机共享
1.在工具->文件夹选项->查看,将"使用简单文件共享"前面的勾勾去掉2.在控制面板->用户帐号,将guest帐户启用3.运行"gpedit.msc&q ...
- 【Java EE 学习 16 上】【dbcp数据库连接池】【c3p0数据库连接池】
一.回顾之前使用的动态代理的方式实现的数据库连接池: 代码: package day16.utils; import java.io.IOException; import java.lang.ref ...
- ENode 1.0 - Saga的思想与实现
开源地址:https://github.com/tangxuehua/enode 因为enode框架的思想是,一次修改只能新建或修改一个聚合根:那么,如果一个用户请求要涉及多个聚合根的新建或修改该怎么 ...
- Smooth Mouse
一款免费软件,使mac可以做到和 Windows 下的鼠标加速度的相同算法,实现同样 win 的鼠标操控感,也可以实现鼠标0加速度.
- Memcached vs Redis
Memcached和Redis哪一个能有更好的表现? Redis可以看作是Memcached的超集,这让Redis不仅仅可以用来当缓存,也可以作为实际的数据存储. 强大的数据结构以及操作命令. 默认持 ...
- [自动运维]oracle自动备份
数据是应用的核心部分,程序坏了换台机器重新发布就可以,但数据一旦丢失,造成的损失将不可挽回,程序发布到生产后,数据的备份便显得尤为重要,由于不一定所有的服务均有资金完成高级的备份如RAC和DG,在我们 ...
- wenbenfenlei
ICTCLAS: 该分词系统的主要思想是先通过CHMM(层叠形马尔可夫模型)进行分词,通过分层,既增加了分词的准确性,又保证了分词的效率.基本思路是:先进行原子切分,然后在此基础上进行N-最短路径粗切 ...
- 将一个Asp.Net网站改为MVC
背景: 网站已经开发的一部分 主要是Web服务和API 现在要做一些给人看的页面 转载请注明出处 http://www.cnblogs.com/zaiyuzhong/p/add-mvc-in-w ...
- NOIP2014 uoj20解方程 数论(同余)
又是数论题 Q&A Q:你TM做数论上瘾了吗 A:没办法我数论太差了,得多练(shui)啊 题意 题目描述 已知多项式方程: a0+a1x+a2x^2+..+anx^n=0 求这个方程在[1, ...
- Javascript for循环指定锚点跳转
在某些使用多层嵌套for循环的场合里 会用到break和continue来中途跳转循环 break是跳出整个循环 continue是跳出当前循环,继续下次循环 而多层for循环嵌套里使用这两个关键字默 ...