再和“面向对象”谈恋爱 - 面向对象编程观点（三）

2019年8月22日 234次阅读 来源: kaivon

经由历程前两篇文章，我们了解了对象的观点以及面向对象里的相干观点等学问，那前面说了对象分类里的前两种，这篇文章要细致去说第三种“自定义对象”，那真正的好戏这就来了！

面向对象编程观点

面向对象编程的观点异常早就有了，大多数的传统言语都是面向对象编程言语，如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.onclick=function(){
    changeCircle();
    move();
}

面向对象编程

function Pic(){
    //一切的变量都变成了对象的属性
    this.lis=document.querySelectorAll("li");
    this.leftBtn=document.querySelector(".leftBtn");
    this.rightBtn=document.querySelector(".leftBtn");
    
    const This=this;    //存一下this，为了在函数内里用
    this.leftBtn.onclick=function(){
        This.changeCircle();
        This.move();
    }
}

//一切的功用都变成了对象的要领
Pic.prototype.changeCircle=function(){
//...
}
Pic.prototype.move=function(){
//...
};

//用的时刻只需new一个就能够
const showImg=new Pic();

再比方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观点

    原文作者：kaivon
    原文地址: https://segmentfault.com/a/1190000015906748
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞