javascript中this的指向分析

1、this的意义(this是什么?):

http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

this是Javascript语言的一个关键字

它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

https://zhuanlan.zhihu.com/p/23804247

this 是你 call 一个函数时传的 context

 https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/

In JavaScript the situation is different: this is the current execution context of a function. 

      总结一下: this是函数执行时的上下文,当使用this.变量/方式时,该上下文的变量和方法被调用。 

2、this的生成与绑定时间:

The this object is bound at runtime based on the context in which a function is executed。

3、this的指向:

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. 

翻译:在大多数情况下,this的值(指向)是由函数如何被调用决定的。它不能在执行期间被赋值,而且每次调用时它的值都可能不一样。

MDN的文档已经很好地说明了this的各种指向:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

此处不再对各种情况进行说明,而着重对匿名函数的this指向进行分析:

★ 匿名函数的this指向:

JS高级程序设计中文版中有一句话:“匿名函数的执行环境具有全局性,因此其this对象通常指向window。”

然而实际上,英文原版根本没有提到执行环境的全局性问题,

原文是:

Anonymous functions are not bound to an object in this context, meaning the this object points to window unless executing in strict mode (where this is undefined).

翻译:

在这个上下文(执行环境)中匿名函数并没有绑定到任意一个对象中,意味着this指向window(除非这个上下文(执行环境)是在严格模式下执行的,而严格模式下该this指向undefined)

以下是附录的代码,this context指的是下面的代码

var name = “The Window”;                   

var object = {   

 name : “My Object”,                     

 getNameFunc : function()

 { 

      return function()

  { 

          return this.name;     

    };   

} };                 

alert(object.getNameFunc()());  //”The Window” (in non-strict mode)

      另一个例子分析:

       var number = 1;
  var obj =

   {
     number: 2,
     showNumber: function()

         {
      this.number = 3;
      (function(){
      console.log(this.number);//1 立即执行函数并没有绑定在obj对象中,所以指向的是window,输出为1
      })();
      console.log(this.number);//3 showNumber函数在调用时被绑定到了obj中,而函数中的this.number修改了obj的number值,所以输出为3
    }
  };
  obj.showNumber();

总结一下:判断 this 指向谁,看执行时函数被绑定在哪里,只要函数(function)没有绑定在对象上调用,它的 this 就是 window。

4、严格模式下this的指向:

 When using the apply() or call() methods of a function, a null or undefined value is coerced to the global object in nonstrict mode. 

 In strict mode, the this value for a function is always used as specified, regardless of the value. 

翻译:在正常模式下,当使用函数的apply()或call()方法时,如果参数为null或者undefined,this指向都会被强制变为全局对象。

          而在严格模式下,this的指向完全由它所被放入的上下文决定,即使被指定为null或者是undefined,this的指向都会是该上下文。

  1、
  "use strict";
  var color = "red";
  function displayColor(){ alert(this.color); }
  displayColor.call(null);
  //VM139:3 Uncaught TypeError: Cannot read property 'color' of null
  at displayColor (<anonymous>:3:40)
  at <anonymous>:4:14

  2、
  var color = "red";
  function displayColor(){ alert(this.color); }
  displayColor.call(null);//red

在严格模式下,如果this未在执行的上下文中定义,那它将会默认为undefined

  1、

  "use strict";
  var color = "red";
  function displayColor(){ alert(this.color); }
  displayColor();
  //VM119:3 Uncaught TypeError: Cannot read property 'color' of undefined
  at displayColor (<anonymous>:3:40)
  at <anonymous>:4:1

  2、

  "use strict";
  function displayColor(){ alert(this === window); }//false
  displayColor();

  3、
  var color = "red";
  function displayColor(){ alert(this.color); }
  displayColor();//red

5、箭头函数this指向的特殊性 

ES6标准入门(第二版)

箭头函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。

箭头函数导致this总是指向函数所在的对象,this指向的固定化,并不是因为箭头函数内部有绑定this的机制。

实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。

而且,正因为它没有this,所以不能用作构造函数,也不能用call、apply、bind这些方法去改变this的指向。

箭头函数-廖雪峰

箭头函数内部的this是词法作用域,由上下文确定

如果使用箭头函数,以前的那种hack写法:

var that = this;

就不再需要了。

由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25


 
 
原文地址:https://www.cnblogs.com/cheeseCatMiao/p/8052137.html