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. 关于flex中正则表达式上下文匹配的问题

    按照课本与网上的说法,斜杠'/'表示匹配上下文,例如ab/cd表示当ab后面有cd时匹配ab 然而如果实际这么写,flex在调用该正则表达式时触发'unrecognized rule' flex源代码 ...

  2. PostgreSQL JSON函数

    https://www.postgresql.org/docs/9.6/static/functions-json.html PostgreSQL 9.6.1 Documentation Prev U ...

  3. iOS 模拟器变的很多的问题

    运行一下命令 xcrun simctl list devices | grep -v '^[-=]' | cut -d "(" -f2 | cut -d ")" ...

  4. java web filter 学习(2)

    本文主要对filter的基本使用进行了讲解,其中涉及到了 filter是什么 一个filter处理一个jsp 多个filter处理一个jsp filter是什么 Filter 是java下的一种过滤器 ...

  5. 采用阿里的API进行动态域名解析

    #!/usr/bin/env python # -*- coding:utf-8 -*- import os from aliyunsdkcore import client from aliyuns ...

  6. java获取到机器IP地址及MAC码

    import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.net.InetAddress; import java.ne ...

  7. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  8. 【转】Apache Digest验证

    Apache默认使用basic模块验证,都是明文传输,不太安全,所以本文使用Digest来验证,以提高安全性. 1.Apache配置: A.目录权限配置 Alias /nagios "/us ...

  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. iis配置js支持读取json文件配置

    默认情况下,iis不支持解析.json文件,这就需要我们自己在iis下配置方法一:iis配置1.点击开始菜单选择控制面板: 2.控制面板内点击管理工具,选择Internet信息服务(IIS)管理器. ...