JavaScript 中的实例变量是什么？

Question

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

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

Answer 1

要理解这个东西，你需要了解函数表达式、词法环境、原型继承。

“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 函数不在 person 对象的顶层。它位于该对象的第一个原型级别。该原型内部的所有内容都将引用有助于定义该 person 对象的类或工厂函数或构造函数。在本例中，它指的是 Hello 类。

var person 是在全局级别上定义的。因此，当您调用 person.hello() 时，它将检查该对象的顶层。如果它不在那里，那么它会去外部环境并尝试找出这个 hello() 东西是什么。这个 person 对象的外部环境是全局级别。hello() 函数不是全局级别的。当javaScript在外部环境中没有找到hello()时，它会抛出一个错误，指出hello()未定义。

当我们使用“this”关键字时，它也会说检查原型。浏览所有原型，直到遇到那个东西。如果不存在，则去外部环境检查是否存在。

'this' 关键字将引用任何东西，以及它所属的对象。另外，请记住 javaScript 中的所有内容都是一个对象，除了原始数据

Answer 2

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

您不能使用，props因为它引用了名为 的全局或局部变量props。您想要访问的是props当前组件的当前值，存储在 中this.props。

看一个jsfiddle： https: //jsfiddle.net/vd5ymhcz/1/