• JavaScript中的this


    JavaScript中的this 

    javascript中的this是一个很有意思的东西,它指的是执行环境,而非申明环境;

    具体的我们来看代码:

       var name="global";
       var obj={
           name:"obj",
           fun:function (){
             alert(name);   
           }
       };
       
       obj.fun(); //global
     //var name="global";
       var obj={
           name:"obj",
           fun:function (){
             alert(name);   
           }
       };
       
        obj.fun(); //null

    再看一下:

       var name="global";
       var obj={
           name:"obj",
           fun:function (){
             alert(name);   
           }
       };
       var person={
            name:"person",
            showInfo:function (){
               obj.fun();     
            }
           };
       
       // 还是我们的global
       //所以,函数,在哪里申明的没多大关系,在哪里调用才是关键
       person.showInfo(); //尼玛嵌套这么咄咄函数结果还是global

    那么,如果我们加上this会是怎样的结果呢?

       var name="global";
       var obj={
           name:"obj",
           fun:function (){
             alert(this.name); 
             //代表的是当前的执行环境,而非我们的申明环境;  
           }
       };
       
       obj.fun(); //obj 开森啦,看到了我们的额obj了

    那么我们再进一步的改造呢?

      var name="global";
       var obj={
           name:"obj",
           fun:function (){
             alert(this.name);   
           }
       };
       
       var Info=obj.fun;
       Info(); //结果:global;

    感叹,this好牛逼滴呀

    我们再来改造一下地呀

       var name="global";
       var obj={
           name:"obj",
           fun:function (){
             alert(this.name);   
           }
       };
       var person={
            name:"person",
            showInfo:function (){
               obj.fun();     
            }
           };
    
      person.showInfo(); //结果obj

    那么,如果我们再改造一下呢?

       var name="global";
       var obj={
           name:"obj",
           fun:function (){
             alert(this.name);   
           }
       };
       var person={
            name:"person",
            showInfo:obj.fun
           };
    
      person.showInfo(); //结果person

    哈哈哈,是不是搞晕了,再仔细看!

    记住:当函数体内有了this之后,函数在哪里申明并不重要,在哪里执行很重要,也就是函数执行的上下文(上下环境)

    你以为就完了? 没有我们再来看一个列子:

    那么,函数之间的this又如何交换(改变呢?)?

    到哪call,apply ,他们两个之间的唯一区别就是参数形式不同;

       var name="window";
       var someone={
           name:"bob",
           showName:function (){
             alert(this.name);   
           }
       }
       
       var obj={
          name:"tom"   
       }
      // someone.showName();
       someone.showName.apply(this); //强制的将this交给了我们的window滴呀
       someone.showName.apply(obj);  //强制的交给我们的obj这个对象滴呀

    上面我们是以var xx={};方式俩实现的,下面我们以函数的方式来尝试一下地呀

       function Person(name){
           this.name=name;
           this.fun=function (){
              alert(this.name);   
           }
       }
        
       function tree(name){
             this.name=name;   
       }
       
       var p=new Person("yuanzhangliu");
       var t=new tree("tree");
       p.fun(); //结果:yuanzhangliu
       p.fun.apply(t); //把person fun中的this交给了我们的
       //聪明的的你,会发现,这个不是很像继承嘛,
       //t就相当于有了 fun这个方法滴呀;cool
       

    我们再来看例子:

  • 相关阅读:
    [Linux 004]——用户和用户组以及 Linux 权限管理(二)
    [Linux 003]——用户和用户组以及 Linux 权限管理(一)
    [Linux 002]——Linux的常用命令
    [Linux 001]——计算机和操作系统的基础知识
    给 Android 开发者的 RxJava 详解
    Mac OSX系统搭建React natvie for android 开发环境
    Java中的堆和栈的区别
    Nginx配置详解
    在博客园安家了!
    J2SE核心实战开发—— 集合类框架
  • 原文地址:https://www.cnblogs.com/mc67/p/5181049.html
Copyright © 2020-2023  润新知