JavaScript中原型与原型链的案例分析

这篇文章给大家分享的是有关JavaScript中原型与原型链的案例分析的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

对于很多前端开发者而言，JavaScript中原型与原型链是一个比较容易疑惑的点，所以本文记录了自己对应这方面的一点理解，以后有更深的理解再来更新。

对象

想要了解原型与原型链，首先要了解什么是对象？面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式，即把实际上各种复杂关系抽象为多个对象后对它们进行分工合作从而完成对现实环境的模拟。因此对象是单个实物的抽象，抽象所得的对象是一个容器，拥有属性（property）和方法（method）。例如，我们把学生抽象为student对象，那么属性就可以用来记录具体是哪一个年级的学生（如初一、高一等），用方法来表示学生的某种行为（如学习、玩耍等）。

构造函数（constructor）、实例对象与继承

当我们想要使用面向对象编程时，首要任务是生成对象。在JavaScript中，构造函数（constructor）就是专门用来生成实例对象的。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。

var Student= function () {
  this.age= 18;
};

var s = new Student();
s.age// 18

特别需要注意的是：

• 以上代码中，Student就是构造函数，但是为了与普通函数区分，其名字的首字母要大写。

• 函数体内部使用了this关键字，代表了所要生成的对象实例。

• 生成对象的时候，必须使用new命令。只有new了才会生成新的实例对象。

除了用new命令生成新的实例对象，我们还可以通过Object.create() 来创建，这种方法适用于我们没有办法拿到构造函数而只能拿到一个现有的对象。

var student1 = {
    name:'Solar',
    age:18,
    greeting:function(){
        console.log('Hello!');
    }
};
var student2 = Object.create(student1);
student2.name//Solar
student2.greeting()//Hello!

上面代码中，Object.create方法以student1对象为原型，生成了student2对象。student2继承了student1的所有属性和方法。

原型对象（prototype）

首先让我们来了解一下为什么会有原型对象（prototype）？

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function(){
    console.log('Hello!');
  }
}

var student1= new Student('Solar', '18');
var student2 = new Student('Moonbyul', '17');

student1.greeting=== student2.greeting
// false

从以上代码可以看到，通过构造函数实例出的对象，虽然都具有greeting方法，但是因为这个方法是生成在自身的每个实例对象上，也就是每生成一个实例就会新建一个greeting方法。但是其实greeting方法都是同样的，没有必要多次生成造成资源浪费，于是JavaScript的原型对象就诞生了。JavaScript规定，每个函数都有一个prototype属性，指向一个对象。

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'

上面代码中，构造函数Animal的prototype属性，就是实例对象cat1和cat2的原型对象。原型对象上添加一个color属性，结果，实例对象都共享了该属性。

原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。

Animal.prototype.color = 'yellow';
cat1.color // "yellow"
cat2.color // "yellow"

如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法。

cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';

原型链（prototype chain）

JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……

如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。也就是说，所有对象都继承了Object.prototype的属性。Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。

感谢各位的阅读！关于JavaScript中原型与原型链的案例分析就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！