关于this的一些观点和问题

最新推荐文章于 2024-09-20 16:09:38 发布

guo_peak

最新推荐文章于 2024-09-20 16:09:38 发布

阅读量122

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/guo_peak/article/details/80366905

版权

相信很多前端开发工程师在学JavaScript的时候，都被this迷惑过，用起来是相当的爽，也是极易出错的。

今天就谈谈自己对于这些的理解。

this的一些概念及工作原理

JavaScript 有一套完全不同于其它语言的对 this 的处理机制。它是一个在每个函数作用域中自动定义的特殊标识符关键字。若要了解this的原理，我们试着通过一些具体的例子来说明this的动机和用途。

function getThis() {
   console.log(this);
}
var obj = {
   this.name = 'zs'，
   getThis:getThis
}

getThis(); //window
obj.getThis(); //obj

通过上面的例子我们可以知道当this在函数里执行会出现不同的效果。这样我们就可以想到this只在调用的时候才会确定到底是指向谁。具体的指向对象，我并不想过多的去挖掘this的实现机制，我想通过更简洁的事件方法来阐述我的一些想法。

一、函数调用

当函数在window的全局作用域内生命的，就确定了其所在的作用域，不管在什么地方使用只要是函数来调用的，这个this就指向了window。

function fn () {
   console.log(this);
}

var obj = {
  name: 'zs',
  func：function () {
      fn();
  }
}

fn(); // window
obj.func()  //window

在上面的案例中我们看见了，函数声明之后，不管在什么地方使用，只要通过的是函数本身的调用，this都是指向window。

二、方法调用

方法调用，顾名思义，就是对象调用函数。通过对象调用函数，这里的this就指向调用者。下面看下例子。

    var age = 38;
    var obj = {
      age: 18,
      getAge: function () {
        console.log(this.age);
     }
   }
  
   obj.getAge();   //18

在这里我们看到就是这里的this指向的就是obj，所以得到的就是18。其实很好理解，这个函数在对象中赋值，也是在对象中调用的，可以很容易的得到this是指向这个对象的。

三、混合使用

    var age = 38;  //window.age
    var obj = {
      age:18,  //obj.age
      getAge:function () {
        console.log(this.age);//???
        function foo(){
          console.log(this.age);//????
        }
  
        //函数调用模式
        foo();
      }
    }
    //方法调用模式
    obj.getAge();    //18 38

通过上面的例子我们可以看到，函数foo在对象函数内声明的，也在其中调用，得到的结果就是这个this指向的是window。

通过obj方法调用，这个函数执行的时候，这个this就指向当前调用的这个对象。

所以可以稍微总结一下，当是函数调用时，这个this就指向window，当作为方法调用的时候，这个this就指向调用的对象。下面还有一个例子。

 var length = 10
  function fn() {
    console.log(this.length)
  }
  var obj = {
    length: 5,
    method: function (fn) {
      fn()
       //方法调用模式： this指向arguments自己
      arguments[0]();    //arguments.length 4
    }
  }

  obj.method(fn, "222", "333", "4444");  //10    4

其实这里最容易出错的是这里的arguments其实是个对象，首先我们要弄清楚arguments是什么，它是函数传的实参都保存在这个数组内的。这样我们就可以将 arguments[0]( ) 理解为 arguments.fn()，这样我们可以很明显的看到这是个方法调用，此时的this指向的就是arguments这个对象。第一个看结构就是函数调用，所以答案就是10和4。

四、构造函数中的this

在构造函数使用时都会通过一个new，其实new在创建对象的时候干了四件事