如何在函数内维护“this”变量（typescript/jquery）

Question

我在我的 Angular 项目中使用 Jquery。我尝试访问this.selectedUrl的值，但是当它跳转到 Jquery 就绪函数时，它给出了 UNDEFINED。怎么做？this.selectedUrl = this.router.url   console.log("this.selectedUrl",this.selectedUrl)  // gives value i.e /home   $(document).ready(function () {     console.log("this.selectedUrl",this.selectedUrl)  // gives undefiend     if(this.selectedUrl=="/home"){      console.log("this.selectedUrlIf",this.selectedUrl)     }  });

Answer 1

首先是 Angular 不需要 jquery 来处理任何功能。function不过，在这种情况下，您会因为使用关键字 with而变得不确定$(document)。里面 $(document).ready(function () this会得到一个全新的范围，它不知道是什么selectedUrl。你可以探索arrow function




Answer 2

thisready除非您绑定到函数，否则函数内部会采用完全不同的值this

例如：

this.selectedUrl = this.router.url

   console.log("this.selectedUrl",this.selectedUrl)  // gives value i.e /home

   $(document).ready(function () {

     console.log("this.selectedUrl",this.selectedUrl)  // this is now available

     if(this.selectedUrl=="/home"){

      console.log("this.selectedUrlIf",this.selectedUrl)

     }

  }.bind(this));

或使用从父作用域获取的ES6 箭头函数this

this.selectedUrl = this.router.url

   console.log("this.selectedUrl",this.selectedUrl)  // gives value i.e /home

   $(document).ready(()=>{

     console.log("this.selectedUrl",this.selectedUrl)  // this is now available

     if(this.selectedUrl=="/home"){

      console.log("this.selectedUrlIf",this.selectedUrl)

     }

  });

第三种选择是存储this到另一个变量并改为引用该变量。例如：

var that = this; // store to variable

this.selectedUrl = this.router.url

   console.log("this.selectedUrl",this.selectedUrl)  // gives value i.e /home

   $(document).ready(function () {

     console.log("this.selectedUrl",that.selectedUrl)  // this is now available via that variable

     if(that.selectedUrl=="/home"){

      console.log("this.selectedUrlIf",that.selectedUrl)

     }

  });

解释： this是其余变量中的唯一变量（在面向对象编程中）。根据使用的函数范围，它被重新分配给不同的值（具有相同的名称this） 。因此，要继续this引用另一个函数中的特定实例，您需要遵循上述方法之一。