原型的由来

Posted 2021-09-28 前端要学的好多哦

简介

作为一个前端小小小的程序员，美名前端工程师，在此希望在座的各位能保持学习的好奇心与热情，能一直坚持走下去，谁叫前端要学的这么多呢。第一次写文章，希望能和在此道路上一直走下去的人一起共勉。

本篇文章对新手有点不太友好，建议有点基础在看。
以下内容参考了《javascript高级程序设计(第3版)》里第6章的面向对象的程序设计。

原型的由来

在讲原型由来的开始前，我们自己问一下自己，为啥需要原型呢？
一句话，方便，节约空间。
那接下去我们就来讲讲怎么方便节约空间了，我们以前创建对象的方式，一般都是对象字面量或者调用系统的构造函数的方式。

对象字面量的方式

let obj = {
  name: "xm",
  age: 18,
  say: function() {
    console.log("hi");
  }
}
console.log(obj);//{name: "xm", age: 18, say: ƒ}

调用系统的构造函数

let obj = new Object();
obj.name = "xm";
obj.age = 18;
obj.say = function() {
  console.log("hi");
}
console.log(obj);//{name: "xm", age: 18, say: ƒ}

对比上面两种创建对象的方式，对象字面量的代码更少，也更利于大家理解。但是当我们想要创建很多相同属性的对象，就会产生大量重复的代码。为了解决这个问题，人们开始使用工厂模式的一种变体。

工厂模式

工厂模式，说白了就是抽象了创建对象的过程，我们只需要传入参数即可，创建对象的过程由内部函数实现。这里是因为js无法创建类，所以用函数封装的方式来隐藏创建对象的细节。

function createPerson(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.say = function () {
    console.log("hi");
  }
  return obj;
}

var person1 = createPerson("xm", 18);
var person2 = createPerson("hh", 19);
console.log(person1);//{name: "xm", age: 18, say: ƒ}
console.log(person2);//{name: "hh", age: 19, say: ƒ}

这样就可以无数次地调用这个函数来创建很多对象，至少比一开始省了不少代码。但是工厂模式虽然解决了创建多个类似对象的问题，但是却无法知道对象的类型，即是谁创建了这个对象，因为大家都是 new Object 出来的。所以就出现了新的模式，构造函数模式。

构造函数模式

构造函数模式，就是用 new 函数的方式，自定义对象的属性与方法。直接上代码

function Person (name, age) {
  this.name = name;
  this.age = age;
  this.say = function () {
    console.log("hi");
  }
}

var person1 = new Person("xm", 18);
var person2 = new Person("hh", 19);
console.log(person1);//Person {name: "xm", age: 18}
console.log(person2);//Person {name: "xm", age: 18}
console.log(person1.constructor.name);//Person
console.log(person2.constructor.name);//Person
//这两个实例里面的方法不一样，即使看上去是一样的
console.log(person1.say === person2.say);//false

这里只要记住 new 函数的时候执行了里面的代码，函数里面的 this 就是指向这个新创建的对象，并且返回了这个新的对象。这里的 constructor 最初就是用来标识对象类型的。构造函数虽然很好用，但是它还是有缺点。就是函数里面的方法都要在每个实例里重新创建一遍。我们这里把用 new 函数创建出来的新对象叫做实例。在这里创建两个完成同样事情的方法实例完全没有必要，我们就可以这样写。

把函数定义转移到构造函数外面

function Person (name, age) {
  this.name = name;
  this.age = age;
  this.say = say;
}

function say() {
  console.log("hi");
}
var person1 = new Person("xm", 18);
var person2 = new Person("hh", 19);
console.log(person1.say === person2.say);//true

好像完美了，但是由于把定义函数写在了外面，污染了全局变量，并且没有封装性可言了（内部函数的代码暴露了出来）。所以那个它，原型来了。

原型

看到这里才终于讲到原型，真的不容易啊，终于出来了。这里我就简略的讲一下原型基本的概念，说穿了，就是一个可以让所有实例共享属性和方法的公共对象，每个函数都有一个 prototype 属性，它是一个指针，指向这个对象。上代码！

function Person(name, age) {
  this.name = name;
  this.age = age; 
}
Person.prototype.say = function () {
  console.log("hi");
}
var person1 = new Person("xm", 18);
var person2 = new Person("hh", 19);
console.log(person1.say === person2.say);//true

没错，妈妈再也不用担心我创建多个对象的时候，代码又多，还浪费内存空间了，原型帮你统统解决。

结语

所以在构造函数和原型的共同作用下，我们可以方便快速的创建很多实例对象，也不用担心每个实例上重复的公共方法，浪费内存的烦恼。
我讲这么多废话是不是很烦，感觉扯了一大堆没用的东西，但是在此我想和大家说，我们学一个新的东西最好能知道它存在的意义。因为这样，我们才能更好的知道它用在哪里，更好的便于我们的理解，主要是不容易忘。那今天原型的由来就讲到这里了，下一篇就开始正式讲原型与原型链了哈。谢谢大家听我扯了这么多，请大家踊跃提问，提出我的错误，一起进步！！！