回归前端学习第二天

简单理解javascript面向对象原理

从零开始面向对象的程序设计

1.简单描述OOP:
OOP（Object-oriented programming ，OOP） 的基本思想是：在程序里，我们通过使用对象去构建现实世界的模型，把原本很难（或不可）能被使用的功能，简单化并提供出来，以供访问。
2.对象理解：
对象可以包含相关的数据和代码，这些数据和代码用于表示 你所建造的模型是什么样子，以及拥有什么样的行为或功能。对象包（object package，或者叫命名空间 namespace）存储（官方用语：封装）着对象的数据（常常还包括函数），使数据的组织和访问变得更容易了；对象也常用作 数据存储体（data stores），用于在网络上运输数据，十分便捷。

理论理解：定义一个对象模板

考虑一个简单的程序，显示学校的学生和老师的信息，讨论OOP思想。

1.定义好Person对象的属性和方法（包括他们的名字，年龄，性别，兴趣 这些信息，然后，我们会基于他们的这些信息写一个简短的介绍关于他们自己，在最后我们还需要教会他们打招呼）

以上方式被称为抽象-为了编程的目标而利用事物的一些重要特性去把复杂的事物简单化

2.创建一个真正的对象
基于我们的Person类，我们可以创建出许许多多的真实的人。

首先，定义好Person对象的属性和方法

当一个对象需要从类中创建出来时，类的构造函数就会运行来创建这个实例。这种创建对象的过程我们称之为实例化-实例对象被类实例化。

3.具体的对象

将Person定义为类型更具体的人，如老师、学生。

在 OOP 里，我们可以创建基于其它类的新类，这些新的子类可以继承它们父类的数据和功能。比起复制来说这样能够使用父对象共有的功能。如果类之间的功能不同，你可以根据需要定义专用的特征。

老师和学生具有一些相同的特征比如姓名、性别、年龄，因此只需要定义这些特征一次就可以了。可以在不同的类里分开定义这些相同的特征，这样该特征会有一个不同的命名空间。比如，一个学生的 greeting 可以是 “Yo, I’m [firstName]” (例子 Yo, I’m Sam)，老师的可能会正式一些，比如"Hello, my name is [Prefix] [lastName]" (例子 Hello, My name is Mr Griffiths)。

注：多态——这个高大上的词正是用来描述多个对象拥有实现共同方法的能力。

根据子类创建对象吧

实践一下？

一个简单的例子

1.普通函数，先试试定义一个Person

function createNewPerson(name) {
  var obj = {};
  obj.name = name;
  obj.greeting = function () {
    alert('Hi! I\'m ' + this.name + '.');
  }
  return obj;
}

2.调用这个函数创建一个新的叫 LXY的人，在浏览器console 试试效果 ：

var LXY = createNewPerson('LXY');
LXY.name;
LXY.greeting();

上述代码运行良好，但是有点冗长；如果我们知道如何创建一个对象，就没有必要创建一个新的空对象并且返回它。幸好 JavaScript 通过构建函数提供了一个便捷的方法，方法如下：

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

这个构建函数是 JavaScript 版本的类。您会发现，它只定义了对象的属性和方法，除了没有明确创建一个对象和返回任何值和之外，它有了您期待的函数所拥有的全部功能。这里使用了this关键词，即无论是该对象的哪个实例被这个构建函数创建，它的 name 属性就是传递到构建函数形参name的值，它的 greeting() 方法中也将使用相同的传递到构建函数形参name的值。

注： 一个构建函数通常是大写字母开头，这样便于区分构建函数和普通函数。

3. 调用后见函数，创建新实例

将下面的代码加在之前的代码下面：

var person1 = new Person('Lxy1');
var person2 = new Person('Lxy2');

保存并刷新浏览器，在 console 里输入如下代码：

person1.name
person1.greeting()
person2.name
person2.greeting()

现在看到页面上有两个对象，每一个保存在不同的命名空间里，当您访问它们的属性和方法时，您需要使用person1或者person2来调用它们。尽管它们有着相同的name属性和 greeting()方法它们是各自独立的，所以相互的功能不会冲突。注意它们使用的是自己的 name 值，这也是使用 this 关键字的原因，它们使用的从实参传入形参的自己的值，而不是其它的什么值。

可是，每次当我们调用构造函数时，我们都会重新定义一遍 greeting()，这不是个理想的方法。为了避免这样，我们可以在原型里定义函数，接下来我们会讲到。

创建最终的构造函数

1.移除掉之前写的所有代码， 用如下构造函数替代 —— 实现原理上，这与我们之前的例子并无二致， 只是变得稍稍复杂了些：

function Person(first, last, age, gender, interests) {
  this.name = {
    'first': first,
    'last': last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
  this.bio = function() {
    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  };
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name.first + '.');
  };
};

接下来加上这样一行代码， 用来创建它的一个对象：

var person1 = new Person('L', 'xy', 20, 'female', ['music', 'playing']

您就可以像我们定义第一个对象一样访问它的属性和方法了：

person1['age']
person1.interests[1]
person1.bio()

一些适用的创建对象的方式

1.Object()构造函数

使用Object()构造函数来创建一个新对象。 (创建了一个空的对象)

在浏览器中的控制台中输入以下代码：

var person1 = new Object();

这样就在person1变量中存储了一个空对象。然后, 可以根据需要, 使用点或括号表示法向此对象添加属性和方法；
试试这个例子：

person1.name = 'Lxy';
person1['age'] = 20;
person1.greeting = function() {
  alert('Hi! I\'m ' + this.name + '.');
}

还可以将对象文本传递给Object() 构造函数作为参数， 以便用属性/方法填充它。请尝试以下操作：

var person1 = new Object({
  name : 'Lxy',
  age : 20,
  greeting : function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
});

2.使用create()方法

JavaScript有个内嵌的方法create(), 允许您基于现有对象创建新的对象。

在 JavaScript 控制台中尝试此操作：

var person2 = Object.create(person1);

现在尝试这个：

person2.name
person2.greeting()

person2是基于person1创建的， 它们具有相同的属性和方法。这非常有用， 因为它允许创建新的对象而无需定义构造函数。
缺点是比起构造函数，浏览器在更晚的时候才支持create()方法（IE9, IE8 或甚至以前相比）， 加上一些人认为构造函数让代码看上去更整洁 —— 可以在一个地方创建构造函数， 然后根据需要创建实例， 这让您能很清楚地知道它们来自哪里。

但是, 如果您不太担心对旧浏览器的支持， 并且您只需要一个对象的一些副本， 那么创建一个构造函数可能会让您的代码显得过度繁杂。这取决于自己咯。有些人觉得create() 更容易理解和使用。

好啦，今天就到这里啵~