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)
所以我不确定使用原型的优势是什么!
这里我试图通过一个例子来向大家展示 JavaScript 中原型的优势。
\n类、原型、面向对象 JavaScript 是构建复杂代码的范例。
\n\n\n在 JavaScript 中,我们使用 原型链,这是一个可以模拟 OOP 的底层功能,它本身就是一个引人注目的工具。
\n在新版本的 javascript 中,我们使用
\nnew和class关键字来自动创建对象和方法。
我们使用对象来表示真实对象及其数据和功能。主要有04种方式:
\n这是一个简单的解决方案,但它的缺点是假设我们有两个具有相同功能的对象=>每当我们创建一个新对象时,我们都会在内存中为所有数据和函数分配空间,而这些函数是相同的!不好的做法。这就是为什么出现第二种方法:原型链;为什么我们使用原型”。
\n检查下面的代码:
\nfunction 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();\nRun Code Online (Sandbox Code Playgroud)\n我们将公共功能存储increment在一个对象中。因此,新创建的用户在其自己的对象中找不到该函数时,它将通过 Object.create()to生成的链接进行查找functionStore,在这里它可以获得它要查找的函数increment。
\n\n注意:所有对象都有一个
\n__proto__属性,默认情况下链接到Object.prototype具有有用功能的大对象;类似于e hasOwnProperty检查对象是否具有给定属性的方法;userFunctionStore我们可以通过\xe2\x80\x99s属性在这里访问它__proto__。
很好的方法,但很长而且不标准。
\nnew关键字来自动化艰苦的工作。看下面的代码
\nfunction 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);\nRun Code Online (Sandbox Code Playgroud)\n使用 ofnew关键字后,它将恢复为
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);\nRun Code Online (Sandbox Code Playgroud)\n那么自动new会做03个主要的事情:
this: {}=> 自动创建this空对象以为其分配属性和值。__proto: userCreator.prototype=> 将__proto__隐藏属性添加到this新创建的对象并将其链接到userCreator.prototype存储常用功能的对象。return this=>返回 this新创建的对象。看这段代码:
\nfunction 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()\nRun Code Online (Sandbox Code Playgroud)\n这是上面解释的模拟。
\nuser1 = {\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}\nRun Code Online (Sandbox Code Playgroud)\n写得更快。在专业代码实践中经常使用。很多开发人员不知道它是如何工作的。我们必须将函数的第一个字母大写,这样我们就知道它需要new工作!
在对象创建者本身中编写我们的共享(公共)方法。代码应该是:
\nclass 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\nRun Code Online (Sandbox Code Playgroud)\n这种方法正在成为一种新标准,感觉更像其他语言的风格(例如Python)
\n\n\n非常重要的
\nclass是,这个关键字只是为了消除使用new关键字的混乱,但在幕后它绝对是作为相同的new关键字工作的。所以不要对其他语言感到困惑。
所有学分均归于本课程JavaScript: The Hard Parts, v2。
\n| 归档时间: |
|
| 查看次数: |
89 次 |
| 最近记录: |