zoukankan      html  css  js  c++  java
  • 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


     
     
  • 相关阅读:
    凤凰网CEO刘爽称鄙视微博连说20个屁示不齿
    科技创业网站
    梦想,在路上
    小本创业
    rails relevent
    MBA = married but available
    把UTF8编码转换为GB2312编码[转]
    FSFS和VDFS存储方式的区别
    如何让phpmyadmin输入密码再进入
    dede后台登陆后一片空白的解决办法汇总
  • 原文地址:https://www.cnblogs.com/cheeseCatMiao/p/8052137.html
Copyright © 2011-2022 走看看