在 javascript 中使用原型的主要优点是啥？ [复制]

Posted 2023-02-21

技术标签:

【中文标题】在 javascript 中使用原型的主要优点是啥？ [复制]【英文标题】：What is the main advantage of using prototype in javascript? [duplicate]在 javascript 中使用原型的主要优点是什么？ [复制] 【发布时间】：2021-06-27 18:38:26 【问题描述】：

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();

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

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();

所以我也不确定使用原型的好处是什么！

【问题讨论】：

使用原型启用继承或混合模式。我推荐你阅读Object.prototypes和Lookup Mechanisms “这与不使用原型完全一样”——事实并非如此。虽然从表面上看，在这个人为的例子中，Candy 在第二个例子中的每个实例都有它自己的 printName 函数，而在第一个例子中只有 one printName 函数，并且所有实例都可以通过原型链访问它。 【参考方案1】：

这里我试图给你一个例子来向你展示 javascript 中原型的优势。

例如：类

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

在 JavaScript 中，我们使用 原型链，这是一种支持 OOP 模拟的底层特性，它本身就是一个引人注目的工具。

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

我们使用对象来表示具有数据和功能的真实对象。这样做主要有04种方式：

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

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

2。使用原型链：

检查下面的代码：

function userCreator (name, score) 
 const newUser = Object.create(userFunctionStore); // to link to the the new created object to its functionalities
 newUser.name = name;
 newUser.score = score;
 return newUser;
;
const userFunctionStore = 
 increment: function()this.score++;,
 login: function()console.log("Logged in");
 ...
;
const user1 = userCreator("user1", 3);
const user2 = userCreator("user2", 5);
user1.increment();

我们将通用函数increment 存储在一个对象中。因此，当新创建的用户在其自己的对象中找不到函数时，它将通过其生成的链接从Object.create() 到functionStore 进行查找，在这里它可以获取它寻找的函数increment。

注意：所有对象都有一个__proto__ 属性，默认情况下链接到一个具有有用功能的大对象Object.prototype；像 e hasOwnProperty 检查对象是否具有给定属性的方法；我们可以通过userFunctionStore的__proto__属性在这里访问它。

结论

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

3。使用`new` 关键字自动完成繁重的工作。

看下面的代码

function userCreator(name, score) 
    const newUser = Object.create(functionStore);
    newUser this.name = name;
    newUser this.score = score;
    return newUser;
   ;
   functionStore userCreator.prototype // ;
   functionStore userCreator.prototype.increment = function()
    this.score++;
   
   const user1 = userCreator("user1", 3);

使用new关键字会恢复到

function userCreator(name, score) 
    this.name = name;
    this.score = score;
;
userCreator.prototype // ;
userCreator.prototype.increment = function()
    this.score++;

const user1 = new userCreator("user1", 3);

所以new 会自动做 03 件主要事情：

this:

this

__proto: userCreator.prototype

__proto__

this

userCreator.prototype

return this

this

看看这段代码：

function userCreator(name, score)
    this.name = name;
    this.score = score;

userCreator.prototype.increment = function() this.score++; ;
userCreator.prototype.login = function() console.log("login"); ;
const user1 = new userCreator("user1", 3)
user1.increment()

这是上面解释的模拟。

user1 = 
  name: 'user1',
  score: 3,
  __proto__: userCreator.prototype


userCreator = function + prototype =>

prototype = 
    increment: function() this.score++; ,
    login: function() console.log("login");

结论

写得更快。在专业代码的实践中经常使用。许多开发人员不知道它是如何工作的。我们必须将函数的首字母大写，所以我们知道它需要new 才能工作！

4。 “语法糖”类

在对象创建器本身中编写我们的共享（通用）方法。代码应该是：

class UserCreator 
 constructor (name, score)
 this.name = name;
 this.score = score;
 
 increment () this.score++; 
 login () console.log("login"); 

const user1 = new UserCreator("user1", 3);
user1.increment();