JavaScript面向对象

简介: JavaScript 面向对象

理解对象

对象这个词如雷贯耳,同样出名的一句话:XXX语言中一切皆为对象!

对象究竟是什么?什么叫面向对象编程?

对象(object),台湾译作物件,是面向对象(Object Oriented)中的术语,既表示客观世界问题空间(Namespace)中的某个具体的事物,又表示软件系统解空间中的基本元素。

在软件系统中,对象具有唯一的标识符,对象包括属性(Properties)和方法(Methods),属性就是需要记忆的信息,方法就是对象能够提供的服务。在面向对象(Object Oriented)的软件中,对象(Object)是某一个类(Class)的实例(Instance)。 —— 维基百科

对象是从我们现实生活中抽象出来的一个概念,俗话说物以类聚,人以群分,我们也经常说有一类人,他们专业给隔壁家制造惊喜,也就是我们说的老王

这里面就有两个重要概念

  1. 类:无论是物以类聚,还是有一类人,这里说的类并不是实际存在的事物,是一些特征、是一些规则等
  2. 老王:这是个实物,是现实存在,和类的关系就是符合类的描述

对应到计算机术语,类就是class,定义了一些特点(属性 property)和行为(方法 method),比如说给隔壁制造惊喜的这类人有几个特征

  1. 长相文质彬彬,为人和善
  2. 姓王

同时这些人还有技能(行为)

  1. 帮隔壁修下水道
  2. 亲切问候对方儿子

封装

刚才我们说的已经涉及到了对象的一个重要特性——封装

以前我们可能会有这样的描述

王一长相文质彬彬,为人和善,姓王,有技能帮隔壁修下水道、亲切问候对方儿子
王二长相文质彬彬,为人和善,姓王,有技能帮隔壁修下水道、亲切问候对方儿子
王三长相文质彬彬,为人和善,姓王,有技能帮隔壁修下水道、亲切问候对方儿子
王四长相文质彬彬,为人和善,姓王,有技能帮隔壁修下水道、亲切问候对方儿子
...
王百万长相文质彬彬,为人和善,姓王,有技能帮隔壁修下水道、亲切问候对方儿子

有了对象的思想我们可以这样说了,首先定义一类人

有那么一类人
1. 长相文质彬彬,为人和善
2. 姓王
同时这些人还有技能(行为)
1. 帮隔壁修下水道
2. 亲切问候对方儿子

然后是实例化,也就是对号入座

王一是老王
王二是老王
...
王百万是老王

也就是我们通过类来描述一套规则,其中包括

  1. 属性
  2. 行为

对于这个类实例化出的对象,也就是副歌这个类描述的对象,不用去关心对象细节,我们认为符合类的描述,就会有类规定的属性和方法,至于每个方法具体实现细节不去关注,比如老王怎么给人修水管,我知道他有修水管的技能,然后用的时候让他去修就好了(只要不修我家的)

我们称这种隐藏细节的特征叫做封装

JavaScript 对象

因为JavaScript是基于原型(prototype)的,没有类的概念(ES6有了,这个暂且不谈),我们能接触到的都是对象,真正做到了一切皆为对象

所以我们再说对象就有些模糊了,很多同学会搞混类型的对象和对象本身这个概念,我们在接下来的术语中不提对象,我们使用和Java类似的方式,方便理解

function People(name){
  this.name = name;
  this.printName = function(){
    console.log(name);
  };
}

这是一个函数,也是对象,我们称之为

var p1 = new People('Byron');

p1是People类new出来的对象,我们称之为实例

类和实例的关系用我们码农的专业眼光看起来是这样的

类就是搬砖的模具,实例就是根据模具印出来的砖块,一个模具可以印出(实例化)多个实例,每个实例都符合类的特征,这个例子和我们JavaScript中概念很像

在Java中不能称之为对象,如同老王是一个概念、规则的集合,但是在JavaScript中,本身没有类的概念,我们需要用对象模拟出类,然后用类去创建对象

我们的例子中模具虽然是“类”,但同时也是个存在的实物,是个对象,我们为了方便理解,称之为

Object

我们知道JavaScript有nullundefinednumberbooleanstring五种简单类型,nullundefined分别表示没有声明和声明后没有初始化的变量、对象,是两个简单的值,其余三个有对应的包装对象NumberBooleanString

其它的就都是object类型了,比如常用的ArrayDateRegExp等,我们最常用的Function也是个对象,虽然

typeof function(){}; // "function"

但是Function实例和其它类型的实例没有什么区别,都是对象,只不过typeof操作符对其做了特殊处理

在JavaScript中使用对象很简单,使用new操作符执行Obejct函数就可以构建一个最基本的对象

var obj = new Object();

我们称new 调用的函数为构造函数,构造函数和普通函数区别仅仅在于是否使用了new来调用,它们的返回值也会不同

所谓“构造函数”,就是专门用来生成“对象”的函数。它提供模板,作为对象的基本结构。一个构造函数,可以生成多个对象,这些对象都有相同的结构

我们可以通过.来位对象添加属性和方法

obj.name = 'Byron';
obj.printName = function(){
  console.log(obj.name);
};

这么写比较麻烦,我们可以使用字面量来创建一个对象,下面的写法和上面等价

var obj = {
  name: 'Byron',
  printNmae: function(){
    console.log(obj.name);
  }
}

构造对象

我们可以抛开类,使用字面量来构造一个对象

var obj1 = {
  nick: 'Byron',
  age: 20,
  printName: function(){
    console.log(obj1.nick);
  }
}
var obj2 = {
  nick: 'Casper',
  age: 25,
  printName: function(){
    console.log(obj2.nick);
  }
}
目录
相关文章
|
7月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
55 0
|
7月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
64 0
js- 面向对象进阶
Object.defineProperty等面向对象的信息
|
存储 JavaScript 前端开发
|
6月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
153 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
7月前
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
39 1
|
7月前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
7月前
|
JavaScript 前端开发 API
在Node.js上使用dojo库进行面向对象web应用开发
请注意,虽然这个例子在Node.js环境中使用了Dojo,但Dojo的许多功能(例如DOM操作和AJAX请求)在Node.js环境中可能无法正常工作。因此,如果你打算在Node.js环境中使用Dojo,你可能需要查找一些适用于服务器端JavaScript的替代方案。
69 0
|
7月前
|
JSON JavaScript 前端开发
深入JS面向对象(原型-继承)(四)
深入JS面向对象(原型-继承)
50 0
|
7月前
|
设计模式 JavaScript 前端开发
深入JS面向对象(原型-继承)(二)
深入JS面向对象(原型-继承)
68 0