资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/再和“面向对象”谈恋爱 - 面向对象编程概念（三）

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

Cruise_Chan / 2708人阅读

摘要：说到底面向对象才是程序语言的根本。其实面向对象编程说的就是自定义对象。里并没有类的概念，所以严格上来讲这是个假的面向对象里的面向对象编程现在好了，终于听到别人鄙视我们了，给我们提供了类这个概念，其实是向传统语言更靠齐了。

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

面向对象编程概念

面向对象编程的概念非常早就有了，大多数的传统语言都是面向对象编程语言，如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概念

云服务器 GPU云服务器 面向对象编程 面向对象java编程 面向对象编程语言 java面向对象编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96658.html

相关文章

  • 再和“面向对象”谈恋爱 - 图片预加载组件（七）

    摘要：源码下载至此再和面向对象谈恋爱系列文章已经全部更新完毕写文章不易，且行且珍惜 再和面向对象谈恋爱 - 对象简介（一）再和面向对象谈恋爱 - 对象相关概念（二）再和面向对象谈恋爱 - 面向对象编程概念（三）再和面向对象谈恋爱 - class（四）再和面向对象谈恋爱 - 继承（五）再和面向对象谈恋爱 - super（六） 通过前面的六篇文章已经把ES6的面向对象跟大伙说清楚了，大家最关心的...

    caoym 评论0 收藏0

  • 再和“面向对象”谈恋爱 - class（四）

    摘要：在上一篇文章里我介绍了一下面向对象编程的概念，在最后终于喜出望外看到了提供了类的概念了。而到了里面真正的类与构造函数现在是分离的，通过上面的代码可以看出来，这种写法正是面向对象的正统写法。 在上一篇文章里我介绍了一下面向对象编程的概念，在最后终于喜出望外看到了ES6提供了类的概念了。那这个类如何去用，是这篇文章的主题。ES6给我们提供了一个class关键字。这个关键字跟以前的var l...

    刘东 评论0 收藏0

  • 再和“面向对象”谈恋爱 - 对象相关概念（二）

    摘要：所有的对象都是由构造函数创建的对象哪来的构造函数生的。而普通函数不能生成对象不孕不育，构造函数可以生成对象有生育能力。别急，记住那句话永远指向实例对象对应的构造函数的，那就先看实例对象是谁。 上一篇文章把对象的概念讲解了一下，这篇文章要重点解释最让大家犯迷糊的一些概念，包括 构造函数 实例 继承 构造函数的属性与方法（私有属性与方法） 实例的属性与方法（共享属性与方法） protot...

    qpwoeiru96 评论0 收藏0

  • 再和“面向对象”谈恋爱 - super（六）

    摘要：同时弹出的结果是指向了子类，又说明虽然调用的是父类的构造函数，但是调用完后会指向子类，指向也被改成了子类的实例。 在上一篇文章里介绍了继承，那其中说过一个很关键的东西想要继承子类里里必需先调用一个super方法。而super的作用绝对是价值连城！同时super的作用还有多种，并且跟你的使用环境有关系。 1、当作函数使用 super被当作函数使用，这种情况是最普遍的，上一篇文章里已经使用...

    Towers 评论0 收藏0

  • 再和“面向对象”谈恋爱 - 继承（五）

    摘要：面向对象里最大的特点应该就属继承了。在第二篇文章里说过原型实例跟构造函数之间的继承，并且还讲了一道推算题。 通过上一篇文章想必各位老铁已经熟悉了class了，这篇文章接着介绍继承。面向对象里最大的特点应该就属继承了。一个项目可能需要不断的迭代、完善、升级。那每一次的更新你是要重新写呢，还是在原有的基础上改吧改吧呢？当然，不是缺心眼的人肯定都会在原来的基础上改吧改吧，那这个改吧改吧就需要...

    Airmusic 评论0 收藏0

发表评论

登陆后可评论

0条评论

Cruise_Chan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<