您的位置:首页> 前端教程> JS教程
文章导航

JavaScript 面向对象

2018-12-8 01:42| 作者: admin| 查看: 1263| 评论: 0|来自: 蚂蚁部落

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

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

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

(1).什么是面向对象。

(2).对象成员有哪些。

(3).JavaScript实现面向对象。

一.什么是面向对象:

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

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

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

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

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

[JavaScript] 纯文本查看 复制代码
$("#ant").fadeIn();
$("#ant").append();

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

二.对象的成员:

JavaScript对象成员有:

(1).属性。

(2).方法。很多时候将方法与函数混淆,严格讲,它们区别如下:

(1).函数是独立存在的。

(2).方法隶属于一个对象。

三.JavaScript创建对象:

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

代码实例如下:

[JavaScript] 纯文本查看 复制代码
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个对象,代码量会比较大,下面对其进行改造:

[JavaScript] 纯文本查看 复制代码
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("蚂蚁部落二");

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

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

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

[JavaScript] 纯文本查看 复制代码运行代码
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();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/014349svfwdbz8obv8myla.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

上述代码并不是最优形式,改造如下:

[JavaScript] 纯文本查看 复制代码运行代码
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();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/014419eg2288apec8ea8qc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

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

相关阅读:

(1).class 类参阅JavaScript class 类一章节。

(2).prototype原型参阅JavaScript prototype 原型一章节。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部