前端开发之面向对象

【一】 面向对象的基本概念

　　面向对象的英文全称叫做Object Oriented，简称OO。OO其实包括OOA(Object Oriented Analysis，面向对象分析)、OOD(Object Oriented Design，面向对象设计)和OOP(Object Oriented Programming，面向对象的程序设计)。

对象是作为计算机模拟真实世界的一个抽象，一个对象就是一个物理实体或逻辑实体，它反映了系统为之保存信息和（或）与它交互的能力。使其具有自己的属性和行为， 从而简化对复杂事物的描述，更有利于工程的可维护性和扩展性。

　　【二】 面向对象三个基本特征

内部数据表现形式和实现细节的隐藏，信息隐藏是为了减少系统各部分间的依赖性，各部分间必须通过明确的通道传送信息，也就是对象间的接口.这样一来，隐藏了部分内部的细节，极大方便系统的开发，维护和扩展。

提供了一种明确表述共性的方法。一个新类可以从现有的类中派生，这个过程称为类的继承。新类继承了原始类的特性，新类称为原始类的派生类（子类），而原始类称为新类的基类（父类）。派生类可以从它的基类那里继承方法和实例变量，并且派生类可以修改或增加新的方法使之更适合特殊的需求。继承性很好地解决了软件的可重用性问题。

解决了应用程序函数同名问题。实现多态，有二种方式，覆盖，重载。

【三】 Javascript 面向对象

　　Keyword: class, object, `this`, closure, constructor, prototype

 

• 继承
• 多态体现

之一、几种对象封装的方法

1. 对象封装 – 原始模式

 

var Cat = {
    name: ''
    color: '',
    eat: function() {}
}; 

 

function eat() {
    console.log('I\'m eta fish');
}
var cat1 = {name: 'Kitty', color: 'white', eat: eat};
var cat2 = {name: 'Smokey', color: 'black', eat: eat}; 
// var cat3, cat4 ,... 

　　2. 对象封装 – 构造函数模式

　　“构造函数”，就是一个普通函数，但是内部使用了 `this` 变量。对函数使用 `new` 运算符，就能生成实例，并且 `this` 变量会绑定在实例对象上。

　　`Class` 只是一个模板，创建出来的来实例都是由模板生成。

 

function Cat(name,color){
    this.name = name;
    this.color = color;
    this.eat = function() { console.log('eat fish'); };
}
 
var cat1 = new Cat('Kitty', 'black');
console.log(cat1.name); // Kitty
console.log(cat1 instanceof Cat); // TRUE
// 这时 cat1 实例会自动含有一个 `constructor` 属性，指向它们的构造函数 `Cat`。
 
var cat2 = Cat('Smokey', 'white');
console.log(cat2); // undefined 

　3. 对象封装 – Prototype 模式

　　同时 `prototype` 又存在一个指向构造函数的引用 `constructor`，这样就成功的构成一个循环引用的原型链结构。

 

function Cat(name, color) {
    this.name = name;
    this.color = color;
}
Cat.prototype.type = 'mammal';
Cat.prototype.eat = function() { console.log('eat fish'); };
 
var cat1 = new Cat('Kitty', 'white');
var cat2 = new Cat('Smokey', 'black');
console.log(cat1.type); // mammal
console.log(cat1.eta === cat2.eta);     // TRUE, same reference
console.log(cat1.constructor === Cat)   // TRUE, from Person.prototype 

之二、继承 (Inheritance)

　　Cat, Bird

 

1. 继承 – 构造函数绑定

 

function Animal() {
    this.species = 'animal';
    this.sleep = function() { console.log('I\'m sleep at night'); };
}
 
function Cat(name, color) {
    this.name = name;
    this.color = color;
} 

 

/** @class Cat */
function Cat(name, color) {
    Animal.apply(this);
    this.name = name;
    this.color = color;
}
var cat1 = new Cat('Kitty', 'white');
cat1.sleep(); // I am sleep at night 

2. 继承 – 原型链继承

 

/** @class Cat */
function Cat(name, color) {
    this.name = name;
    this.color = color;
}
Cat.prototype = new Animal;
Cat.prototype.eta = function() { console.log('fish is my delicious'); }; 

 

// 任何一个prototype对象都有一个constructor属性，指向它的构造函数
Cat.prototype.constructor = Cat; // fix prototype chains
 
var cat = new Cat('Kitty', 'fish');
cat.eat();      // fish is my delicious
cat.sleep();    // I'm sleep at night'
console.log(cat instanceof Cat);    // TRUE
console.log(cat instanceof Animal); // TRUE 

　　3. 继承 (Inheritance) – 利用空对象作为中介实现原型继承

var F = function() {}; F.prototype = Animal.prototype; Cat.prototype = new F(); Cat.prototype.constructor = Cat;

 

function extend(ctor, superctor, px) {
    if (!superctor || !ctor) throw Error('extend failed, verify dependencies');
    var F = function() {};
    F.prototype = superctor.prototype;
    ctor.prototype = new F();
    ctor.prototype.constructor = ctor;
    ctor.superclass = superctor.prototype; // cache super class proto reference.
    if (px) { // extend class implements
        for (var k in px) {
            if (px.hasOwnProperty(k)) ctor.prototype[k] = px[k];
        }
    }
    return ctor;
} 

4 继承 – 借住工具方法实现继承

/** @class Mammal */ extend(Cat, Animal, { eat: function() { Cat.superclass.eat.call(this); // call super method console.log('Also i like some ofther food, such as beef and more.'); } }); var cat = new Cat('Smokey', 'fish'); cat.sleep(); cat.eat(); console.log(cat instanceof Animal); console.log(cat instanceof Cat);

之三、多态

1. 多态 – 通过重写原型方法来实现方法重名调用

/** @class Cat */ extend(Cat, Animal, { eat: function() { Cat.superclass.eat.call(this); // call super method console.log('Also i like some ofther food, such as beef and more.'); } });

2. 多态 (Polymorphism) – 原型继承 `prototype` 链上的方法、属性查找

 

　【四】总结 Summary

　　Prototype

　　Inheritance