【js基础】JavaScript中的面向对象（OOP）

2019-05-06 本文已影响0人 SophieRabbit

1.对象的概念

首先树立一个概念：万物皆对象。JavaScript 中的所有事物都是对象，包括字符串、数值、数组、函数等等。

js中的对象分为内建对象和自定义对象。内建对象是指String、Date、Array等js中内置定义的对象类型。除内建对象外的其他对象为自定义对象。

对象，是带有属性和方法的特殊数据类型。

2.面向对象

使用对象时，只关注对象提供的功能，不关注其内部细节。比如电脑——有鼠标、键盘，我们只需要知道怎么使用鼠标，敲打键盘即可，不必知道为何点击鼠标可以选中、敲打键盘是如何输入文字以及屏幕是如何显示文字的。总之我们没必要知道其具体工作细节，只需知道如何使用其提供的功能即可，这就是面向对象。

JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#，很好，你一定明白面向对象的两个基本概念：

类：类是对象的类型模板，例如，定义Student类来表示学生，类本身是一种类型，Student表示学生类型，但不表示任何具体的某个学生；

实例：实例是根据类创建的对象，例如，根据Student类可以创建出xiaoming、xiaohong、xiaojun等多个实例，每个实例表示一个具体的学生，他们全都属于Student类型。

所以，类和实例是大多数面向对象编程语言的基本概念。

不过，在JavaScript中，这个概念需要改一改。JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。有关原型的概念和原理下文会提到。

3.对象的基本构成

访问名称为ObjectName的对象的属性：

ObjectName.propertyName

访问名称为ObjectName的对象的方法并直接调用该方法：

ObjectName.methodName()

4.对象的创建

原型是指当我们想要创建xiaoming这个具体的学生时，我们并没有一个Student类型可用。那怎么办？恰好有这么一个现成的对象：

var robot = {

    name:'Robot',

height:1.6,

    run:function(){

        console.log(this.name +' is running...');

    }

};

我们看这个robot对象有名字，有身高，还会跑，有点像小明，干脆就根据它来“创建”小明得了！

于是我们把它改名为Student，然后创建出xiaoming：

var Student = {

    name:'Robot',

    height:1.2,

    run:function() {

        console.log(this.name +' is running...');

    }

};

var xiaoming = { name: '小明' };

xiaoming.__proto__ = Student; //指向原型对象

注意最后一行代码把xiaoming的原型指向了对象Student，看上去xiaoming仿佛是从Student继承下来的：

xiaoming.name; //'小明'

xiaoming.run(); //小明 is running...

xiaoming有自己的name属性，但并没有定义run()方法。不过，由于小明是从Student继承而来，只要Student有run()方法，xiaoming也可以调用。

JavaScript的原型链和Java的Class区别就在于它没有“Class”的概念，所有对象都是实例，所谓继承关系不过是把一个对象的原型指向另一个对象而已。

(1) 创建对象的原理

JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。

当我们用ObjectName.propertyName访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。

现在我们开始创建一个对象：

var arr = [1,2,3];

其原型链如下所示：

arr => Array.prototype => Object.prototype => null

在这里，数组arr是JavaScript的内建对象Array的一个实例，其原型链指向Array的prototype。Array本身为一种特殊的对象（即key值为0,1,2,3...的键值对），因此Array的原型链指向Object的prototype。原型链的终点指向null。

由上例启发，我们再看一下前面提到的xiaoming与Stutent的关系：

对象xiaoming的原型链

上图中，小明作为一个Student的实例（可以理解为xiaoming是学生这个大类下的一个个体），含有一个名为__proto__的原型链指针（标准写法为[[prototype]]，许多浏览器中为便于区分显示为__proto__），该指针指向当前对象的原型的构造器（constructor）。

大多数情况下，__proto__可以理解为“构造器函数的原型”，即：__proto__ === constructor.prototype (通过Object.create()创建的对象不适于此等式)

有些同学可能会有疑问，prototype属性与__proto__的区别。两者的概念上可以这样理解：prototype属性是函数才拥有的属性，而每一个对象都有一个指向其原型的__proto__属性，其__proto__属性在一般情况下指向其原型的constructor（即对象的__proto__指向本对象的构造器）。

prototype属性与__proto__的区别

函数对象与其原型对象的关系

(2) 对象的原型链的理解

JavaScript的原型及原型链概念的原理，类似于数据结构中的链表结构：

链表是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列结点（链表中每一个元素称为结点）组成，结点可以在运行时动态生成。

相比数组而言，链表在内存中不需要连续的区域，只需要每一个节点都能够记录下一个节点的内存地址，通过引用进行查找，这样的特点也就造就了链表增删操作时间消耗很小，而查找遍历时间消耗很大的特点。

链表的两种模式（单向链表、双向链表）如下图：

链表的两种模式。显然，JS中的原型概念类似于单向链表

简单了解了链表结构后，我们现在可以来了解一下JavaScript中的原型链与链表的区别了：

单向链表与原型链的对比：原型链多了指向自身的constructor构造函数

(3) ES6中的Class的理解

前文提到JS中没有类的概念，是针对ES5而言。在2015年推出的ES6语法中，JS提供了更接近传统语言的写法，引入了 class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

传统的ES5中，定义类似“类”的概念，使用的方法是定义一个构造函数，通过继承的方式实现“类”的功能：

// 先定义一个函数，强行叫它构造函数，构造函数常规建议首字母大写：

function Student(name, age) {

    this.name = name; // 构造函数的属性都定义在函数内部

    this.age = age; // this指向实例对象

}

// 构造函数的方法都定义在构造函数的原型上

Student.prototype.showHisInfo = function () {

    return '(' + this.name + ', ' + this.age + ')';

};

// new 一个对象，就OK了

var xiaoming = new Student('小明', 18);

当使用class时，结构如下:

class Student{

    constructor(name,age) { // 构造函数，为类的一部分

        // 定义将来实例的属性

        this.name = name;

        this.age = age;

    }

    // 给类添加方法

    showHisInfo() {

        return this.name + ','+this.age; // 取到上面两个属性值

    }

}

let xiaoming = new Student('小明', 18);

参考文献：

廖雪峰--面向对象编程：https://www.liaoxuefeng.com/wiki/1022910821149312/1023022126220448

数据结构——浅谈链表：https://blog.csdn.net/weixin_41582192/article/details/81181077