this的问题

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

1.全局对象

function globalTest(name){

this.name=name;

}

globalTest('tree');

console.log(name);//tree,默认生成了全局属性name，并给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

-----------------------------------------------------------------

var a=1;
function s(){
var a=2;
alert(a);
}

function s1(){
a=3;
alert(a);
}

function s2(){
var a=4;
alert(this.a);
}

function s3(){
a=5;
alert(this.a);
}

s();//2
s1();//3
s2();//undefined
s3();//5

巴特西

this的问题

最新文章

热门文章