实例浅析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的定义就是:谁调用它它就指向谁。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • 几句话带你理解JS中的this、闭包、原型链

    原型链 所有对象都是基于Object.prototype,Object.prototype就是JavaScript的根对象,在Object.prototype中定义的方法都可以被其它对象访问到,当然也可以被重写了,所以直接在Object.prototype上调用的是原始功能的toString()方法,该方法会放回参数对象的内置属性[[class]]的值,这个值是个字符串,比如'[Object String]' 要理解原型链机制的话,首先得知道根本原因:JavaScript中的对象都有一个内置属性

  • 聊一聊JS中this的指向问题

    JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说. this的指向: 1.this 指的是调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁. 来看两个栗子: oBtn.onclick = function(){ alert(this); //oBtn } oBtn[i].onclick = fn

  • JavaScript中的this,call,apply使用及区别详解

    学习起因: 在之前的JavaScript学习中,this,call,apply总是让我感到迷惑,但是他们的运用又非常的广泛.遂专门花了一天,来弄懂JavaScript的this,call,apply. 中途参考的书籍也很多,以<JavaScript设计模式与开发实践>为主,<JavaScript高级程序设计>.<你不知道的JavaScript>为辅.这三本书对我理解this,call,apply都起了很大的帮助. this 首先,我们先讲述this. 在<Java

  • JavaScript中this的四个绑定规则总结

    前言 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅.所以这篇文章开始将介绍javascript中this的四个绑定规则,下面来一起看看吧. 绑定规则 1. 默认绑定 独立函数调用时,this 指向全局对象,如果使用严格模式,那么全局对象无法使用默认绑定, this绑定至 undefined. function foo() { console.log(this.a); } var a = 2; foo(); // 2 严格模式时: function fo

  • 老生常谈 js中this的指向

    在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1.函数调用模式 当一个函数不是一个对象的属性时,当作函数俩调用,这时函数内的this指向全局对象(大对数情况下是window) window.value=1; function getValue(){ console.log(this.value); } getValue();//输出1,此时的thi

  • 再次谈论Javascript中的this

    一直对Javascript中的this都有一种似是而非的感觉,今天突然感觉豁然开朗,特此记录一下. 咱们先看个栗子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>this的使用</title> <script type="text/javascript"> var Car,tesla; Car=functio

  • 学习掌握JavaScript中this的使用技巧

    tip 首先,我知道这篇文章很无聊,无非就是关于 js 中的 this,并且也已经有千千万万的文章写过这部分内容了:  但是,我还是想写一篇关于 js 中的 this 的文章,算是一个总结归纳吧:(大神们可以绕行看我的其他文章)  在 js 中,this 这个上下文总是变化莫测,很多时候出现 bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就 ok 了. 全局执行 首先,我们在全局环境中看看它的 this 是什么:  first. 浏览器: console.log(this); //

  • JavaScript中的this使用详解

    其实this是一个老生常谈的问题了.关于this的文章非常多,其实我本以为自己早弄明白了它,不过昨天在做项目的过程中,还是出现了一丝疑惑,想到大概之前在JavaScript weekly里收藏待看的一篇详解this的文章(后有链接,也附上了稀土上的中文译文)和另一篇一位前辈推荐的文章,就把它们看了看,对this的认识确实提升了一些. JavaScript 中的'this'是动态的,它在函数运行时被确定而非在函数声明时被确定.所有的函数都可以调用'this',这无关于该函数是否属于某个对象.关于t

  • 探索Javascript中this的奥秘

    前言: this 是 JavaScript 比较特殊的关键字,运用的地方之广,方式之灵活奠定了它的强大,但同时注定了它的难用 .自己刚开始学的时候被绕的很晕,为了彻底弄懂它查了很多资料.然后将自己学的东西整理了一下,以通俗易懂的方式表达出来,权当做学习笔记,同时也可以给有需要的童鞋做下参考^_^ 什么是this? this 关键字的含义是明确且具体的,即指代当前对象.即意味着这个 this 是在某种相对情况下才成立的. this 被分为三种情况:全局对象.当前对象或者任意对象;判断处于那种情况,

  • javascript this详细介绍

    this的值是在运行时确定的 JS中的this究竟代表什么,这是在程序运行时根据上下文环境确定,可以分为以下几种情况. 1. 全局作用域中的this 在全局作用域中,this指向window对象. console.log(this);//指向window对象 this.x = 5//在全局作用域内创建一个x //与this.x = 5的等价情况: //var x = 5; //x = 5; 在全局作用域中执行var x=5,其实是为window对象创建一个属性x,并令其等于5. 若定义变量时不加

  • JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

  • JavaScript的this关键字的理解

    概念性的概述this 当一个函数创建后,一个关键字this就随之(在后台)创建,它链接到一个对象,而函数正是在这个对象中进行操作.换句话说,关键字this可在函数中使用,是对一个对象的引用,而函数正是该对象的属性或方法. 让我们来看这个对象: <!DOCTYPE html><html lang="en"><body><script> var cody = { living:true, age:23, gender:'male', getG

  • Javascript中this绑定的3种方法与比较

    介绍 this 可以说是 javascript 中最耐人寻味的一个特性,学习this 的第一步就是明白 this 既不是指向函数自身也不指向函数的作用域. this 实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用. 为什么需要绑定this this代指当前的上下文环境,在不经意间容易改变: var info = "This is global info"; var obj = { info: 'This is local info', getInfo: ge

随机推荐