Javascript:何时何时不使用"这个"

时间:2018-02-14 06:26:39

标签: javascript function scope this

我很好奇当需要/最佳做法时使用关键字this。我了解在确定函数this值时会使用this但是总是需要它吗?

我问的原因是因为我有一个内部函数,它在我的模块中被调用,它真正做的就是对你传递的一些数据进行排序。我的问题是我应该使用this关键字调用此函数还是单独使用。

E.g:

function formatSomeData(data){
  //code........
}

this.formatSomeData(data);

        OR

formatSomeData(data);

我知道函数被调用的位置以及回答问题的目的是什么,但在这种情况下,就像我提到的那样,我真的不需要访问this任何一点上的对象。在调用函数时使用它仍然是一个好习惯吗? 我要问的不仅仅是"这个"是有效的,但什么时候适合使用它,什么时候不适用。

4 个答案:

答案 0 :(得分:3)

  

在需要/最佳做法时使用关键字

当您想要访问某些内容时,通常会使用此选项。因此,例如,如果您有自定义对象并希望在某个方法中使用某些属性,则应使用this



function Person(fname, lname){
  this.fname = fname;
  this.lname = lname;
  this.fullName = function(){
    return this.fname + ' ' + this.lname;
  }
}

var p = new Person('foo', 'bar');
console.log(p.fullName())




如果你看到,在当前的构造函数中,我创建了一个函数(fullName),它需要访问它所属对象的fnamelname属性。这是必须使用this的地方。

  

现在声明时,何时使用this

作为this一部分的构造函数中的任何属性都将成为对象的一部分。因此,如果您需要的内容仅供您访问,而非外部访问,则可以使用function代替this



function Person(fname, lname){
  var self = this;
  self.fname = fname;
  self.lname = lname;
  
  // This function is private
  function getFullName() {
    var name = '';
    var seperator = '';
    if (fname) {
      name += self.fname;
      seperator = ' ';
    }
    if (lname) {
      name += seperator + self.lname;
    }
    return name;
  }
  this.fullName = function(){
    return getFullName();
  }
}

var p = new Person('foo', 'bar');
console.log(p.fullName())




至于你的代码,我已经在评论中解释了它的工作原理:

  

在非严格模式下,this将指向window,任何不在函数中的声明都将成为全局范围的一部分。

但是作为@ Jonas W的正确指针,这是一个不好的做法。为什么这么糟糕?

  • 任何没有声明声明(var|let|const)定义的变量都将成为全局范围的一部分。
  • 任何具有任何函数之外的声明语句的变量都将成为全局范围的一部分。

答案 1 :(得分:0)

对于一个初学的JS开发人员来说,通过在事件监听器回调中使用它来获取它的概念可能是最容易的。 I. e。,"点击" event将它绑定到作为目标的对象(比如"看,我点击了这个!")。

<ul class="dynamic-list" id="myList">
  <li class="dynamic-list__item">Item 1</li>
  <li class="dynamic-list__item">Item 2</li>
  <li class="dynamic-list__item">Item 3</li>
</ul>

<script type="text/javascript">
  let listItems = document.getElementById("myList").childNodes;
  [...listItems].forEach(function(item) {
    item.addEventListener("click", removeListItem, false);
  })

  // Callback for event, using THIS
  function removeListItem() {
    // Log the text content of <li> to the console. Which one? THIS one.
    console.log(this.textContent);

    // Get the parent of what? Of THIS! And remove its child. Which one? THIS one!          
    this.parentNode.removeChild(this);
  }

</script>

当然Rajeshs的答案要复杂得多,但我希望这也有帮助......

答案 2 :(得分:0)

&#39;这&#39;在函数内部使用,它包含调用函数的对象的值。

例如:

function a(){
 this.newVariable = 'Phil';
}
a();
console.log(newVariable); //This line would display Phil

在这种情况下,即使我们只是在函数a()中定义newVariable。调用该函数的对象是全局对象窗口,因此&#39;这个&#39;指向窗口,this.newVariable在全球范围内。

另一个例子是:

var c={
  log:function(){
    this.name = 'Phil';
   }    
}

在这种情况下,&#39;这个&#39;指向对象c,因为日志函数将由c。

调用

我们在使用对象时遇到了更棘手的案例&#39;这个&#39;在Javascript中。这是一篇很好的文章来掌握这个概念:http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

答案 3 :(得分:0)

编程是一种表达事物的方式,以便计算机人类可以理解它们。

  

调用函数时使用它是否仍然是好的做法?

没有确切的答案。你的两个片段都有效。所以计算机能够理解它。然而,第二个可能会让人类(也就是你的同事)感到困惑:

 this.someFunc();

this应该提到什么?是技术上它指的是window,但从人的角度来看,目前还不清楚。 这就是为什么我绝对不会在这种情况下引用this。但是还有其他好的用例:

 function changeColor(){
   //When just looking here it makes no sense to refer to this
   this.color = "green";
}

const car = { color: "grey" };

 //But now it makes sense as `this` refers to the `car` it is called on
car.changeColor = changeColor;

TLDR:使用this引用方法/属性,并在引用纯函数和变量时将其遗漏。