JavaScript-this理解

简介:

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

     1.全局对象       

1
2
3
4
5
function  globalTest(name){
      this .name=name;
  }
  globalTest( 'tree' );
  console.log(name); //tree,默认生成了全局对象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
复制代码

 

作者:绿茶叶 
出处:http://www.cnblogs.com/greenteaone/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

转载:http://www.cnblogs.com/greenteaone/p/4193985.html

目录
相关文章
|
1月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
3月前
|
JavaScript 前端开发
错综复杂的this:理清你的JavaScript代码中的指向问题
错综复杂的this:理清你的JavaScript代码中的指向问题
|
1月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
6月前
|
JavaScript 前端开发
详解js中的this指向
详解js中的this指向
43 0
|
6月前
|
前端开发 JavaScript
前端基础 - JavaScript之this关键字
前端基础 - JavaScript之this关键字
25 0
|
28天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
JavaScript中的`this`关键字根据执行上下文指向不同对象:全局作用域中指向全局对象(如`window`),普通函数中默认指向全局对象,但作为对象方法时指向该对象。在构造函数中,`this`指向新实例。箭头函数不绑定`this`,而是继承上下文的`this`值。可通过`call`、`apply`、`bind`方法显式改变`this`指向。
10 2
|
1月前
|
JavaScript
JS中call()、apply()、bind()改变this指向的原理
JS中call()、apply()、bind()改变this指向的原理
|
2月前
|
JavaScript 前端开发
JavaScript中this的指向问题
JavaScript中this的指向问题
|
3月前
|
前端开发 JavaScript
揭开`this`的神秘面纱:探索 JavaScript 中的上下文密钥(下)
揭开`this`的神秘面纱:探索 JavaScript 中的上下文密钥(下)
|
3月前
|
前端开发 JavaScript
揭开`this`的神秘面纱:探索 JavaScript 中的上下文密钥(上)
揭开`this`的神秘面纱:探索 JavaScript 中的上下文密钥(上)