JavaScript是一個動態(tài)的通用面向?qū)ο缶幊陶Z言，所有的現(xiàn)代Web瀏覽器均包含了JavaScript解釋器，這使得JavaScript能夠稱得上史上使用最廣泛的編程語言。

特別是自2009年后，隨著Node.js 、ES5的誕生，使得JavaScript的功能能夠負(fù)責(zé)“全棧”。Node.js是一個服務(wù)器端框架，基于Google的V8 JavaScript引擎創(chuàng)建。用Node.js去實現(xiàn)一層完全配置化的適配HTTP各種協(xié)議，具有緩存策略的接口路由，再通過配置或少量代碼實現(xiàn)接口調(diào)用聚合即可完成功能，這些工作前端工程師就能干了，使用javascript來提高團隊整體工作效率，完全不需要后端參與。況且在各種評測中，看到JavaScript虛擬機比Java虛擬機快個一兩倍，甚至幾倍已經(jīng)不是什么新鮮事了。

1996年11月，網(wǎng)景公司將JavaScript提交給歐洲計算機制造商協(xié)會進行標(biāo)準(zhǔn)化。ECMAScript是由ECMA-262標(biāo)準(zhǔn)化的腳本語言的名稱。到現(xiàn)在已經(jīng)有近20個年頭了，從ECMAScript 1版發(fā)展到了現(xiàn)在的ECMAScript 6（ES6），經(jīng)歷了5個版本的更迭（ES4被叫停）；近年來，基于JavaScript各種架構(gòu)橫空出世，在后端和移動端都有出色的表現(xiàn)。仿佛這個古老的語言一夜之間咸魚翻身。遙想當(dāng)年，取名為JavaScript無非想蹭JAVA的光，誰曾想有今日的風(fēng)光。

面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實世界模型的一種編程模式。它使用先前建立的范例，包括模塊化，多態(tài)和封裝幾種技術(shù)。 Javascript并不是一種真正的面向?qū)ο缶幊蹋∣OP）語言，ES6正在朝這方面努力。Javascript是一種基于對象（object-based）的語言，你遇到的所有東西幾乎都是對象。下面，我們來看看如何將"屬性"（property）和"方法"（method），封裝成一個對象，甚至要從原型對象生成一個實例對象。

一 . 封裝

假設(shè)我們將“人”看成一個對象，他有名字、年齡兩個屬性。

var person={
  name:'',
  age:0
}

根據(jù)這個原型對象，我們需要來生成一個實例對象。

var person1={};
person1.name="jack";
person1.age=18;

以上就是最簡單的封裝了，但這樣的寫法有一下兩個缺點：

一是如果多生成幾個實例，這樣寫起來就非常累贅；

二是實例與原型之間，沒有任何辦法，可以看出有什么聯(lián)系。

為了解決從原型對象生成實例的問題，Javascript提供了一個構(gòu)造函數(shù)（Constructor）模式。

對構(gòu)造函數(shù)使用new運算符，就能生成實例，并且this變量會綁定在實例對象上。

  function person(name, age) {
        this.name = name;
        this.age = age;
    }
    //生成實例
    var person1 = new person("jack", 18);
    var person2 = new person("baby", 17);
    console.log(person1.name);//jack

這樣，person1、person2就同時擁有constructor 屬性，指向它們的構(gòu)造函數(shù)。

console.log(person1.constructor == person); //true
console.log(person2.constructor == person); //true

現(xiàn)在我們還需要為person類添加多個不變的屬性：legs_num（幾條腿）,arms_num（幾只手），以及一個方法：sayHi()。

  function person(name, age) {
        this.name = name;
        this.age = age;
        this.legs_num=2;
        this.arms_num=2;
        this.sayHi= function(){
          console.log("Hi,My name's "+this.name+",I'm"+this.age+"years old now.");
        };
    }

如果這樣直接加上去，有一個很大的弊端：那就是對于每一個實例對象，屬性和方法都是一樣的內(nèi)容，每一次生成一個實例，都必須為重復(fù)的內(nèi)容，多占用一些內(nèi)存，顯得缺乏效率。

Javascript提供了一個prototype屬性，每一個構(gòu)造函數(shù)都有一個prototype屬性，指向另一個對象。這個對象的所有屬性和方法，都會被構(gòu)造函數(shù)的實例繼承。我們可以把那些不變的屬性和方法，直接定義在prototype對象上。

   function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };
    //生成實例
    var person1 = new person("jack", 18);
    var person2 = new person("baby", 17);
    person1.sayHi();//Hi,My name's jack,I'm 18 years old now.
    person2.sayHi();//Hi,My name's baby,I'm 17 years old now.

為了配合prototype屬性，Javascript定義了一些輔助方法:isPrototypeOf()、hasOwnProperty()。

isPrototypeOf()方法用來判斷，某個proptotype對象和某個實例之間的關(guān)系。alert(person.prototype.isPrototypeOf(person1)); //true 。

每個實例對象都有一個hasOwnProperty()方法，用來判斷是否本地屬性，false值就表示繼承自prototype對象的屬性。alert(person1.hasOwnProperty("name")); //true

二 . 繼承

 function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };

function Student(name, age, className){
        this.name = name;
        this.age = age;
        this.className=className;
};

現(xiàn)在，我們用一個學(xué)生（Student）的構(gòu)造函數(shù)，如何讓它繼承自人（person）這個構(gòu)造函數(shù)呢？

  function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };

    function Student(name, age, className) {
        person.apply(this, arguments);
        this.className = className;
    };
    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Student1.sayHi is not a function

使用apply、call簡單繼承一下，發(fā)現(xiàn)可以繼承到person，而person.prototype.sayHi這顯示沒有這個函數(shù)，這個錯誤暫時不用理他。下面我們使用使用prototype屬性進行繼承。

   function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };


    function Student(name, age, className) {
       this.name=name;
        this.age=age;
        this.className=className;
    };
    Student.prototype = new person();
　　Student.prototype.constructor = Student;

    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Hi,My name's jack,I'm 18 years old now.

然后再修改一下代碼，看看：

  function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };


    function Student(name, age, className) {
       this.name=name;
        this.age=age;
        this.className=className;
    };
    Student.prototype =person.prototype;
　　Student.prototype.constructor = Student;

    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Hi,My name's jack,I'm 18 years old now.
 alert(person.prototype.constructor); //  function Student(name, age, className)

有沒有發(fā)現(xiàn)哪里不同了？Student.prototype = new person(); 改為 Student.prototype =person.prototype; 這樣做好像是少用了一個new節(jié)省了，但實際上把Animal.prototype對象的constructor屬性也改掉了！在做繼承的時候千萬要注意，要保護好父級的代碼不受影響。

alert(person.prototype.constructor);//function Student(name, age, className)

那么，我們將它改為：

Student.prototype = Object.create(person.prototype);

輸出來是不是又好了呢？好了，現(xiàn)在回到上面繼承第一個例子，我們可以來修補整段代碼了

  function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };

    function Student(name, age, className) {
        person.apply(this, arguments);
        this.className = className;
    };

    Student.prototype = Object.create(person.prototype);　　
    Student.prototype.constructor = Student;

    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Student1.sayHi is not a function
    alert(person.prototype.constructor); // function person(name, age)

不要被繞暈了，跟著代碼做一遍就明白了。

最后用拷貝繼承的方式來實現(xiàn)繼承。這倒不是孔乙己所說的茴字到底有幾種寫法，有時候就需要考慮內(nèi)存的資源分配、兼容性等等，實現(xiàn)同一目標(biāo)有多種方式，可以找到最適合的一種。

   function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };

    function Student(name, age, className) {
        this.name = name;
        this.age = age;
        this.className = className;
    };

    function extend(Child, Parent) {
        var p = Parent.prototype;
        var c = Child.prototype;
        for (var i in p) {
            c[i] = p[i];
        }
        c.uber = p;
    }

    extend(Student, person);

    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Hi,My name's jack,I'm 18 years old now.
    alert(person.prototype.constructor); // function person(name, age)

這是純粹采用"拷貝"方法實現(xiàn)繼承：把父對象的所有屬性和方法，拷貝進子對象，就能夠?qū)崿F(xiàn)繼承。c.uber = p; 意思是為子對象設(shè)一個uber屬性，這個屬性直接指向父對象的prototype屬性。這等于在子對象上打開一條通道，可以直接調(diào)用父對象的方法。

最后，我們來看看普通對象是如何進行繼承操作的。

var area{
  nation:'中國'
}

var person{
  name:'jack'
}

現(xiàn)在我們想用person去繼承area，但這兩個對象都是普通對象，不是構(gòu)造函數(shù)，無法使用構(gòu)造函數(shù)方法實現(xiàn)"繼承"。json格式的創(chuàng)始人提出了一個object()函數(shù)，下面看看是如何做到這一點的。

var area={nation:'中國'};　
function object(o) {
　　　　function F() {}
　　　　F.prototype = o;
　　　　return new F();
　　}
　var person = object(area);
person.career = 'jack';
console.log(person.nation);//中國

下面我再給添加一個"出生地"屬性，它的值是一個數(shù)組。

area.birthPlaces = ['北京','上海','香港'];

    var area = {
        nation: '中國',
      birthPlaces:['北京', '上海', '香港']
    };　
    function object(o) {　　　　
        function F() {}　　　　
        F.prototype = o;　　　　
        return new F();　　
    }　
    var person = object(area);
    person.career = 'jack';
    person.birthPlaces.push('廣州');
    console.log(person.nation); //中國

    console.log(area.birthPlaces);//["北京", "上海", "香港", "廣州"]
    console.log(person.birthPlaces);//["北京", "上海", "香港", "廣州"]

但是，這樣的拷貝有一個問題。那就是，如果父對象的屬性等于數(shù)組或另一個對象，因此存在父對象被篡改的可能。上面提醒過，繼承要保護好父級的代碼不受影響。

請看，現(xiàn)在給area添加一個"出生地"屬性，它的值是一個數(shù)組。

下面使用深拷貝進行繼承：

var area = {
        nation: '中國',
        birthPlaces: ['北京', '上海', '香港']
    };　　
    function deepCopy(p, c) {　　　　
        var c = c || {};　　　　
        for (var i in p) {　　　　　　
            if (typeof p[i] === 'object') {　　　　　　　　
                c[i] = (p[i].constructor === Array) ? [] : {};　　　　　　　　
                deepCopy(p[i], c[i]);　　　　　　
            } else {　　　　　　　　　
                c[i] = p[i];　　　　　　
            }　　　　
        }　　　　
        return c;　　
    }

    var person = deepCopy(area);
    person.career = 'jack';
    person.birthPlaces.push('廣州');
    console.log(person.nation); //中國

    console.log(area.birthPlaces); //["北京", "上海", "香港"]
    console.log(person.birthPlaces); //["北京", "上海", "香港", "廣州"]

把父對象的屬性，全部拷貝給子對象，也能實現(xiàn)繼承。同時又不會影響到父對象的數(shù)據(jù)。jQuery庫使用的就是這種繼承方法。

畫了一個簡單的圖，希望能對你了解這篇文章有幫助：

oop.png

參考資料：

維基百科

MDN JavaScript

阮一峰的網(wǎng)絡(luò)日志：Javascript 面向?qū)ο缶幊?/p>

《JavaScript 權(quán)威指南》