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. 对Git的理解

    GIT属于计算机软件,功能是分布式版本控制系统,字面意思还挺有意思的:愚蠢或不开心的人,首先呢,这款软件是免费的.这款软件是免费的.这款软件是免费的.(重要的地方要说三遍)即使它不是免费的,在我大天朝 ...

  2. System.Data.SqlClient.SqlException: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接。 (provider: SQL Network Interfaces, error: 26 - 定位指定的服务器/实例时出错)

    A network-related or instance-specific error occurred while establishing a connection to SQL Server. ...

  3. Js解析浏览器路径的方法

    方法如下:function parseURL(url) { var a = document.createElement('a'); //创建一个链接 a.href = url; return { s ...

  4. Issue 3:数据处理基本认识

    介绍 传统数据库对数据处理一般都分成两类:OLTP和OLAP. 数据分析(OLAP)的前提条件是要准备数据. 然后才是具体的数据分析,对此,可以分为统计型的数据分析和挖掘性的数据分析. 最后对分析结果 ...

  5. docker 组件(c/s)

    Docker 组件 1. docker client : docker的客户端 2. docker server : docker daemon的主要组成部分,接受用户通过docker client发 ...

  6. jquery easyui-datagrid/treegrid 清空数据参考

    在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义.下面给出两种方法供初学者 ...

  7. aix磁盘分区挂载问题

    aix在进行磁盘分区挂载时,可能会报错

  8. struts-OGNL

    特点 常用来访问值栈里对象属性的一种语言 通常由struts标签来解析执行 <%@ taglib prefix="s" uri="/struts-tags" ...

  9. Linux上 .vimrc文件

    在Linux上面对VIM编辑器的格式的设置通常可以提升工作效率,下面对工作机器上的.vimrc文件的内容进行一总结,以备后续的查询 set smarttab set tabstop=4 set shi ...

  10. Select2个人使用总结

    最近项目有功能需要使用列表选多个用户,老夫偷懒使用zTree进行了多级checktree实现,不过貌似太丑,虽然对于我这种后端来说无所谓,但强迫症还是让我寻找其他代替控件. 闲话不说了,先上Selec ...