JavaScript原型

afishhhhh 發(fā)布于2019-08-22 16:16 / 2949人閱讀

摘要：而這個(gè)原型對象作為這個(gè)構(gòu)造函數(shù)的一個(gè)屬性，是被其創(chuàng)建出來的所有實(shí)例共享的。

構(gòu)造函數(shù)創(chuàng)建對象帶來的問題

上一篇文章介紹了JavaScript創(chuàng)建對象的幾種方法，都有各自的優(yōu)缺點(diǎn)。
構(gòu)造函數(shù)看起來好像很好，但是它也有一個(gè)問題，那就是創(chuàng)建出來的每一個(gè)實(shí)例對象的方法都是一個(gè)獨(dú)立的函數(shù)，即使他們的內(nèi)容是完全相同的，這是不符合函數(shù)的代碼復(fù)用原則的，而且也不能夠統(tǒng)一的修改已被創(chuàng)建的實(shí)例的方法。

    function Person(name, age, sex) {
        this.name = name;
        this.age  = age;
        this.sex  = sex;
        
        this.introduce = function () {
            console.log("我叫" + this.name + ", 今年" + this.age + "歲.");
        };
    }
    
    var jerry = new Person("Jerry", "21", "M");
    var julia = new Person("Julia", "27", "F");

    console.log(jerry.introduce === julia.introduce);        // false

上述代碼中的jerry對象和julia對象的introduce()方法是兩個(gè)獨(dú)立的函數(shù)，數(shù)據(jù)不共享，如果對象創(chuàng)建更多就浪費(fèi)了大量的內(nèi)存空間。

JavaScript原型解決方案

在 JavaScript 中，每當(dāng)定義一個(gè)對象（函數(shù)也是對象）時(shí)候，對象中都會(huì)包含一些預(yù)定義的屬性。其中每個(gè)函數(shù)對象都有一個(gè) prototype 屬性，這個(gè)屬性指向函數(shù)的原型對象。

那么，這個(gè)原型對象有什么作用呢?
構(gòu)造函數(shù)是一個(gè)函數(shù)對象，所以就會(huì)有一個(gè) prototype 屬性，也就有了一個(gè)原型對象，既然這是一個(gè)對象，那么久可以為它添加屬性和方法。而這個(gè)原型對象作為這個(gè)構(gòu)造函數(shù)的一個(gè)屬性，是被其創(chuàng)建出來的所有實(shí)例共享的。

所以上面的代碼我們可以這樣改寫

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

    Person.prototype.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "歲.");
    };

    var jerry = new Person("Jerry", "21", "M");
    var julia = new Person("Julia", "27", "F");

    console.log(jerry.introduce === julia.introduce);        // true

這樣就解決了數(shù)據(jù)共享的問題，達(dá)到了代碼復(fù)用的目的，無論通過此構(gòu)造函數(shù)創(chuàng)建了多少個(gè)對象，introduce 方法只會(huì)占用一份內(nèi)存空間。
且可以統(tǒng)一修改所有 Person 構(gòu)造函數(shù)創(chuàng)建的實(shí)例對象的 introduce 方法。

原型對象中的方法是可以相互調(diào)用的

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

    Dog.prototype.play = function () {
        console.log("小狗玩耍");
        this.bark();
    };

    Dog.prototype.bark = function () {
        console.log("小狗叫");
    };

    var tom = new Dog("Tom", 3);
    
    tom.play();// 小狗玩耍    小狗叫