乐趣区

关于程序员:JavaScript原型原型对象原型链系列详解一

jiezi

(一)、JavaScript 原型

为感激大家的反对，特发福利红包（支 F 宝口令红包），点击返回支付：Gitee

原型

JavaScript 是一门面向对象的编程语言，其中原型（prototype）是一个重要的概念，它提供了一种创建对象的形式，使对象能够共享属性和办法。在 JavaScript 中，每个对象都有一个原型，能够从原型中继承属性和办法。

原型的定义

JavaScript 的原型是一个对象，它蕴含了一些公共的属性和办法。当咱们创立一个新的对象时，它会从它的构造函数的原型中继承这些属性和办法。JavaScript 的原型链是由每个对象的 [[Prototype]] 属性所连贯的，这些属性指向它的原型对象。

咱们能够通过给构造函数的 prototype 属性赋值来创立一个原型，也能够通过 Object.create() 办法创立一个原型对象。

// 创立原型的两种形式

// 形式一：通过构造函数的 prototype 属性创立
function Person() {}
Person.prototype.name = 'Tom';
Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}.`);
};

// 形式二：通过 Object.create() 办法创立
const cat = {breed: 'Persian'};
const kitten = Object.create(cat);
kitten.name = 'Whiskers';
kitten.meow = function() {console.log(`${this.name} says "Meow!"`);
};

在以上示例中，咱们通过构造函数的 prototype 属性和 Object.create() 办法创立了两个不同的原型对象。其中，Person 构造函数的原型对象蕴含了 name 和 sayHello 属性和办法，而 cat 对象是一个一般对象，它的原型对象是 Object.prototype。

原型的原理

JavaScript 原型的原理是基于 JavaScript 的面向对象编程中的原型继承。在原型继承中，一个对象能够从另一个对象中继承属性和办法。当咱们拜访一个对象的属性或办法时，JavaScript 会先在该对象自身中查找，如果找不到，就会到该对象的原型对象中查找。如果还是找不到，就会到原型对象的原型对象中查找，始终到最顶层的 Object.prototype 对象为止。如果在查找过程中找到了对应的属性或办法，就会应用它。如果找不到，就会返回 undefined。

以下代码示例演示了原型继承的基本原理：

// 创立一个原型对象
const animal = {makeSound() {console.log('I am making a sound');
  }
};

// 创立一个子对象，继承自原型对象
const cat = Object.create(animal);
cat.makeSound(); // I am making a sound

// 在子对象上增加新的属性和办法
cat.name = 'Whiskers';
cat.meow = function() {console.log(`${this.name} says "Meow!"`);
};
cat.meow(); // Whiskers

在以上代码示例中，咱们首先创立了一个原型对象 animal，它蕴含了一个 makeSound 办法。而后，咱们应用 Object.create() 办法创立了一个新的对象 cat，它继承自 animal 原型对象，并且领有了 makeSound 办法。最初，咱们给 cat 对象增加了 name 属性和 meow 办法，它们只存在于 cat 对象自身中，而不是在 animal 原型对象中。

当咱们调用 cat.makeSound() 办法时，JavaScript 首先在 cat 对象自身中查找，发现它没有 makeSound 办法，于是就去它的原型对象 animal 中查找。在 animal 原型对象中找到了 makeSound 办法，于是调用它并输入了字符串 “I am making a sound”。

当咱们调用 cat.meow() 办法时，JavaScript 首先在 cat 对象自身中查找，发现它领有 meow 办法，于是调用它并输入了字符串 “Whiskers says “Meow!””。

原型的规定

  1. 所有的对象都有一个原型对象（prototype）属性，指向它们的原型对象。
  2. 原型对象也是一个对象，因而也有本人的原型对象，即原型链的顶端是一个指向 null 的对象。
  3. 对象能够通过原型链拜访到它们的原型对象上定义的属性和办法。
  4. 如果对象自身和原型对象都定义了同名的属性或办法，则对象自身的属性或办法优先级更高。
  5. 如果对象调用一个不存在于本身和原型对象中的属性或办法，则会沿着原型链向上查找，直到找到该属性或办法或者原型链的顶端为止。如果都找不到则返回 undefined。
  6. 如果对象调用一个办法时，办法中的 this 关键字会指向该对象。

原型的利用

JavaScript 的原型机制在面向对象编程中施展了重要的作用，它容许咱们创立一个类或者对象的模板，而后通过继承来创立新的对象，从而大大减少了反复编写代码的工作量。

以下是一个应用原型继承的示例，它定义了一个 Animal 类和一个 Cat 类，其中 Cat 类继承自 Animal 类：

// Animal 类
function Animal(name) {this.name = name;}

Animal.prototype.makeSound = function() {console.log('I am making a sound');
};

// Cat 类
function Cat(name) {Animal.call(this, name);
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.meow = function() {console.log(`${this.name} says "Meow!"`);
};

// 创立 Cat 对象
const whiskers = new Cat('Whiskers');
whiskers.makeSound(); // I am making a sound
whiskers.meow(); // Whiskers says "Meow!"

在以上示例中，咱们定义了一个 Animal 类和一个 Cat 类。Animal 类蕴含了一个构造函数和一个 makeSound 办法，Cat 类继承自 Animal 类，并蕴含了一个 meow 办法。咱们通过在 Cat.prototype 对象上调用 Object.create() 办法，将 Cat.prototype 对象的原型对象设置为 Animal.prototype，从而实现了 Cat 类的继承。最初，咱们创立了一个 Cat 对象 whiskers，并调用了它的 makeSound 和 meow 办法。

为不便宽广前端技术爱好者，整合了前端技术相干常识和资源，且有很多福利能够支付：Gitee

本文由 mdnice 多平台公布

退出移动版