深入淺出面向對象和原型【概念篇2】

DevTTL 發布于2019-08-26 11:43 / 2492人閱讀

摘要：墻裂建議您在看這篇文章之前閱讀一遍我之前寫的文章深入淺出面向對象和原型概念篇，因為此篇文章涉及到不少相關概念都在上篇文章里啦簡單復習對象對象是老生常談的概念了，在這里我們來簡單復習一下對象內儲存一個對象對象是一個儲存一系列無序鍵值對的集合的

墻裂建議您在看這篇文章之前閱讀一遍我之前寫的文章深入淺出面向對象和原型【概念篇1】，因為此篇文章涉及到不少相關概念都在上篇文章里啦

1.1 簡單復習對象

對象是老生常談的概念了，在這里我們來簡單復習一下

var obj = {
        a: 1, 
        b: "hello",
        c: true,
        d: function () {
            console.log("hello")
        },
        e: {
            e_1: "對象內儲存一個對象"
        }
    }

對象是一個儲存一系列無序 key: value【鍵值對】的集合的容器

注意：核心是要將對象作為一個容器看待

使用對象作為容器的這個特性我們可以進行封裝，這會產生兩個好處

讓我們的代碼變得優雅、易讀

規避全局變量

1.2 通過構造函數創建對象 1.2.1 關于function的額外知識

function作為構造函數（通過new操作符調用）的時候會返回一個類型為function的對象

function可以接受參數，可以根據參數來創建 相同類型不同值 的對象

function實例作用域內有一個constructor屬性，這個屬性就可以指示其構造器

1.2.2 學會使用 new Function

new 運算符接受一個函數 F 及其參數：new F(arguments...)

創建類的實例——這步是把一個空的對象的__proto__屬性設置為 F.prototype

初始化實例——函數 F 被傳入參數并調用，關鍵字 this 被設定為該實例

返回實例

    function People(name) {
        this.name = name
        this.sayName = function () {
            console.log(name)
        }
        // 一般在這個函數里不要 return
        // 如果return引用類型的話，等于把return的值賦值給p1
    }

    People() // this指向全局變量，name和sayName成為了全局變量的屬性

    var p1 = new People("sad")
    // 第一步：instance = {} 創建了一個類的實例 —— 空對象，并且將空的對象的__proto__屬性設置為 F.prototype，也就是說
    // 第二步：執行函數People()，并傳入參數"sad"，并將this指向p1
    // 第三步：return instance【實例】 , 即把instance賦值給p1

    // 請注意 People()是一個函數，new People()是構造函數

    var p2 = new People("angry")

1.2.3 instanceof

instance 的中文意思為實例
那么 instanceof 自然就是用來判斷對象是否為某個類型的實例

    console.log(p1 instanceof People) // true
    // 意思是判斷 對象（p1）是否為某個類型（People）的實例
    // p1 是由 People 構建出來的，自然是People的實例，返回為true

但需要注意的是，instanceof 運算符的工作原理是檢測 類的prototype 是否存在實例的原型鏈上

    console.log(p1 instanceof Object) // true
    // 因為Object.prototype可以被實例p1以原型鏈的方式訪問到

1.2.4 構造函數存在的問題

構造函數在解決了上面所有問題，同時為實例帶來了類型
但可以注意到在上例中，每個的實例的方法作用是一樣的
但是每個實例被創建的時候都要重新聲明一遍，浪費了內存

    // 我們再來看一下這個函數
    function People(name) {
        this.name = name
        this.sayName = function () {
            console.log(name)
        } // 每個實例的sayName方法卻是相同的，而且每出現一個新實例，都是新聲明一個函數，大大地浪費了內存
    }

能不能給People的實例都使用同一個sayName方法呢

1.3 構造函數&原型&原型鏈 1.3.1 構造函數

任何函數使用new表達式就是構造函數，也就是說這個函數成為了一個類

1.3.2 用原型鏈解決重復創建的問題

每個對象都會自帶一個名稱為prototype的屬性

prototype屬性是一個對象

    // 還是這個例子
    function People(name) {
        this.name = name
        this.sayName = function () {
            console.log(name)
        } 
    }
    var p1 = new People("sad")
    var p2 = new People("angry")
    
    // People本身就有prototype屬性
    console.log(People.prototype) // {constructor: ?} 

    // 而每個對象也都會帶有一個__proto__屬性，指向這個構造函數【實例】的類
    // 所有的實例都共用一個prototype
    console.log(p1.__proto__ === People.prototype) // true
    console.log(p2.__proto__ === People.prototype) // true

    // 實例可以通過__prop__訪問到其 類 的prototype屬性，這就意味著類的prototype對象可以作為一個公共容器，供所有實例訪問。
    People.prototype.test = "abc"
    console.log(p1.test) // abc

    // p1這個對象沒有test屬性，但是可以通過它的__proto__屬性訪問到People的prototype屬性

上述關系我們用一張圖來幫助大家更好地理解

1.3.3 解決內存浪費問題

由上我們可以知道

所有實例都會通過原型鏈引用到其類的prototype

prototype相當于所有實例都可以訪問到的一個公共容器，這個公共容器也是這些實例的類的屬性

那么如何解決內存浪費問題呢？

Answer：重復的東西移動到公共容器里就可以了

    function People(name) {
        this.name = name // 每個對象的name屬性時不同的，這點無可厚非
    }

    People.prototype.sayName = function () {
        console.log(this.name)
    } // 將sayName方法放入People的原型中

    var p1 = new People("sad")
    var p2 = new People("angry")
    console.log(p1.sayName())
    console.log(p2.sayName())

GPU云服務器云服務器深入java面向對象第2篇對象面向對象面向對象

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

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

深入淺出面向對象和原型【概念篇1】

摘要：龔先生是一位在當地非常有名氣的廚師，但他對自己用的鍋一直不太滿意，于是打算自己造一個龔先生想好了。 1.什么是面向對象面向對象是一種思維方式[與語言無關]，教你如何思考代碼Object Oriented Programmingorient 的英文意思是使朝向那么，面向對象不如說成是以對象為目標的一種編程思維方式 2.面向對象的主要概念淺析好了，現在讓我們進入正題面向對象的難點...

djfml 2019-08-26 11:43 評論0 收藏0
深入淺出面向對象和原型【概念篇3】—— 原型鏈和繼承

摘要：由一個問題引發的思考這個方法是從哪兒蹦出來的首先我們要清楚數組也是對象，而且是對象的實例也就是說，下面兩種形式是完全等價的只不過是一種字面量的寫法，在深入淺出面向對象和原型概念篇文章里，我們提到過類會有一個屬性，而這個類的實例可以通過屬性訪 1.由一個問題引發的思考 let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] arr1.c...

levinit 2019-08-22 14:52 評論0 收藏0
深入淺出面向對象和原型【番外篇——重新認識new】

摘要：前言我們在深入淺出面向對象和原型概念篇在這篇文章中了解到了如何使用解決重復創建浪費內存的問題，其中的關鍵就是，那么這篇文章讓我們來重新了解的前世今生一個苦逼年級主任的故事開學啦高一年級主任龔主任需要為全年級每一位理科班新生錄入學號并為每一位前言我們在深入淺出面向對象和原型【概念篇2】在這篇文章中了解到了如何使用new Function解決重復創建浪費內存的問題，其中的關鍵就是new...

Apollo 2019-08-26 11:44 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0