#大有学问#

前端小白Earl笔记之六

面向对象编程

面向对象编程（Object Oriented Programming，简称OOP），是一种程序设计范型。面向对象编程有两个核心概念——类和对象，对象是类的实例。面向对象编程把对象作为程序的基本单元，将程序和数据封装其中，以提高重用性、灵活性和扩展性。

——《wiki百科》

关于面向过程编程和面向对象编程，网上有很经典的“蛋炒饭VS盖浇饭”的比喻。面向过程编程是“蛋炒饭”，耦合度高但复用性、可维护性和扩展性不如面向对象；面向对象编程就好比“盖浇饭”，菜和饭分离，复用性、可维护性和扩展性较好，但耦合度较低。

面向对象编程的特性有封装、继承、抽象和多态。JavaScript不同于其他语言，面向对象编程相对较少。在ES6之前JavaScript甚至没有class（类），是基于构造函数和原型链实现OOP的。

构造函数

面向对象编程的特性，比如封装性、继承性等，可以借助于构造函数来实现。构造函数将变量和函数组合到了一起并能通过 this 实现数据的共享，而借助构造函数创建出来的实例对象之间是彼此独立，互不影响的。

原型继承回顾

原型和原型链回顾：

JavaScript：原型和原型链

Object.create回顾：

JavaScript：Object.create()与new Object()的区别

原型链查找规则

JavaScript中，访问一个对象的某个属性的时候，会先在这个对象本身属性上查找。如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype。如果还没有找到就会再在构造函数的prototype的__proto__中查找，一直到原型链末端的Object.prototype。

可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

范例

function Person(name) {  this.name = name;}Person.prototype.say = function(){ alert('Hello, I am ' + this.name + '!');}function Man(name,age) {  Person.call(this, name);  this.age = age;}Man.prototype = Object.create(Person.prototype)Man.prototype.smoke = function(){ alert(this.name + ' is smoking!');}const earl = new Man('earl','18')earl.name    // "earl"earl.age     // "18"earl.say()   // "Hello, I am earl!"earl.smoke() // "earl is smoking!"console.log(Man.prototype.__proto__ === Person.prototype)  // true

从这个例子中可以看到，如果我们要从Person扩展出Man，继承Person的一些属性和方法，那我们不仅需要在Man中调用Person（绑定this），而且需要将Man的原型指向Person.prototype（继承原型上的方法）。

原型继承写法

（1）Man.prototype = Person.prototype

这个写法是不可取的。Man.prototype和Person.prototype指向同一个对象，修改一个就会都受到影响。这种情况下，定义两个不同的构造函数就显得没有意义。

（2）Man.prototype = new Person()

很多教程都讲过用这个写法。只是有些大神认为，Man.prototype并不是一个实例，为了继承去调用构造函数创建实例，会显得有点奇怪。

（3）Man.prototype = Object.create(Person.prototype)

在ES5有了Object.create()之后，这种写法就是利用Object.create()创建了一个空对象，传入Person.prototype来作为新对象的原型(也就是说Man.prototype.__proto__ === Person.prototype会返回true)。

这个时候原型链就变成了：

new Man() ----> Man.prototype ----> Person.prototype ----> Object.prototype ----> null