JS中的this

简介: 有些东西,见过,写过,还以为自己就理解了,偶然之间,发现自己的博客中还有很多自己不理解的东西,原来自己已经落下很多功课了,就拿JS中的这个this来说吧,我已经不止一次的说this在JS中就是一个奇葩,一个让人捉摸不透的东西,但是又是非常灵活的东西,这是初衷,我又说过this在JS中永远指向的是当前的作用域,可是判断这个作用域并不是这么的容易。

有些东西,见过,写过,还以为自己就理解了,偶然之间,发现自己的博客中还有很多自己不理解的东西,原来自己已经落下很多功课了,就拿JS中的这个this来说吧,我已经不止一次的说this在JS中就是一个奇葩,一个让人捉摸不透的东西,但是又是非常灵活的东西,这是初衷,我又说过this在JS中永远指向的是当前的作用域,可是判断这个作用域并不是这么的容易。以下内容参考http://blog.csdn.net/hphone/article/details/7076811

 

第四部分:在全局中使用this


<script> 
        var a = 2; 
        function test(){ 
         
            var a = 1; 
            document.writeln(a); 
            document.writeln(this.a); 
             
        } 
         
        test(); 
        document.write(this.a); 
    </script> 
<script>
        var a = 2;
        function test(){
       
            var a = 1;
            document.writeln(a);
            document.writeln(this.a);
           
        }
       
        test();
        document.write(this.a);
    </script>

结果会是什么呢:
1 1 2?但是结果是1 2 2 很有疑问吧?调用这个函数是在window中调用,所以说this就是window,window.a=2。当单独调用test()时,test其实就相当于window.test,里面的this也不用说就是this。
第五部分:在对象中使用this
<script> var name = "JIM"; function Person(){ this.name = "Mike"; this.myname = getName; } function getName(){ return this.name; } var person = new Person(); document.write(person.myname()); </script> <script> var name = "JIM"; function Person(){ this.name = "Mike"; this.myname = getName; } function getName(){ return this.name; } var person = new Person(); document.write(person.myname()); </script> 结果是Mike。JS的函数可以充当类似Java中的构造函数,当用new的时候,这个时候会产生一个对象,那么里面的this 也就是当前的这个对象,这里this所在的作用域是在person当中,先搜索其中的属性,然后搜索原型,一直找到。 <script> var name = "JIM"; function Person(){ this.myname = getName; } Person.prototype.name="Mike"; function getName(){ return this.name; } var person = new Person(); document.write(person.myname()); </script> <script> var name = "JIM"; function Person(){ this.myname = getName; } Person.prototype.name="Mike"; function getName(){ return this.name; } var person = new Person(); document.write(person.myname()); </script> 这里一直搜索到Person.prototype.name 第五部分:this在继承当中使用 <script> var name = "JIM"; function Person(){ this.myname = getName; this.name="Mike"; } function Son() { this.name="Sam"; } Son.prototype=new Person(); function getName(){ return this.name; } var son = new Son(); document.write(son.myname()); </script> <script> var name = "JIM"; function Person(){ this.myname = getName; this.name="Mike"; } function Son() { this.name="Sam"; } Son.prototype=new Person(); function getName(){ return this.name; } var son = new Son(); document.write(son.myname()); </script> 结果是Sam,调用者是son,他先找自己的属性,然后是原型,最后的是原型的原型,一直找到。 第六部分:在回调函数中使用this <script> var name = "JIM"; function Person(){ this.name="Mike"; } function getName(){ return this.name; } var person=new Person(); document.writeln(getName.call(person)); document.write(getName.call(this)); </script> <script> var name = "JIM"; function Person(){ this.name="Mike"; } function getName(){ return this.name; } var person=new Person(); document.writeln(getName.call(person)); document.write(getName.call(this)); </script> 结果是Mike JIM。第一个相当于person在调用,搜索他的作用域。第二个是window在调用,搜索window作用域。 第七部分:在闭包中使用this <script> var name = "JIM"; function Person(){ this.name = "Mike"; this.getName = function(){ return function(){ return this.name; }; }; } var person = new Person(); document.write(person.getName()()); </script> <script> var name = "JIM"; function Person(){ this.name = "Mike"; this.getName = function(){ return function(){ return this.name; }; }; } var person = new Person(); document.write(person.getName()()); </script> 结果是Mike?但是错了,结果却是JIM。 JS中的this是在运行的时候确定的,this并不会保存在作用域链的。让我们分析下person.getName(): var temp=person.getName(); document.write(temp()); var temp=person.getName(); document.write(temp()); person.getName()返回的是一个函数,他可以保存其他的作用域链,this不保存,第一步仅仅是返回了一个函数,他的结果是什么,还得继续看,调用的位置。这里是window,当然是JIM啦。 www.2cto.com 我们现在可以总结一下,关于this在函数当中的使用情况。谁调用他,this就指向谁,就搜索他的作用域。 这下子,就完全明了了,this到底怎么使用了,他指向的是谁。

练习题:

var name = "The Window";
window.onload=function()
{


var name = "The Window";

  var object = {
    name : "My Object",

    getNameFunc : function(){
      var that = this;
      return function(){
                var x=this;
        return that.name;
      };

    }

  };

  alert(object.getNameFunc()()); 





  var object = {
    name: "My Object",

    getNameFunc : function(){
      return function(){
                var that=this;
        return this.name;
      };

    }

  };

  alert(object.getNameFunc()());




}
 

 

相关文章
|
2月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
2月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
19天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
40 3
|
17小时前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
3 0
|
1天前
|
JavaScript 前端开发
|
8天前
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
|
2月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
15天前
|
JavaScript 前端开发
JS中如何使用this方法
JS中如何使用this方法
|
2月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
22 1
|
2月前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
14 2