ECMAScript 有两种开发模式：

函数式 ( 过程化 )，2. 面向对象 (OOP)。

面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是，ECMAScript 没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。

面向对象三个基本特征：封装、继承、多态。

对象由属性和方法组成，属性对应变量，表示对象的基本特征，是静态的，方法对应函数，表示对象的行为，是动态的。

实例创建对象
实例创建对象，使用 new Object 获取到一个实例对象，然后再给这个对象添加属性和方法。
例：创建一个对象，然后给这个对象新建属性和方法。

创建了一个对象，并且添加对象的属性和方法，在 run() 方法里的 this，就是代表box 对象本身。这种是 JavaScript 创建对象最基本的方法，但有个缺点，想创建一个类似的对象，就会产生大量的代码。

    var box2 = new Object();
    box2.name = '小明';
    box2.age = 200;
    box2.run = function() {
    return this.name + this.age;
    };
    alert(box2.run());

为了解决多个类似对象声明的问题，我们可以使用一种叫做工厂模式的方法，这种方法就是为了解决实例化对象产生大量重复的问题。

字面量方式创建对象
把所有的方法和属性都放在 {} 里面，这种方式又叫做字面量创建对象

    var obj = {
    name: '如花',
    age: 18,
    run: function() {
    alert(this.name);
    }
    }
    console.log(obj.name, obj.age);
    obj.run(); // 如花

工厂模式创建对象
工厂模式创建对象，是使用函数将创建对象的代码包裹起来，添加好属性和方法后，将这个对象返回出去。

    function createObject(name, age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.run = function() {
    return this.name + this.age;
    };
    return obj;
    }
    var box1 = createObject('Lee', 100); // 第一个实例
    var box2 = createObject('Jack', 200); // 第二个实例
    alert(box1.run());
    alert(box2.run());

工厂模式的问题：
工厂模式解决了重复实例化的问题，但还有一个问题，那就是识别问题，因为根本无法搞清楚他们到底是哪个对象的实例。

alert(typeof box1);  //Object 判断对象类型
alert(box1 instanceof Object); //true 判断一个对象是否是某个类型

构造函数创建对象
构造函数创建对象，可以明确区分对象的种类。

    function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
    alert(this.name);
    };
    }

// 实例对象
var person1 = new Person("小明", 29, "学生");
var person2 = new Person("小张", 27, "程序员");

要创建 Person的新实例，必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤：
(1) 创建一个新对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
(3) 执行构造函数中的代码（为这个新对象添加属性）；
(4) 返回新对象。

构造函数的问题：
alert(person1.sayName == person2.sayName); //false 判断的内存地址
同一个方法，因为对象不同，所存储的位置也不同，如果有多个对象，则要分配存储多次，占内存。

原型创建对象
原型：每个对象都会有自己的原型，是最顶层类型定义的方法和属性。如 Number 定义了很多的方法和属性，则所有的 number 对象都能使用这个方法和属性。

var num = new Number();

__proto__ 是实例对象的一个属性，指向原型。原型需要用类型名调用，如 Number.prototype。
console.log(num.__proto__ == Number.prototype); // true


    function Person() {} // 定义一个构造函数
    
    // 使用原型添加属性和方法
    Person.prototype.name = '小明';
    Person.prototype.run = function() {
    alert(this.name);
    };

    //prototype: 通过原型添加的方法和属性都是共享的，每一个实例对象都能够使用
    var s1 = new Person();
    var s2 = new Person();
    console.log(s1.name, s2.name); // 小明 小明
    console.log(s1.run === s2.run); //true 原型方法同一个

问题：原型创建的对象的属性不能传参，都是固定的值。

混合模式创建（构造 + 原型）
用构造函数创建对象，会有重复定义方法的问题，用原型创建属性不能传参，所以这里结合一下，构造函数中放属性和一直改变的方法，原型中存储共享的属性和方法。

    function Person(name) {
    this.name = name;
    this.eat = 18;
    }
    
    Person.prototype.eat = function() {
    console.log('吃饭');
    };

    // 实例对象
    var s1 = new Person('小明');
    var s2 = new Person('如花');
    console.log(s1.name, s2.name); // 小明 如花
    console.log(s1.eat === s2.eat); //true;

案例：面向对象的选项卡
原则：先写出普通的写法，然后改成面向对象写法
1、普通方法变型
尽量不要出现函数嵌套函数
可以有全局变量
把onload中不是赋值的语句放到单独函数中（init）
2、改成面向对象（）

先写构造函数

onload中创建对象，并init调用
全局变量就是属性
函数就是方法
(属性和方法前面，都要加this)
改this指向问题（尽量让this指向对象）

注意：this指向是这里的重点
演示时先把所有的this指向改了，然后再看报错，一步一步改。要一步一步分析this都指向谁了。
在事件或者定时器调用时，this指向特别容易出错。一定要注意（复习this的指向）
另外，还要注意event对象，它只能出现在事件函数里面。
阻止默认事件，也要出现在事件函数中。

结论：我们改成面向对象了之后，感觉是不是更复杂了？确实是这样，确实是更复杂了，但是我们这个面向对象特别适合复杂的开发，对于简单的，不太推荐使用面向对象。面对复杂开发时，它特别容易扩展，同时，复用性特别强。上面的例子，多添加几个，就可以发现特别方便复用和扩展。

文章目录