在 JavaScript 中创建真正的私有方法有什么缺点?

front end technologyjavascriptweb development

使用私有方法有一个简单的基本概念。在这种情况下,您可以声明私有方法或私有属性,它们用于隐藏类的内部功能,不让其他类看到,只要您希望将某些内容(无论是方法还是属性)保持为私有。您可以包含私有字段、静态方法、实例方法以及只有您可以访问的 getter 和 setter。

真正的私有字段和方法是通过私有类功能提供的,语言会维护这种隐私,而不是自定义。好处包括防止类功能与代码库的其他功能之间发生命名冲突,并使类具有非常有限的接口。

私有方法(如私有字段)由前导 # 标识,类外的用户无法访问。当一个类需要执行复杂的内部函数,但你又不希望其他代码能够调用它时,它们就派上用场了。

其他编程语言,如 C++、Java 等,将私有定义为任何不能直接通过对象访问且不能与其他类共享的东西。同样的概念也适用于 JavaScript。

因此,我们必须首先研究 JavaScript 如何创建私有方法。我们可以用来在类中创建私有方法的四个主要关键字是。

  • var
  • let
  • const
  • # (hash)

示例 1

在此示例中,让我们了解 JavaScript 中私有方法的基本示例。

<!DOCTYPE html> <html> <title>What is the drawback of creating true private methods in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> // written the class as tutpoint let tutpoint = function (company, launched) { // public member this.motorCar = "Maruti Suzuki Alto"; // written code for private member let topic = "privateMethod"; let status = launched; // written code for private member function let publish = () => { document.write(company +'<br>'); return status; } // written code to call private member // written function inside the same class document.write(publish() +'<br>'); }; // tutpoint1 is object of tutpoint class let tutpoint1 = new tutpoint('Maruti Suzuki Baleno', 'Maruti Suzuki Brezza'); // written to call public member outside the class document.write(tutpoint1.motorCar); </script> </body> </html>

在 JavaScript 中编写真正的私有方法时,有两个重要缺点。

  • 不允许从类外部调用私有方法。

  • 当生成同一类的对象的多个实例时,内存效率会降低,因为每个示例都需要该方法的新副本。

示例 2

在此示例中,让我们了解如果在类外部调用私有成员函数,将如何返回错误。

<!DOCTYPE html> <html> <title>What is the drawback of creating true private methods in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> let tutpoint = function (company, launched) { this.motorCar = "Maruti Suzuki Alto"; let topic = "privateMethod"; let status = launched; let publish = () => { document.write(company); return status; } document.write(topic +'<br>'); }; let tutpoint1 = new tutpoint('Maruti Suzuki Baleno', 'Maruti Suzuki Brezza'); document.write(tutpoint1.motorCar ); document.write(publish()); </script> </body> </html>

请按键盘上的 f12 键访问浏览器控制台以查看结果。

ReferenceError:publish 未定义

示例 3

在此示例中,让我们了解是否在类外部调用了私有成员函数。因此,以下示例的输出是正确的

<!DOCTYPE html> <html> <title>What is the drawback of creating true private methods in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> class tutpoint { // Private field #motorCar; constructor(motorCar) { this.#motorCar = "Maruti Suzuki Alto"; } #privateFunction(prefix) { return prefix + this.#motorCar; } publicFunction() { return this.#privateFunction(">>"); } } let tutpoint1 = new tutpoint(); document.write(tutpoint1.publicFunction()); </script> </body> </html>

示例 4

在此示例中,让我们了解一下,如果我们构造同一个类的多个对象,由于每个对象都会为自己或自己的实例创建函数副本。那么在这种情况下就会出现内存效率问题。

<!DOCTYPE html> <html> <title>What is the drawback of creating true private methods in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> let motorCar = function (name, comp, cost) { this.name = name; this.company = comp; this.price = cost; // Private method let PriceIncrease = () => { this.price = this.price + 30000 +'<br>'; }; // Public method this.showPrice = () => { PriceIncrease(); document.write(this.price); }; }; const one = new motorCar("one", "Alto", 480000); const two = new motorCar("two", "Baleno", 1100000); const three = new motorCar("three", "Brezza", 1600000); one.showPrice() two.showPrice() three.showPrice() </script> </body> </html>

相关文章