JavaScript面向对象

1. Javascript 和面向对象

1.1 什么是 面向对象

面向对象编程（OOP）是如今多种编程语言所实现的一种 编程范式，包括 Java、C++。OOP把 对象作为程序的基本单元，一个对象包含了数据和操作数据的函数。面向对象三大特征：封装、继承、多态
 
1.2 什么是 Javascript

JavaScript（简称 JS）是一种具有 函数优先 的轻量级，解释型或即时编译型的编程语言。虽然常被嘲为“玩具语言”，但在它看似简洁的外衣下，还隐藏着强大的语言特性。JavaScript 目前广泛应用于众多知
名应用中，对于网页和移动开发者来说，深入理解 JavaScript 就尤为必要。
 
1.3 Javascript 和面向对象的关系

JS 基于原型编程、多范式 的动态脚本语言，并且支持面向对象、面向过程、命令式、声明式、函数式等编程范式。
JS 的灵活性使得这些范式可以单独使用，也可以混合使用。开发者可以根据实际需求和编程风格选择适合的编程范式。
2. Javascript 对象

2.1 对象基础

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法），让我们通过一个例子来了解它们：

const  person  =  {};  //  {}

上述例子中我们创建了一个空对象，它做不了什么事情。接下来我们可以实现一个实例对象：

const  person  =  {
  name:  ["张三",  "李四"],
  age:  32,
  bio:  function  ()  {
    console.log(`${this.name[0]}  ${this.name[1]}  现在  ${this.age}  岁了。`);
  },
  introduceSelf:  function  ()  {
    console.log(`你好！我是  ${this.name[0]}。`);
  },
};

然后我们就可以尝试调用它的属性和方法了：

person.name;  //  ["张三",  "李四"]
person.name[0];  //  '张三'
person.age;  //  32
person.bio();  //  "张三  李四  现在  32  岁了。"
person.introduceSelf();  //  "你好！我是  张三。

现在，我们明白了在 JS 中的对象该怎么设置，一个对象由多个成员组成，每个成员都有一对键值对，然后需要用逗号隔离成员，语法规则如下：

const  objectName  =  {
  member1Name:  member1Value,
  member2Name:  member2Value,
  member3Name:  member3Value,
};

对象成员的值可以是任意的，person 对象里包含了：一个数字、一个数组，以及两个函数。前两项是数据项，被称为对象的属性，后两项是允许对象对该数据进行某些操作的函数，称为对象的方法。
当对象的成员是函数时，我们有更简洁的语法。用bio() 来代替bio: function()。像这样：

const  person  =  {
  name:  ["张三",  "李四"],
  age:  32,
  bio()  {
    console.log(`${this.name[0]}  ${this.name[1]}  现在  ${this.age}  岁了。`);
  },
  introduceSelf()  {
    console.log(`你好！我是  ${this.name[0]}。`);
  },
};

2.2 点表示法

在上面的例子中，你使用了点表示法（dot notation）来访问对象的属性和方法。对象的名字表现为一个命名空间（namespace）。当你想访问对象内部的属性或方法时，命名空间必须写在第一位。然后输入一个点，紧接着是你想要访问的目标——可以是简单属性的名字，或者是数组属性的一个子元素，又或者是对象的方法调用。如下所示：

person.age;
person.bio();

2.3 子命名空间

可以用一个对象来做另一个对象成员的值。例如将 name 成员，从

const  person  =  {
  name:  ["张三",  "李四"],
};

改成

const  person  =  {
  name:  {
    first:  "张三",
    last:  "李四",
  }
};

需要访问这些属性，只需要链式的再使用一次点表示法，像这样：

person.name.first;
person.name.last;

2.4 括号表示法

另外一种访问对象属性的方式是使用括号表示法（bracket notation），如下所示：

person["age"];
person["name"]["first"];

const  person  =  {
  name:  ["张三",  "李四"],
  age:  32,
};
function  logProperty(propertyName)  {
  console.log(person[propertyName]);
}
logProperty("name");  //  ["张三",  "李四"]
logProperty("age");  //  32

2.5 设置对象成员

我们可以通过声明设置（更新）对象成员的值（使用点表示法或括号表示法），像这样：

person.age  =  45;
person["name"]["last"]  =  "Cratchit";

设置成员并不意味着你只能更新已经存在的属性的值和方法，你也可以创建新的成员。在 JS 控制台中尝试以下代码：

person["eyes"]  =  "褐色";
person.farewell  =  function  ()  {
  console.log("再见！");
};

括号表示法一个有用的地方是它不仅可以动态的去设置对象成员的值，还可以动态的去设置成员的名字。
假设我们想让用户能够通过在两个文本输入框中键入成员名称和值，在他们的人员数据中存储自定
义的值类型。我们可以像这样获取这些值：

const  myDataName  =  nameInput.value;
const  myDataValue  =  nameValue.value;

2.6 "this"的含义

在之前的例子中你也许注意到了一些奇怪的地方，看这个例子：

introduceSelf()  {
  console.log(`你好！我是  ${this.name[0]}。`);
}

关键字 this 指向了当前代码运行时的对象——这里指 person 对象
当你只需要创建一个对象时，this 就不是那么有用。但是如果你创建多个对象时，this 可以让你对每一个创建的对象都使用相同的方法定义。
让我们用两个简单的 person 对象来说明：

const  person1  =  {
  name:  "王五",
  introduceSelf()  {
    console.log(`你好！我是  ${this.name}。`);
  },
};
const  person2  =  {
  name:  "赵六",
  introduceSelf()  {
    console.log(`你好！我是  ${this.name}。`);
  },
};

在本例中，尽管两个实例的方法代码完全相同，但 person1.introduceSelf() 输出“你好！我是 王五。”，而 person2.introduceSelf() 输出“你好！我是 赵六”。当你编写每一个对象时，这并不是很有用，但是当我们开始使用构造函数从单个对象定义创建多个对象时，这将是必不可少的。