JavaScript原型

afishhhhh 發布于2019-08-22 16:16 / 2869人閱讀

摘要：而這個原型對象作為這個構造函數的一個屬性，是被其創建出來的所有實例共享的。

構造函數創建對象帶來的問題

上一篇文章介紹了JavaScript創建對象的幾種方法，都有各自的優缺點。
構造函數看起來好像很好，但是它也有一個問題，那就是創建出來的每一個實例對象的方法都是一個獨立的函數，即使他們的內容是完全相同的，這是不符合函數的代碼復用原則的，而且也不能夠統一的修改已被創建的實例的方法。

    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()方法是兩個獨立的函數，數據不共享，如果對象創建更多就浪費了大量的內存空間。

JavaScript原型解決方案

在 JavaScript 中，每當定義一個對象（函數也是對象）時候，對象中都會包含一些預定義的屬性。其中每個函數對象都有一個 prototype 屬性，這個屬性指向函數的原型對象。

那么，這個原型對象有什么作用呢?
構造函數是一個函數對象，所以就會有一個 prototype 屬性，也就有了一個原型對象，既然這是一個對象，那么久可以為它添加屬性和方法。而這個原型對象作為這個構造函數的一個屬性，是被其創建出來的所有實例共享的。

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

    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

這樣就解決了數據共享的問題，達到了代碼復用的目的，無論通過此構造函數創建了多少個對象，introduce 方法只會占用一份內存空間。
且可以統一修改所有 Person 構造函數創建的實例對象的 introduce 方法。

原型對象中的方法是可以相互調用的

    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();// 小狗玩耍    小狗叫

GPU云服務器云服務器 javascript原型原型原型鏈基于原型原型方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94196.html

理解JavaScript的核心知識點：原型

摘要：首先，需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考，面向對象編程是其一種思維方式，與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者（包括本人）低估甚至忽視了，這是因為絕大多數人沒有想要深刻理解這個機制的內涵，以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...

iKcamp 2019-08-23 18:34 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評論0 收藏0
深入理解Javascript原型關系

摘要：如下所示在規范中，已經正式把屬性添加到規范中也可以通過設置和獲取對象的原型對象對象之間的關系可以用下圖來表示但規范主要介紹了如何利用構造函數去構建原型關系。前言在軟件工程中，代碼重用的模式極為重要，因為他們可以顯著地減少軟件開發的成本。在那些主流的基于類的語言（比如Java,C++）中都是通過繼承(extend)來實現代碼復用，同時類繼承引入了一套類型規范。而JavaScript是...

ethernet 2019-08-22 14:06 評論0 收藏0
JavaScript基礎之創建對象、原型、原型對象、原型鏈

摘要：在最開始的時候，原型對象的設計主要是為了獲取對象的構造函數。同理數組通過調用函數通過調用原型鏈中描述了原型鏈的概念，并將原型鏈作為實現繼承的主要方法。對象的創建在JavaScript中創建一個對象有三種方式。可以通過對象直接量、關鍵字new和Object.create()函數來創建對象。 1. 對象直接量創建對象最直接的方式就是在JavaScript代碼中使用對象直接量。在ES5...

wangbjun 2019-08-22 15:16 評論0 收藏0
細說 Javascript 對象篇（二） : 原型對象

摘要：并沒有類繼承模型，而是使用原型對象進行原型式繼承。我們舉例說明原型鏈查找機制當訪問一個對象的屬性時，會從對象本身開始往上遍歷整個原型鏈，直到找到對應屬性為止。原始類型有以下五種型。此外，試圖查找一個不存在屬性時將會遍歷整個原型鏈。 Javascript 并沒有類繼承模型，而是使用原型對象 prototype 進行原型式繼承。盡管人們經常將此看做是 Javascript 的一個缺點，然...

lansheng228 2019-08-19 14:40 評論0 收藏0