zoukankan      html  css  js  c++  java
  • 理解js中this的指向

         学习自原文  http://www.cnblogs.com/pssp/p/5216085.html后的一点小结(原文作者总结的很棒^_^)!
      关于js中this的指向,在函数定义的时候还无法确定,只有在函数执行的时候才能确定this到底指向谁,实际上this最终指向的是调用它的对象。
    eg1:
    function a(){
        var user = "xxxx";
        console.log(this.user); //undefined
        console.log(this); //Window  }
    a();//此处和执行window.a()是一样的效果
    ··········································································································································································································································································
    eg2:
    var o = {
        user:"xxxx",
        fn:function(){
            console.log(this.user);  //xxxx   
        }
    }
    o.fn(); //此处和执行window.o.fn();是一样的效果。 这里的this指向的是对象o,因为你调用这个fn是通过o.fn()执行的,那this自然指向的就是对象o
    ···········································································································································································································································································
    eg3:
    var o = {
        a:10,
        b:{
            fn:function(){
                console.log(this.a); //undefined   }
        }
    }
    o.b.fn();//尽管对象b中没有属性a,这个this指向的也是对象b,因为this只会指向它的上一级对象,不管这个对象中有没有this要的东西。
    ··········································································································································································································································································
    eg4:
    var o = {
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a); //undefined
                console.log(this); //window        }
        }
    }
    var j = o.b.fn;//将对象o的属性b的方法即函数fn赋给变量j,此时并没有执行;
    j(); //加了一个()立即执行函数fn,此处和执行window.fn();是一样的效果,此时this指向的是window。this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的, 这句话至关重要。
         例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window,这和例子3是不一样的,例子3是直接执行了fn。
    ··········································································································································································································································································
    eg5:
    var name = "The Window";
      var object = {
        name : "My Object",
        getNameFunc : function(){
          return function(){
            return this.name;
          };
        }
      };
     console.log(object.getNameFunc( )( )); // The Window
         这里object.getNameFunc( )( )会先执行object.getNameFunc( ),返回function( ){ return this.name; }这个函数,函数function(){ return this.name;}后面跟了一个( )会执行这个函数,此时这里的this指向的是window对象,所以this.name的值就是The Window。
    ··········································································································································································································································································
    eg6:
     var name = "The Window";
      var object = {
        name : "My Object",
        getNameFunc : function(){
          var that = this;
          return function(){
            return that.name;
          };
        }
      };
    console.log(object.getNameFunc()()); // My Object
         这里object.getNameFunc( )( )会先执行object.getNameFunc( ),返回function( ){ return this.name; }这个函数,函数function(){ return this.name; }后面跟了一个( )会执行这个函数,此时这里的this被赋值给了that,改变了this的指向,此时的this指向的是object对象,而不是window对象,所以this.name的值就是My Object 。
     
    备注:
    (function(){
        ....
    })()

    第一个括号是个运算符,它会返回这个匿名函数,然后最后一个小括号会执行这个函数。

    ······································································································································································································································································
    结论:
      情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window。这里需要说明的是在js的严格版中this指向的不是window,严格模式下禁止this关键字指向全局对象,严格模式下,this的值为undefined。

      情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

      情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,
  • 相关阅读:
    3.18 每日一练
    第二章 练习
    第一章 练习
    Redis常用操作大全和Python操作Redis
    vue学习【第七篇】:Vue之导入Bootstrap
    Vue学习【第六篇】:Vue-cli脚手架(框架)与实战案例
    Redis 安装,配置以及数据操作
    vue学习【第五篇】:Vue组件
    vue学习【第三篇】:vue之node.js的简单介绍
    Vue学习【第二篇】:ES6简单介绍
  • 原文地址:https://www.cnblogs.com/wqhwe/p/5227073.html
Copyright © 2011-2022 走看看