再和“面向对象”谈恋爱—面向对象编程概念-CSDN博客

　　通过前两篇文章，我们了解了对象的概念以及面向对象里的相关概念等知识，那前面说了对象分类里的前两种，这篇文章要详细去说第三种“自定义对象”，那真正的好戏这就来了!

　　面向对象编程概念

　　面向对象编程的概念非常早就有了，大多数的传统语言都是面向对象编程语言，如C++、Java等。ECMAScript花了大量的精力编写了一堆内置对象，这是为什么呢?JavaScript的设计者其实也想向面向对象的语言靠齐。说到底面向对象才是程序语言的根本。

　　前面说过在JavaScript里对象分为三种，全局对象、内置对象、自定义对象。其实面向对象编程说的就是自定义对象。JavaScript给了我们很多内置对象，但是这些对象也不能够满足我们的需求。所以我们就需要自己写一些对象了。那面向对象是用来干嘛的?就是用来实现一个个功能的。换句话说，我们以后实现的每一个功能都是一个对象，这个对象的语法要像内置对象的语法一样，再者说就是模仿内置对象实现各种功能，这就叫面向对象编程!

　　面向过程与面向对象

　　面向过程的程序，没有属性与方法的概念，所有的东西都是单独写一套，无法扩展。面向对象的程序是以对象为准则，一个功能就是一个对象，把变量与函数做为这个对象的属性与方法去用，扩展性非常高。

　　面向过程编程

　　//所有的属性都存在变量里const lis=document.querySelectorAll(li);const leftBtn=document.querySelector(.leftBtn);const rightBtn=document.querySelector(.leftBtn);//所有的功能都是独立出来的函数function changeCircle(){ //...}function move(){ //....}//用的时候，需要去调对应的函数leftBtn.οnclick=function(){ changeCircle(); move();}

　　面向对象编程

　　再比如Date对象，它是用来操作日期的。有很多的属性与方法。那JavaScript里并没有一个日历对象吧。我们可以写一个日历对象，它就是专门用来操作日历的。比如叫calendar，那我按照内置对象的语法实现一个calendar对象，里面也有很多属性与方法，new一个就是一个实际的日历。那实现这个calendar对象就叫面向对象编程

　　//内置对象const date=new Date();date.getMonth(); //5//自定义对象const Calendar=function(){ //...}const calendar=new Calendar();calendar.getLunar(); //获取阴历

　　ECMAScript 5里的面向对象编程

　　JavaScript中的面向对象是通过构造函数完成的

　　大家经常听到一个词叫“类”，在面试的时候、看面试题的时候，都会遇到一个“请解释一下类的概念”。每看到这种题的时候，我都会有种骂娘的冲动。解释你妹呀，ES5中压根就没类这个概念。我估计出这种题的人都是搞后端开发的。ES5中没有类的概念，只有构造函数。

　　我们经常会用下面的这个例子来演示一个面向对象编程的步骤，而这个正是ES5当中写面向对象的过程

　　//构造函数function Person(name,age){ this.name=name; //把属性添加到this上 this.age=age;}//把方法添加到原型上Person.prototype.showName=function(){ console.log(this.name);}console.dir(Person);//实例const p1=new Person('kaivon',18);p1.showName();

　　我在这里要黑一下ES5的面向对象编程，上面的这种形式严格来讲不叫面向对象的程序。如果你跟一个Java程序员说：“哎，搞Java的，看看我们JS写的面向对象，是不是倍儿棒!”。我估计他会喷你一脸血，这他妈也能叫面向对象，你是猴子请来的逗逼么，过来搞笑的么?连类都没有，能称之为面向对象，你真是随心所欲呀~ 而你还一脸无辜的说：“难道Person不是类么?”。ES5里并没有类的概念，所以严格上来讲这是个假的面向对象

　　ECMAScript 6里的面向对象编程

　　现在好了，ES6终于听到别人鄙视我们了，给我们提供了类这个概念，其实是向传统语言更靠齐了。前端终于可以扬眉吐气了，你可以昂首挺胸地说JavaScript里有类了!但是ES6提供的类其实就是个语法糖，何为语法糖?就是把复杂的东西包装了一下，变得简单的，内部原理还是通过构造函数来完成的(就是穿了一个马甲)。那不管怎么说，他偷也好抢也好现在就是有了，就算是进步了!

　　有了类之后呢，生成实例名义上就不通过构造函数了而通过类(内部原理还是通过构造函数，只是让我们写起来，理解起来简单了)

　　class Person{ //声明一个类 constructor(name,age){ //构造函数 this.name=name; this.age=age; } showName(){ //这里的方法最终会放到原型上 console.log(this.name); }}console.dir(Person);//生成实例const p1=new Person('kaivon',18);p1.showName();

　　下一篇详细介绍ES6里面的class概念