Javascript面向對象編程

1、認識面向對象

一、一切事物皆爲對象 - JS中一切東西都爲對象

二、對象具備封裝和繼承特性

三、信息隱藏

2、基本面向對象

對象的聲明，以下代碼直接定義一個對象：

//定義對象
var Person = {
  name: 'LiuZhen',        //對象屬性
  age: 30,                //對象屬性
  eat: function(){        //對象方法
    alert('正在吃...');
  }
}

咱們能夠爲對象添加屬性：

Person.height = 100;        //添加身高屬性

也能夠調用對象中的屬性：

console.log(Person.name);        //調用對象屬性

面向對象編程在小型項目中並無優點，但隨着項目的不斷的迭代，愈來愈大，管理成了很大的問題，這時面向對象的代碼構建方式就顯現出它的優點。

3、函數構造器對象

定義一個空對象：

function Person() {

}

在對象的原型上添加對象屬性和方法：

Person.prototype = {
  name: 'liuzhne',
  age: 30,
  eat: function(){
    alert('我正在吃...');
  }
}

接下來，實例化一個對象：

var p = new Person();

而後咱們就能夠調用對象的屬性和方法了：

p.name;
p.age;
p.eat();

JS的new關鍵字與Java、C++裏的徹底是兩回事，不可混淆。

4、深刻Javascript面向對象

Java、C++等純面嚮對象語言裏有Class（類）概念，但在JS中沒有（最新發布的ES6已加入），這裏，咱們能夠使用Function來模擬類的實現，看下面的代碼：

首先，咱們建立一個函數（或者能夠叫JS的類），併爲它添加兩個屬性，name和age

function People(name, age) {
  this._name = name;
  this._age = age;
}

接着，咱們在這個函數的原型上添加一個方法：

People.prototype.say = function(){
  alert('say something ...');
}

面向對象是能夠實現繼承的，如今咱們來實現這個功能，咱們在添加一個函數叫Student

function Student() {

}

實現繼承：

Student.prototype = new People();

實例化一個對象，調用say方法：

var s = new Student();
s.say();

完整代碼以下：

//定義父類
function People(name, age) {
  this._name = name;
  this._age= age;
}
//爲父類添加公用方法
People.prototype.say = function(){
  alert('say something...');
}
//定義子類
function Student(name, age){
  this._name = name;
  this._age = age;
}
//實現繼承
Student.prototype = new People();
//實例化對象
var s = new Student('Liuzhen');
//調用say方法
s.say();

下面，咱們來來子類添加一個方法，也叫say

//定義父類
function People(name, age) {
  this._name = name;
  this._age= age;
}
//爲父類添加公用方法
People.prototype.say = function(){
  alert('say something...');
}
//定義子類
function Student(name, age){
  this._name = name;
  this._age = age;
}
//實現繼承
Student.prototype = new People();

/**********************************
 *    爲子類Student添加say方法
 *********************************/
Student.prototype.say = function(){
  alert('我是子類Student裏定義的say方法');
}

//實例化對象
var s = new Student('Liuzhen');
//調用say方法
s.say();

調用以後發現，咱們已複寫了父類中的say方法，執行的結果是子類中的say。

那咱們如何來調用父類中的say方法呢？

咱們能夠在重寫父類say方法以前，從新定義一個對象，把say方法指定過去，以下代碼：

//定義父類
function People(name, age) {
  this._name = name;
  this._age= age;
}
//爲父類添加公用方法
People.prototype.say = function(){
  alert('say something...');
}
//定義子類
function Student(name, age){
  this._name = name;
  this._age = age;
}
//實現繼承
Student.prototype = new People();

/**********************************
 *    定義一個對象將say方法賦值過去
 *********************************/
var ParentSay = Student.prototype.say;

/**********************************
 *    爲子類Student添加say方法
 *********************************/
Student.prototype.say = function(){
  //在子類重寫父類方法中測試調用父類的say方法
  ParentSay.call(this);
  alert('我是子類Student裏定義的say方法');
}

//實例化對象
var s = new Student('Liuzhen');
//調用say方法
s.say();

下面，咱們來把兩個Function封裝起來，達到信息隱藏的目的。

//定義父類
(function(){
    var n = "Kaindy";            //這裏定義的變量n，只能在這個函數中訪問
    function People(name, age) {
      this._name = name;
      this._age= age;
    }
    //爲父類添加公用方法
    People.prototype.say = function(){
      alert('say something...');
    }
    window.People = People;        //把函數賦值給頂級窗口
}());
//定義子類
function Student(name, age){
  this._name = name;
  this._age = age;
}
//實現繼承
Student.prototype = new People();

/**********************************
 *    定義一個對象將say方法賦值過去
 *********************************/
var ParentSay = Student.prototype.say;

/**********************************
 *    爲子類Student添加say方法
 *********************************/
Student.prototype.say = function(){
  //在子類重寫父類方法中測試調用父類的say方法
  ParentSay.call(this);
  alert('我是子類Student裏定義的say方法');
}

//實例化對象
var s = new Student('Liuzhen');
//調用say方法
s.say();

------------------------------分割線-------------------------------------

如今咱們來重寫下上面的面向對象，採用對象賦值的方法

//定義一個父類Function
function Person() {
    //定義一個空對象
    var _this = {};
    //在這裏個空對象上定義一個sayHello方法
    _this.sayHello = function() {
        alert('Hello');
    }
    //返回這個對象
    return _this;    
}

//定義一個子類Function
function Teacher() {
    //定義一個對象，把父類賦值給此對象
    var _this = Person();
    //返回此對象
    return _this;
}

//實例化
var t = Teacher();
t.sayHello();

好了，這種構建方法更簡單明瞭，代碼看上去更簡潔，下面咱們來實現對父類方法的重寫

//定義一個父類Function
function Person() {
    //定義一個空對象
    var _this = {};
    //在這裏個空對象上定義一個sayHello方法
    _this.sayHello = function() {
        alert('Hello');
    }
    //返回這個對象
    return _this;    
}

//定義一個子類Function
function Teacher() {
    //定義一個對象，把父類賦值給此對象
    var _this = Person();
    /*****************************************/
    //重寫父類的sayHello方法
    _this.sayHello = function(){
        alert('T-Hello');
    }
    /*****************************************/
    //返回此對象
    return _this;
}

//實例化
var t = Teacher();
t.sayHello();

調用父類的sayHello方法

//定義一個父類Function
function Person() {
    //定義一個空對象
    var _this = {};
    //在這裏個空對象上定義一個sayHello方法
    _this.sayHello = function() {
        alert('Hello');
    }
    //返回這個對象
    return _this;    
}

//定義一個子類Function
function Teacher() {
    //定義一個對象，把父類賦值給此對象
    var _this = Person();
     /*****************************************/
    //調用父類的sayHello方法
    var ParentSay = _this.sayHello;
    ParentSay.call(_this);
    /*****************************************/
    
    /*****************************************/
    //重寫父類的sayHello方法
    _this.sayHello = function(){
        alert('T-Hello');
    }
    /*****************************************/
    //返回此對象
    return _this;
}

//實例化
var t = Teacher();
t.sayHello();