主页 / 问题 / 966161
Accepted
dpi
Asked:2020-04-06 15:40:45 +0800 CST2020-04-06 15:40:45 +0800 CST

OOP JS 中的变量访问

  • 772

在公共init()方法中

this._todoContainer = document.querySelector(this._settings.todoContainer);

这里我从设置的文档中写下容器的名称。值没问题。

接下来，我在静态方法中使用变量

this._todoContainer // 我也做控制台日志，这里是空的

this._todoContainer.insertAdjacentHTML('beforeend', template);

这就是它的工作原理

document.querySelector('.dataTascksInfo').insertAdjacentHTML('beforeend', template);

为什么this._todoContainer变量对其他方法不可用？

javascript

1 个回答

  1. Best Answer

    TL;DR：在普通方法中，this指向类的实例，在静态方法中，指向类本身（构造函数）。

    在正常调用中，您只能通过this非静态方法访问实例属性。


    细节：

    让我们从 JS 中的类是用于描述对象类型的语法“糖”这一事实开始。要理解这种情况，你必须回顾一下理论。为此，我们举一个简单的例子：

    class Box {
  constructor() { this.contents = []; }
  insert(something) { this.contents.push(something); }
  static isEmpty()  { return this.contents.length === 0; }
}

const box = new Box(); 
box.insert('cat'); 
console.log(Box.isEmpty());   // ошибка


    如何处理“糖”类声明：

    解释器创建一个函数Box()- 类型对象的构造函数Box。

    接下来，将属性1 添加到此函数prototype，其值将由实例继承的对象形式的值。原型包含“类”方法——在这种情况下，它只是方法insert()2。

    静态方法成为构造函数的本地方法。它们不属于原型的直接属性。


    方法调用如何工作：

    首先，在实例对象中搜索方法，然后在原型中搜索（沿着继承链“向上”，从最近的祖先到更远的祖先）。一旦找到该方法，搜索就会停止。如果未找到，则抛出异常。

    当从原型调用方法时，它会暂时“附加”到代表它被调用的实例 - 并且this在方法内部指向该特定实例3。

    调用静态方法的工作方式类似。
    但是由于这些方法不在原型中，并且是构造函数的“属性”，我们代表它调用 - 这意味着this在这些方法内部它指向构造函数......它没有实例属性。contents这就是为什么在示例中从静态方法访问属性4时发生错误的原因。


    1 JS中的函数是对象，可以有属性。

    2原型还包含一个属性constructor，它是对构造函数本身（Box.prototype.constructor === Box）的引用。

    3被调用的方法在继承链中有多“远”并不重要。也就是说，如果在示例中我们box.hasOwnProperty(...)从更远的祖先调用方法Object，它也将被执行，就好像它是它自己的方法一样box。

    4虽然这个属性是由构造函数创建的，但是在使用操作符时，在返回并赋值给变量之前new，this会指向一个实例对象box。

    • 2

相关问题