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

   1.全局对象 

1
2
3
4
5
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


随机推荐

  1. php 后端开发学习

    hello.php: <?php //设置cookies setcookie("user", "runoob", time()+3600); ?> ...

  2. Qt在pro文件中加入带空格的路径(使用$$quote关键字)

    LIBS += -L$$quote(C:\Program Files (x86)\Microsoft SDKs\Windows\v7.1A\Lib) INCLUDEPATH += $$quote(C: ...

  3. 临时存存储页面上的数据---Web存储

    HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考: http://www.cnblogs.com/taoweiji/archive/2012/12/0 ...

  4. Another MySQL daemon already running with the same unix socket的解决

    问题出现: 每周一需要备份一次数据库,即从服务器MySQL导出sql文件,再导入到我机器上虚拟机的MySQL里.但是今天早上连不上,我进入控制台用#service mysqld start强行启动,报 ...

  5. ubuntu14.0 (arm平台)源码安装 VLC播放器

    环境 ubuntu14.0  arm开发板 源 deb http://mirrors.ustc.edu.cn/ubuntu-ports/ trusty main multiverse restrict ...

  6. Android 基于Android的手机邮件收发(JavaMail)之三(邮件接收)

    初次做这个程序的时候,是仿照着网上别人的程序做的.因为本人比较菜,是一个新手,以前的基础知识没有学好,所以尽管有了别人的代码但是还是不知道怎么在界面上显示出它的效果来,废话不多少,现在就贴出我的参考程 ...

  7. isKindOfClass和isMemberOfClass的区别

    isKindOfClass和isMemberOfClass的区别 isKindOfClass和isMemberOfClass 都是NSObject的比较Class的方法 但两个有很大区别: isKin ...

  8. No Spring WebApplicationInitializer types detected on classpath。启动时不报错,但是页面打不开。

    一片红,没有黑色disPatcher的加载. 百度,但是没有用,二十分钟浪费,这个问题的本质就是web.xml中的disPatcher没有加载,但是我肯定和代码无关,配置文件也没有变化过,值可能是to ...

  9. 总结ThinkPHP使用技巧经验分享(二)

    循环输出volist 还有别名 iterate 模版赋值:$User = D('User')$list = $User->findAll()$this->assign('list',$li ...

  10. centos7 开启防火墙端口 firewalld

    systemctl start firewalld firewall-cmd --zone=public --add-port=3306/tcp --permanent firewall-cmd -- ...