• 简单理解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输出的是小东,对吧?那么,ielts是什么我们把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】7-27 冒泡法排序 (20分)
    【JavaScript】7-26 单词长度 (15分)
    【JavaScript】7-25 念数字 (15分)
    【JavaScript】7-24 约分最简分式 (15分)
    自适应单本小说网站源码,基于bootstrap+dedecms。
    草根站长建站需要掌握或者了解的5种技术
    5个国内优秀网站设计案例分享
    (转)常用RGB色值表
    小波变换和motion信号处理(三)(转)
    小波变换和motion信号处理(二)(转)
  • 原文地址:https://www.cnblogs.com/huilixieqi/p/6493157.html
Copyright © 2020-2023  润新知