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 usort 按照数组中的某个键值排序

    //php usort 按照数组中的某个键值排序 如果第一个参数小于第二个参数 -> 返回小于0的整数如果第一个参数等于于第二个参数 -> 返回等于0的整数如果第一个参数大于于第二个参数 ...

  2. 自动化服务安装部署工具-Ansible

    自动化运维工具Ansible详细部署 ================================================================================= ...

  3. python爬虫学习-爬取某个网站上的所有图片

    最近简单地看了下python爬虫的视频.便自己尝试写了下爬虫操作,计划的是把某一个网站上的美女图全给爬下来,不过经过计算,查不多有好几百G的样子,还是算了.就首先下载一点点先看看. 本次爬虫使用的是p ...

  4. Error of "Please Check for Sufficient Write File Permissions"

    The error message “Please check for sufficient write file permissions” is generated by the Web-based ...

  5. 在四合院里写code是什么体验(非拉仇恨)

    我工作的地点在一个幽静的四合院,后海边上.每次出了地铁还要走长长的十分钟的胡同,经过恬静的老人,嬉戏的小孩,还有就是长年不缺的游客.很多次,在夕阳将下未下时五六点的时候,小胡同里老人拿着小马扎,一群小 ...

  6. Java 的静态代理 动态代理(JDK和cglib)

    转载:http://www.cnblogs.com/jqyp/archive/2010/08/20/1805041.html JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的特征是 ...

  7. iOS控件之UIResponder类

    iOS控件之UIResponder类 在iOS中UIResponder类是专门用来响应用户的操作处理各种事件的,我们知道UIApplication.UIView.UIViewController这几个 ...

  8. C#类和接口

    1.类的定义 C#使用类关键字class定义类,如: public  class MyClass { } 2.类的继承 类继承使用: public class BaseClass { } public ...

  9. Nodes “-1” are listed in ADOP_VALID_NODES table but not in FND_NODES table

    While trying to apply patches to upgrade to 12.2.4, adop failed due to the below errors. Validating ...

  10. ps commad

    要对系统中进程进行监测控制,查看状态,内存,CPU的使用情况,使用命令:/bin/ps (1)         ps :是显示瞬间进程的状态,并不动态连续: (2)         top:如果想对进 ...