zoukankan      html  css  js  c++  java
  • this的指向问题

    1,被嵌套的函数独立调用时,this默认绑定到window

    //虽然test()函数被嵌套在obj.foo()函数中。但test()函数是独立调用,而不是方法调用,所有this默认绑定到window

     /**被嵌套的函数独立调用时,this默认绑定到window**/
       var a = 0;
       var obj = {
           a:2,
           foo:function(){
               console.log(this.a);  //2  这里的this指向obj
               function test(){
                   console.log(this.a);  //0  这里的this指向window
               }
               test();
           }
       };
       obj.foo();

    2,闭包

    类似地,test()函数是独立调用,而不是方法调用,所以this默认绑定到window

    var a = 0;
    function foo(){
        function test(){
            console.log(this.a);
        }
        return test;
    };
    var obj = {
        a : 2,
        foo:foo
    }
    obj.foo()();//0

    由于闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var that = this ,然后

    在闭包中使用that替代this,使用作用域查找的方法来找到嵌套函数的this值

    var a = 0;
    function foo(){
        var that = this;
        function test(){
            console.log(that.a);
        }
        return test;
    };
    var obj = {
        a : 2,
        foo:foo
    }
    obj.foo()();//2

    补充:

    《JS 高级程序设计》里给的解释:更深层次的解释了闭包里的this指向问题。

    This对象是在运行时,基于函数的执行环境绑定的。

    在全局函数中,this等于window

    而当函数被作为某个对象的方法调用时,this等于那个对象。

    不过匿名函数的执行环境具有全局性,因此其this对象通常指向window.

    var name = "The Window";
      var object = {
          name:"My object",
          getNameFunc:function(){
              return function (){
                  return this.name;
              }
          }
      };
      alert(object.getNameFunc()()); //the window

    先创建了一个全局变量name,又创建了一个包含name属性的对象,这个对象还包含一个方法——getNameFunc(), 它返回一个匿名函数,而匿名函数又返回this.name

    由于getNameFunc()返回一个函数。因此调用object.getNameFunc()()就会立即调用返回它的函数,结果就是返回一个字符串,然而,这个例子返回的字符串是

    "The Window",即全局变量name的值,为什么匿名函数没有取得其包含作用域,的this对象呢?

    前面曾经提到过,每个函数在被调用时,其活动对象都会自动取得两个特殊变量:this和arguments.内部在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的
    这两个变量。而匿名函数的执行环境具有全局性。因此this通常指向window.不过,把外部作用域中的this对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了。
    var name = "The window";
    var object = {
    
    name:"My Object",
    
    getNameFunc:function(){
    
    var that = this;
    return function(){
    return that.name;
     }
    }
    
    }

    3,隐式绑定

    一般地,被直接对象所包含的函数调用时,也称为方法调用,this隐式绑定到该直接对象

    function foo(){
        console.log(this.a);
    };
    var obj1 = {
        a:1,
        foo:foo,
        obj2:{
            a:2,
            foo:foo
        }
    }
    
    //foo()函数的直接对象是obj1,this隐式绑定到obj1
    obj1.foo();//1
    
    //foo()函数的直接对象是obj2,this隐式绑定到obj2
    obj1.obj2.foo();//2

     补充一点:

    oDiv.onclick = function(){
        
           this : 这里的this指向oDiv
    }
    /*---------------------------------------------*/
    
    oDiv.onclick = show;
    
    function show(){
    
      this:----指向oDiv
    }
    
    /*---------------------------------------------*/
    oDiv.onclick = function(){
    
       show()
    }
    
    function show(){
      this :这里的this指向 window
    }
  • 相关阅读:
    Jupyter notebook中的Cell and Line Magics
    numpy中array数组对象的储存方式(n,1)和(n,)的区别
    机器学习中的标准化方法(Normalization Methods)
    matplotlib添加子图(拼图功能)
    matplotlib.pyplot.plot详解
    一行代码让你的python运行速度提高100倍
    一个简单的Shell脚本(解决windows上文本在macos上乱码问题)
    解决Mac上打开txt文件乱码问题
    LaTeX中常用代码段snippets(持续更新)
    LaTeX实时预览中文
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/7473343.html
Copyright © 2011-2022 走看看