zoukankan      html  css  js  c++  java
  • 关于JavaScript中this小有理解

    理解this的第一步是要明确,this的绑定发生在函数被调用的时候,这也就是说,函数没有调用,this其实是没有指向的,而this最终指向的是调用它的对象。这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉,那么接下来我会深入的探讨这个问题。

    例子1:

    var user = "xm";
    function a(){
        var user = "bgg";
        console.log(this.user);    //xm
        console.log(this);        //Window
    }
    a();

    匿名函数a不属于任何将他实例化的对象,所以函数a属于全局对象,在浏览器中,全局对象为window,即这里的this指向window,即this.user等于window.user。

    例子2:

    var o = {
        user:"bgg",
        fn:function(){
            console.log(this.user);  //bgg
        }
    }
    o.fn();

    这里的this指向的是对象o,因为你调用这个fn是通过o.fn()执行的,那自然指向就是对象o,这里再次强调一点,this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁,一定要搞清楚这个。

    其实例子1和例子2说的并不够准确,下面这个例子就可以推翻上面的理论。

    例子3:

    var o = {
        user:"bgg",
        fn:function(){
            console.log(this.user); //bgg
        }
    }
    window.o.fn();

    这段代码和上面的那段代码几乎是一样的,但是这里的this为什么不是指向window,如果按照上面的理论,最终this指向的是调用它的对象,这里先说个而外话,window是js中的全局对象,我们创建的变量实际上是给window添加属性,所以这里可以用window点o对象。

      这里先不解释为什么上面的那段代码this为什么没有指向window,我们再来看一段代码。

    var o = {
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a); //12
            }
        }
    }
    o.b.fn();

    这里同样也是对象o点出来的,但是同样this并没有执行它,那你肯定会说我一开始说的那些不就都是错误的吗?其实也不是,只是一开始说的不准确,接下来我将补充一句话,我相信你就可以彻底的理解this的指向的问题。

      情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

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

      情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,例子3可以证明,如果不相信,那么接下来我们继续看几个例子。

    var o = {
        a:10,
        b:{
            // a:12,
            fn:function(){
                console.log(this.a); //undefined
            }
        }
    }
    o.b.fn();

    尽管对象b中没有属性a,这个this指向的也是对象b,因为this只会指向它的上一级对象,不管这个对象中有没有this要的东西。

    还有一个特殊的例子,例子4:

    var o = {
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a); //undefined
                console.log(this); //window
            }
        }
    }
    var j = o.b.fn;
    j();

    这里this指向的是window,是不是有些蒙了?其实是因为你没有理解一句话,这句话同样至关重要。

      this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window,这和例子3是不一样的,例子3是直接执行了fn。

    例子5:

    function Fn(){
        this.user = "bgg";
    }
    var a = new Fn();
    console.log(a.user); //bgg

    这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向,将这个this指向对象a,为什么我说a是对象,因为用了new关键字就是创建一个对象实例,理解这句话可以想想我们的例子3,我们这里用变量a创建了一个Fn的实例(相当于复制了一份Fn到对象a里面),此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a,那么为什么对象a中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份。

    当this碰到return

    如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

    当返回值是一个对象时

    function fn()  
    {  
        this.user = 'bgg';  
        return {};  
    }
    var a = new fn;  
    console.log(a.user); //undefined

    当返回值不是一个对象时

    function fn()  
    {  
        this.user = 'bgg';  
        return 1;
    }
    var a = new fn;  
    console.log(a.user); //bgg

    还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。

    要点提醒:

    1.在严格版中的默认的this不再是window,而是undefined。

    2.new操作符会改变函数this的指向问题,new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。

    还存在的一种情况就是使用call,apply,bind方法改变this指向。  

  • 相关阅读:
    Kinect 开发 —— 硬件设备解剖
    Kinect 开发 —— 引言
    (转)OpenCV 基本知识框架
    OpenCV —— 摄像机模型与标定
    OpenCV —— 跟踪与运动
    OpenCV —— 图像局部与分割(二)
    OpenCV —— 图像局部与部分分割(一)
    OpenCV —— 轮廓
    OpenCV —— 直方图与匹配
    OpenCV —— 图像变换
  • 原文地址:https://www.cnblogs.com/Steeland/p/7150412.html
Copyright © 2011-2022 走看看