zoukankan      html  css  js  c++  java
  • JavaScript-this理解

    javascript this可以绑定到:全局对象,自己定义的对象,用构造函数生成的对象,通过call或者apply更改绑定的对象

         1.全局对象       

    function globalTest(name){
         this.name=name;
     }
     globalTest('tree');
     console.log(name);//tree,默认生成了全局对象name,这种写法一般是不允许的
    

      

         2.自己定义的对象    

    var subway={
         name:'1号线',
         speed:0,
         run:function(speed){
             this.speed=speed;
         }
     };
     subway.run(100);
     console.log(subway.speed); //100,this绑定到对象subway
     

      

         3.用构造函数生成的对象

            构造函数约定第一个字母要大写,只有用new调用的时候才算构造函数,否则跟普通函数没有什么不同,用new调用构造函数,this会绑定到生成的对象。   

    function Subway(speed){
         this.speed=speed;
     }
     var s=new Subway(100);
     console.log(s.speed);//100;this绑定到新生成的对象
     

         4.指定的对象,通过call或者apply绑定

     call函数和apply函数的区别是参数不一样,两个方法都可以改变this绑定的对象,如下

    call(obj,param1,param2……);

    apply(obj,[]/*params[]参数数组*/)

    function Subway(name){
         this.name=name;
         this.speed=0;
         this.run=function(speed){
          this.speed=speed;
         };
     }
     var s=new Subway('1号线');
     s.run(300);
     console.log('一号线速度为:',s.speed);//300;this绑定到新生成的对象s
     var s1=new Subway('2号线');
     s.run.apply(s1,[100]);
     console.log('二号线速度为:',s1.speed);//100;this绑定到对象s1
     s.run.call(s1,200);
     console.log('二号线速度为:',s1.speed);//200;this绑定到对象s1

    最后:

    javascript有一个设计缺陷,使得的this绑定混乱

    var subway={
         name:'1号线',
         speed:0,
         run:function(speed){
             this.speed=speed;  //绑定到对象本身
             function test(speed){
                 this.speed=speed+50;//竟然绑定到全局变量了,真是匪夷所思啊
             }
             test(speed);
         }
     };
     subway.run(100);
     console.log(subway.speed);//100
     console.log(speed);//150

    解决方法约定用that代替this

    var subway={
         name:'1号线',
         speed:0,
         run:function(speed){
             var that=this;   //用that代替this
             this.speed=speed;
             function test(speed){
                 that.speed=speed+50;
             }
             test(speed);
         }
     };
     subway.run(100);
     console.log(subway.speed);//150
  • 相关阅读:
    欢迎使用CSDN-markdown编辑器
    欢迎使用CSDN-markdown编辑器
    Math类简介
    Math类简介
    http_server
    tcp服务器
    swoole安装
    laravel源码解析
    VMware的Unity模式
    string.format() %d越界的问题
  • 原文地址:https://www.cnblogs.com/greenteaone/p/4193985.html
Copyright © 2011-2022 走看看