前端js入门——JavaScript 面向对象 - 好文

JavaScript是一门面向对象的语言，与其他面向对象语言相比具有自己的特点。

下面将从总体上对其做一下概述，不会对细节做过多介绍。

本文将解决如下几个问题：

（1）.什么是面向对象。

（2）.对象成员有哪些。

（3）.JavaScript实现面向对象。

一.什么是面向对象：

经常说面向对象的编程，但是刚开始可能并不明白面向对象具体含义是什么。

通俗的讲，就是将程序中的成员看做一个对象，此对象是一个整体。

对象对外会提供一些功能，但是我们并不关心这些功能具体实现细节。

就如同我们一辆汽车，它就是一个对象，它对外提供了各种功能，比如离合、方向盘等。

具体这些功能具体怎么实现的我们并不关心，就如同jQuery，它具有各种方法：

$(``"#ant"``).fadeIn();

$(``"#ant"``).append();

通过$创建一个jQuery对象，然后我们就可以使用此对象提供的各种功能。

二.对象的成员：

JavaScript对象成员有：

（1）.属性。

（2）.方法。很多时候将方法与函数混淆，严格讲，它们区别如下：

（1）.函数是独立存在的。

（2）.方法隶属于一个对象。

三.JavaScript创建对象：

可以利用Object创建一个简单对象，然后为其添加一些属性或者方法。

代码实例如下：

let one=``new Object();

one.name=``"兴趣部落一"``;

one.show=``function``(){console.log(``this``.name)};

let two=``new Object();

two.name=``"兴趣部落二"``;

two.show=``function``(){console.log(``this``.name)};

上述代码创建了两个对象one与two，但是缺点非常明显，每一次创建对象，所有的过程都要重新来一遍。

如果常见10个对象，代码量会比较大，下面对其进行改造：

function creatObj(name){

let obj=``new Object();

obj.name=name;

obj.show=``function``(){console.log(``this``.name)};

return obj;

}

let one=creatObj(``"兴趣部落一"``);

let two=creatObj(``"兴趣部落二"``);

将代码进行一下封装，创建一个对象只要调用一次函数即可。

用术语讲就是用工厂方式创建对象，像车间批量生产编号不同，但规格相同的产品。

更多的时候会使用自定义构造函数创建对象，代码实例如下：

function Antzone(name,address){

this``.name=name;

this``.address=address;

this``.show=``function``(){

console.log(``this``.name+``"位于"``+``this``.address);

}

}

let mayi=``new Antzone(``"兴趣部落"``,``"海岛市南区"``);

let baidu=``new Antzone(``"百度"``,``"北京"``);

mayi.show();

baidu.show();

通过构造函数Antzone创建两个对象，调用show方法可以打印出相关信息。

上述代码并不是最优形式，改造如下：

function Antzone(name,address){

this``.name=name;

this``.address=address;

}

Antzone.prototype.show=``function``(){

console.log(``this``.name+``"位于"``+``this``.address);

}

let mayi=``new Antzone(``"兴趣部落"``,``"海岛市南区"``);

let baidu=``new Antzone(``"百度"``,``"北京"``);

mayi.show();

baidu.show();

功能完全相同，唯一区别是将show方法置于原型对象之上。

这样就实现了方法的共享，可以节省一些资源，对大型程序效果更明显。

更多面向对象的相关内容本文不再介绍，后续的相关文章会有详细的介绍。

特别说明：ES2015之前，并不存在class类的概念，以构造函数替代。

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享 <https://jq.qq.com/?_wv=1027&k=5LhH9Ed>
），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。

热门工具换一换