在 javascript 中使用原型的主要优点是什么?

Sun*_*dav 5 javascript

function Candy(name) {
 this.name = name;
}
Candy.prototype.printName = function () {
 console.log(this.name);
}
var chocolate = new Candy("chocolate");
chocolate.printName();
var gummyBears = new Candy("gummy bears");
gummyBears.printName();
Run Code Online (Sandbox Code Playgroud)

这与不使用原型完全相同:

function Candy(name) {
  this.name = name;
  this.printName = function () {
    console.log(this.name);
  }
}
var chocolate = new Candy("chocolate");
chocolate.printName();
var gummyBears = new Candy("gummy bears");
gummyBears.printName();
Run Code Online (Sandbox Code Playgroud)

所以我不确定使用原型的优势是什么!

Ahm*_*agh 3

这里我试图通过一个例子来向大家展示 JavaScript 中原型的优势。

\n

例如:课程

\n

类、原型、面向对象 JavaScript 是构建复杂代码的范例。

\n
\n

在 JavaScript 中,我们使用 原型链,这是一个可以模拟 OOP 的底层功能,它本身就是一个引人注目的工具。

\n

在新版本的 javascript 中,我们使用newclass关键字来自动创建对象和方法。

\n
\n

我们使用对象来表示真实对象及其数据和功能。主要有04种方式:

\n

1. 每个对象都存储自己的函数及其相关数据。

\n

这是一个简单的解决方案,但它的缺点是假设我们有两个具有相同功能的对象=>每当我们创建一个新对象时,我们都会在内存中为所有数据和函数分配空间,而这些函数是相同的!不好的做法。这就是为什么出现第二种方法:原型链;为什么我们使用原型”。

\n

2. 使用原型链

\n

检查下面的代码:

\n
function userCreator (name, score) {\n const newUser = Object.create(userFunctionStore); // to link to the the new created object to its functionalities\n newUser.name = name;\n newUser.score = score;\n return newUser;\n};\nconst userFunctionStore = {\n increment: function(){this.score++;},\n login: function(){console.log("Logged in");}\n ...\n};\nconst user1 = userCreator("user1", 3);\nconst user2 = userCreator("user2", 5);\nuser1.increment();\n
Run Code Online (Sandbox Code Playgroud)\n

我们将公共功能存储increment在一个对象中。因此,新创建的用户在其自己的对象中找不到该函数时,它将通过 Object.create()to生成的链接进行查找functionStore,在这里它可以获得它要查找的函数increment

\n
\n

注意:所有对象都有一个__proto__属性,默认情况下链接到Object.prototype具有有用功能的大对象;类似于e hasOwnProperty检查对象是否具有给定属性的方法;userFunctionStore我们可以通过\xe2\x80\x99s属性在这里访问它__proto__

\n
\n

结论

\n

很好的方法,但很长而且不标准。

\n

3.使用new关键字来自动化艰苦的工作。

\n

看下面的代码

\n
function userCreator(name, score) {\n    const newUser = Object.create(functionStore);\n    newUser this.name = name;\n    newUser this.score = score;\n    return newUser;\n   };\n   functionStore userCreator.prototype // {};\n   functionStore userCreator.prototype.increment = function(){\n    this.score++;\n   }\n   const user1 = userCreator("user1", 3);\n
Run Code Online (Sandbox Code Playgroud)\n

使用 ofnew关键字后,它将恢复为

\n
function userCreator(name, score) {\n    this.name = name;\n    this.score = score;\n};\nuserCreator.prototype // {};\nuserCreator.prototype.increment = function(){\n    this.score++;\n}\nconst user1 = new userCreator("user1", 3);\n
Run Code Online (Sandbox Code Playgroud)\n

那么自动new会做03个主要的事情:

\n
    \n
  1. this: {}=> 自动创建this空对象以为其分配属性和值。
  2. \n
  3. __proto: userCreator.prototype=> 将__proto__隐藏属性添加到this新创建的对象并将其链接到userCreator.prototype存储常用功能的对象。
  4. \n
  5. return this=>返回 this新创建的对象。
  6. \n
\n

看这段代码:

\n
function userCreator(name, score){\n    this.name = name;\n    this.score = score;\n}\nuserCreator.prototype.increment = function(){ this.score++; };\nuserCreator.prototype.login = function(){ console.log("login"); };\nconst user1 = new userCreator("user1", 3)\nuser1.increment()\n
Run Code Online (Sandbox Code Playgroud)\n

这是上面解释的模拟。

\n
user1 = {\n  name: \'user1\',\n  score: 3,\n  __proto__: userCreator.prototype\n}\n\nuserCreator = function + prototype =>\n\nprototype = {\n    increment: function(){ this.score++; },\n    login: function(){ console.log("login"); }\n}\n
Run Code Online (Sandbox Code Playgroud)\n

结论

\n

写得更快。在专业代码实践中经常使用。很多开发人员不知道它是如何工作的。我们必须将函数的第一个字母大写,这样我们就知道它需要new工作!

\n

4.“语法糖”类

\n

在对象创建者本身中编写我们的共享(公共)方法。代码应该是:

\n
class UserCreator {\n constructor (name, score){\n this.name = name;\n this.score = score;\n }\n increment (){ this.score++; }\n login (){ console.log("login"); }\n}\nconst user1 = new UserCreator("user1", 3);\nuser1.increment();\n\n
Run Code Online (Sandbox Code Playgroud)\n

结论

\n

这种方法正在成为一种新标准,感觉更像其他语言的风格(例如Python)

\n
\n

非常重要的class是,这个关键字只是为了消除使用new关键字的混乱,但在幕后它绝对是作为相同的new关键字工作的。所以不要对其他语言感到困惑。

\n
\n

参考

\n

所有学分均归于本课程JavaScript: The Hard Parts, v2

\n