三分钟带你理解JS原型

一. 理论基础

1. 普通对象和函数对象

JavaScript中，万物皆对象！但是对象也是有区别的，分为普通对象和函数对象。

function F(){}; //F：普通对象
var f = new Function(); //f: 函数对象
var o = new Object(); //o: 函数对象

Object、Function是js自带的函数对象。

2. 构造函数

与大部分面向对象的语言不同，JavaScript中并没有引入类（class）的概念，但JavaScript仍然大量使用了对象，为了保证对象之间的联系，JavaScript引入了原型与原型链的概念。
与Java不同，JavaScript的new操作符后面跟的并非类名而是函数名，JavaScript并非通过类而是直接通过构造函数来创建实例。

function Dog(name, color) {
    this.name = name
    this.color = color
    this.bark = () => {
        console.log('wangwang~')
    }
}

const dog1 = new Dog('dog1', 'black')
const dog2 = new Dog('dog2', 'white')

上述代码中，有两个实例被创建，它们有自己的属性，但bark方法是一样的，而通过构造函数创建实例的时候，每个实例都需要创建这个方法。为什么不把这个方法放到一个单独的位置，并让所有实例都可以访问到呢？

3. 构造函数和普通函数

构造函数和普通函数主要有以下区别：

• 调用方式：
  （1）构造函数需要使用new运算符调用，如果没有参数，可以省略括号，比如new Object
  （2）普通函数的调用不需要new运算符，而且必须有括号

• this指向
  （1）构造函数的this会指向创建的对象实例上
  （2）普通函数的this则指向函数的调用者

• 命名方式
  （1）构造函数名称首字母要大写
  （2）普通函数首字母要小写，使用驼峰命名方式

---

这里就需要用到原型。

二. 原型

• 每一个构造函数都有一个prototype属性，指向原型对象。当使用这个构造函数创建实例的时候，prototype属性指向的原型对象，就是实例的原型对象。
• 原型对象默认拥有一个constructor属性，指向指向它的那个构造函数。
• 每个对象都有一个隐藏属性obj._proto_，每个函数对象都有一个function.prototype，它们指向同一原型对象。
• 原型对象就是用来存放实例中共有的属性。
• 访问对象属性时，会先在对象自身属性内查找，若没有找到，则会跳转到对象的原型对象中查找。

那么上述代码就可以修改为

 function Dog(name, color) {
    this.name = name
    this.color = color
}

Dog.prototype.bark = () => {
    console.log('wangwang~')
}

接着就可以创建实例，并访问它的bark方法：

 const dog1 = new Dog('dog1', 'black')
dog1.bark()  //'wangwang~'

这个时候，我们还可以重写bark方法：

const dog2 = new Dog('dog2', 'white')
dog2.bark = () => {
    console.log('miaomiaomiao???')
}
dog1.bark()  //'wangwang~'
dog2.bark()  //'miaomiaomiao???'

由上可知，重写的bark方法是为自己添加了一个新的方法使原型中的bark方法被覆盖了，而并非直接修改原型中的方法。
要修改原型中的方法应该这样：

Dog.prototype.bark = () => {
    console.log('haha~')
}
dog1.bark()  //'haha~'
dog2.bark()  //'haha~'

三. 结语

如有遗漏，后面会继续总结。

参考
https://www.jianshu.com/p/dee9f8b14771
https://juejin.im/post/5a94c0de5188257a8929d837
https://www.cnblogs.com/shayueblog/p/5813230.html
http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html