外国知名个人网站,网站建设 通知,平面设计网站源码,网站关键词和网站描述本文主要讲了原型如何在JavaScript中工作#xff0c;以及如何通过[Prototype]所有对象共享的隐藏属性链接对象属性和方法#xff1b;以及如何创建自定义构造函数以及原型继承如何工作以传递属性和方法值。介绍JavaScript是一种基于原型的语言#xff0c;这意味着对象属性和方…本文主要讲了原型如何在JavaScript中工作以及如何通过[Prototype]所有对象共享的隐藏属性链接对象属性和方法以及如何创建自定义构造函数以及原型继承如何工作以传递属性和方法值。介绍JavaScript是一种基于原型的语言这意味着对象属性和方法可以通过具有克隆和扩展能力的通用对象共享。这被称为原型继承与类继承不同。在流行的面向对象编程语言中JavaScript是相对独特的因为其他著名的语言如PHP、Python和Java都是基于类的语言它们将类定义为对象的蓝图。在文中我们将学习什么是对象原型以及如何使用构造函数将原型扩展为新对象。我们还将学习继承和原型链。JavaScript原型JavaScript中的每个对象都有一个称为[[Prototype]]的内部属性。我们可以通过创建一个新的空对象来演示这一点。let x {};这是我们通常创建对象的方法但是请注意另一种实现方法是使用对象构造函数:let x new object()包围[[Prototype]]的双方括号表示它是一个内部属性不能在代码中直接访问。要找到这个新创建对象的[[Prototype]]我们将使用getPrototypeOf()方法。Object.getPrototypeOf(x);输出将由几个内置属性和方法组成。输出{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}找到的另一种方法[[Prototype]]是通过__proto__财产。__proto__是一个公开[[Prototype]]对象内部的属性。需要注意的是. _proto__是一个遗留特性不应该在生产代码中使用而且它也不是在每个现代浏览器中都存在。但是我们可以在本文中使用它来进行演示。x.__proto__;输出将与使用getPrototypeOf()相同。输出{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}重要的是JavaScript中的每个对象都有一个[[Prototype]]因为它为任何两个或多个对象创建了链接的方法。您创建的对象和内置对象(如Date和Array)一样具有[[Prototype]]。可以通过prototype属性将这个内部属性从一个对象引用到另一个对象我们将在本教程的后面看到这一点。原型继承当您试图访问对象的属性或方法时JavaScript将首先搜索对象本身如果没有找到它将搜索对象的[[Prototype]]。如果在查询对象及其[[Prototype]]后仍然没有找到匹配项JavaScript将检查被链接对象的原型并继续搜索直到到达原型链的末端。原型链的末尾是Object.prototype。所有对象都继承对象的属性和方法。任何超出链末端的搜索都会导致null。在我们的示例中x是一个从object继承而来的空对象。x可以使用对象具有的任何属性或方法比如toString()。x.toString();输出[object Object]这个原型链只有一个链长。x - Object。我们知道这一点因为如果我们试图将两个[[Prototype]]属性链接在一起它将为null。x.__proto__.__proto__;输出null让我们看看另一种类型的对象。如果您有使用JavaScript处理数组的经验就会知道它们有许多内置方法比如pop()和push()。创建新数组时可以访问这些方法的原因是创建的任何数组都可以访问array .prototype上的属性和方法。我们可以通过创建一个新的数组来测试它。let y [];请记住我们也可以把它写成数组构造函数让y new array()。如果我们查看新y数组的[[Prototype]]我们将看到它比x对象具有更多的属性和方法。它继承了Array.prototype中的所有内容。y.__proto__;[constructor: ƒ, concat: ƒ, pop: ƒ, push: ƒ, …]您将注意到原型上的构造函数属性被设置为Array()。构造函数属性返回对象的构造函数这是一种用于从函数构造对象的机制。我们现在可以将两个原型链接在一起因为在这种情况下我们的原型链更长。它看起来像y - Array - Object。y.__proto__.__proto__;{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}这个链现在引用Object.prototype。我们可以根据构造函数的Prototype属性测试内部的[[Prototype]]以确定它们引用的是相同的东西。y.__proto__ Array.prototype; // truey.__proto__.__proto__ Object.prototype; // true我们还可以使用isPrototypeOf()方法来实现这一点。Array.prototype.isPrototypeOf(y); // trueObject.prototype.isPrototypeOf(Array); // true我们可以使用instanceof操作符来测试构造函数的prototype属性是否出现在对象原型链中的任何位置。y instanceof Array; // true总而言之所有JavaScript对象都具有隐藏的内部[[Prototype]]属性(可能__proto__在某些浏览器中公开)。对象可以扩展并将继承[[Prototype]]其构造函数的属性和方法。这些原型可以被链接并且每个额外的对象将继承整个链中的所有内容。链以Object.prototype结束。构造器函数构造函数是用来构造新对象的函数。new操作符用于基于构造函数创建新实例。我们已经看到了一些内置的JavaScript构造函数比如new Array()和new Date()但是我们也可以创建自己的自定义模板来构建新对象。例如我们正在创建一个非常简单的基于文本的角色扮演游戏。用户可以选择一个角色然后选择他们将拥有的角色类别例如战士、治疗者、小偷等等。由于每个字符将共享许多特征例如具有名称、级别和生命值因此创建构造函数作为模板是有意义的。然而由于每个角色类可能有非常不同的能力我们希望确保每个角色只能访问自己的能力。让我们看看如何使用原型继承和构造函数来实现这一点。首先构造函数只是一个普通函数。当使用new关键字的实例调用它时它将成为一个构造函数。在JavaScript中我们按照惯例将构造函数的第一个字母大写。// Initialize a constructor function for a new Herofunction Hero(name, level) {this.name name; this.level level;}我们创建了一个名为Hero的构造函数它有两个参数:name和level。因为每个字符都有一个名称和一个级别所以每个新字符都有这些属性是有意义的。this关键字将引用创建的新实例因此将this.name设置为name参数将确保新对象具有name属性集。现在我们可以用new创建一个新的实例。let hero1 new Hero(Bjorn, 1);如果我们在控制台输出hero1我们将看到已经创建了一个新对象其中新属性按预期设置。输出Hero {name: Bjorn, level: 1}现在如果我们得到hero1的[[Prototype]]我们将能够看到构造函数Hero()。(记住它的输入与hero1相同。但这是正确的方法。)Object.getPrototypeOf(hero1);输出constructor: ƒ Hero(name, level)您可能注意到我们只在构造函数中定义了属性而没有定义方法。在JavaScript中为了提高效率和代码可读性通常在原型上定义方法。我们可以使用prototype向Hero添加一个方法。我们将创建一个greet()方法。// Add greet method to the Hero prototypeHero.prototype.greet function () {return ${this.name} says hello.;}因为greet()在Hero的原型中而hero1是Hero的一个实例所以这个方法对hero1是可用的。hero1.greet();输出Bjorn says hello.如果检查Hero的[[Prototype]]您将看到greet()现在是一个可用选项。这很好但是现在我们想要为英雄创建角色类。将每个类的所有功能都放到Hero构造函数中是没有意义的因为不同的类具有不同的功能。我们希望创建新的构造函数但也希望它们连接到原始的Hero。我们可以使用call()方法将属性从一个构造函数复制到另一个构造函数。让我们创建一个战士和一个治疗构造器。// Initialize Warrior constructorfunction Warrior(name, level, weapon) {// Chain constructor with callHero.call(this, name, level); // Add a new propertythis.weapon weapon;}// Initialize Healer constructorfunction Healer(name, level, spell) {Hero.call(this, name, level); this.spell spell;}两个新的构造函数现在都具有Hero和unqiue的属性。我们将把attack()方法添加到Warrior中而heal()方法添加到Healer中。Warrior.prototype.attack function () {return ${this.name} attacks with the ${this.weapon}.;}Healer.prototype.heal function () {return ${this.name} casts ${this.spell}.;}此时我们将使用两个可用的新字符类创建字符。const hero1 new Warrior(Bjorn, 1, axe);const hero2 new Healer(Kanin, 1, cure);hero1现在被认为是拥有新属性的战士。输出Warrior {name: Bjorn, level: 1, weapon: axe}我们可以使用我们在战士原型上设置的新方法。hero1.attack();ConsoleBjorn attacks with the axe.但是如果我们尝试使用原型链下面的方法会发生什么呢?hero1.greet();输出Uncaught TypeError: hero1.greet is not a function使用call()链接构造函数时原型属性和方法不会自动链接。我们将使用Object.create()来链接原型确保在创建并添加到原型的任何其他方法之前将其放置。Warrior.prototype Object.create(Hero.prototype);Healer.prototype Object.create(Hero.prototype);// All other prototype methods added below…现在我们可以在一个战士或治疗者的实例上成功地使用Hero的原型方法。hero1.greet();输出Bjorn says hello.这里是我们的角色创建页面的完整代码。// Initialize constructor functionsfunction Hero(name, level) {this.name name;this.level level;}function Warrior(name, level, weapon) {Hero.call(this, name, level);this.weapon weapon;}function Healer(name, level, spell) {Hero.call(this, name, level);this.spell spell;}// Link prototypes and add prototype methodsWarrior.prototype Object.create(Hero.prototype);Healer.prototype Object.create(Hero.prototype);Hero.prototype.greet function () {return ${this.name} says hello.;}Warrior.prototype.attack function () {return ${this.name} attacks with the ${this.weapon}.;}Healer.prototype.heal function () {return ${this.name} casts ${this.spell}.;}// Initialize individual character instancesconst hero1 new Warrior(Bjorn, 1, axe);const hero2 new Healer(Kanin, 1, cure);使用这段代码我们已经用基本属性创建了Hero类从原始构造函数创建了两个名为Warrior和Healer的字符类向原型添加了方法并创建了单独的字符实例。
