JavaScript原型

一.原型

1.初識原型

JS中原型是一個很重要的概念，有點類似於java類中的靜態變量，這麼說也不是很準確。構造函數有個prototype屬性，該屬性是一個對象叫做原型對象，通過該屬性可以爲構造函數添加其實屬性和方法然後被對象使用。

    //構造函數
    function User(name, age) {
        this.name = name;
        this.age = age;
    }

    //原型中添加屬性
    User.prototype.sex = "男";

    //原型中添加方法
    User.prototype.sleep = function () {
        console.log("睡覺～");
    }

    var user = new User("張三", 20);
    console.dir(user);
    console.dir(User);

    console.log(user.sex);// 男
    user.sleep();// 睡覺～

console.dir()語句是輸出結構：

可以看到實例對象user中有age，name屬性，還有個User原型，User原型中有構造器constructor，還有我們指定的sex屬性和sleep()方法。構造函數中prototype屬性，其內容和實例對象中的User原型內容是一致的。由於我使用的是Safari瀏覽器實例對象中打印的是User原型，在Google瀏覽器中打印的應該是__proto__。

2.原型的簡單寫法

    User.prototype = {
        sex: "男",
        sleep: function () {
            console.log("睡覺～");
        }
    }

    var user = new User("張三", 20);
    console.log(user.sex);// 男
    user.sleep();// 睡覺～

相當於通過字面量的方式創建對象。

3.原型對象中方法相互調用

    User.prototype.sleep = function () {
        this.wash();
        console.log("睡覺～")
    }
    User.prototype.wash = function () {
        console.log("洗刷～");
    }
    var user = new User("張三", 20);
    user.sleep();
    //洗刷～
    //睡覺～

在sleep方法中調用wash方法。

4.原型對象和實例對象變量方法重名問題

   function User(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    //原型中添加屬性
    User.prototype.sex = "男";
    var user = new User("張三", 20, "女");
    console.log(user.sex);//女

因此構造函數中如果存在某個變量，會使用構造函數中的變量，如果沒有才會去原型中去找。

5.爲內置對象添加原型方法

    var array = new Array(1, 2, 3, 4, 5, 6);
    Array.prototype.getLast=function () {
        return this[this.length-1];
    }
    console.log(array.getLast());//6

爲數組Array添加了一個getLast的方法。

6.原型的好處

未完待續…