Question

在React教程视频中，讲师说您需要在React类组件中使用this.props而不是props，因为在这种情况下，它是一个实例变量。我不确定在这种情况下实例变量是什么。

我发现了很多问题，这些问题解释了Java和JavaScript之外Java和其他语言的实例变量是什么-在one question（标记为Objective-c）中，有人回答“在使用类的面向对象编程中实例变量是在类中定义的变量（即成员变量），该类的每个对象都有一个单独的副本。它们在类的整个生命周期中都存在于内存中。” 但是，我知道ES6类只是对象，并且是基于原型的继承的语法糖-对于JS类，答案是否正确？

Answer 1

正如Felix Kling所说，实例变量只是对象的属性。

您不能使用 <div class="modal fade" id="bgSelector" tabindex="-1" role="dialog" width="100%" aria-labelledby="modalTitle" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <form name="bgForm" id="bgForm" action="#blah" method="post"> <div class="modal-header bg-white d-block" style="position: sticky; top: 0; z-index: 1000;"> <button type="button" class="close float-right align-items-start" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h5 class="text-info text-center" id="modalTitle">Select background image</h5> </div> <div class="modal-body d-flex"> <div class="column postition-sticky" style="width: 40%; border: 1px solid red;"> <p class="w-100 text-center" style="z-index: 1000;">Select an image to use in the background...</p>  </div> <div class="theme-list column" style="width: 60%; border: 1px solid blue;">  </div> </div> <div class="modal-footer justify-content-center bg-white" style="position: sticky; bottom: 0; z-index: 1000;"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary" form="themeForm" formmethod="post" formaction="#blah">Save Background Image</button> </div> </form> </div> </div> </div>，因为它引用了称为props的全局或局部变量。您要访问的是存储在props中的当前组件的props的当前值。

查看jsfiddle：https://jsfiddle.net/vd5ymhcz/1/

Answer 2

要了解这一点，您需要了解函数表达式，词法环境，原型继承。

“ this”关键字是指它所属的对象。

让我们说我们有一个这样的班级

class Hello{
   constructor(name){
      this.name = name
   }
   hello(){
      console.log(this.name);
   }
}

现在让我们借助此类来创建一个新对象。

var person = new Hello('Alex')

现在我可以做这样的事情，

person.hello();

此行将返回'Alex';

现在让我们console.log（person）;

console.log(person)

person ==> { 
              name : 'Alex'
              <prototype> {
                  constructor: function Hello()
              }
           }

您将注意到Hello函数不在人员对象的顶层。它处于该对象的第一个原型级别。该原型内部的所有内容都将引用该类或Factory函数，或者构造函数，可帮助定义该人员对象。在这种情况下，它引用Hello类。

var person是在全局级别上定义的。因此，当您调用person.hello（）时，它将在该对象的顶层进行检查。如果它不在其中，那么它将进入外部环境并尝试找出这是什么hello（）东西。此人员对象的外部环境是全局级别。 hello（）函数不在全局级别。当javaScript在外部环境中找不到hello（）时，将抛出错误，提示hello（）未定义。

当我们使用'this'关键字时，它也会说检查原型。完成所有原型，直到遇到那件事为止。如果不存在，请进入外部环境并检查是否存在。

'this'关键字将引用其所属对象的任何内容。另外，请记住javaScript中的所有内容都是需要原始数据的对象

什么是JavaScript中的实例变量？

2 个答案: