javascript 對象的創建與繼承 

来源:https://www.cnblogs.com/wangzirui98/archive/2019/05/04/10808546.html
-Advertisement-
Play Games

針對JS高級程式設計這本書，主要是理解概念，大部分內容源自書內。寫這個主要是當個書中的筆記加總結 存在的問題請大家多多指正！ 6.1理解對象 創建對象的兩個方法（暫時） 6.1.1 類型屬性 JS不能訪問的數據屬性 Configurable 能不能用delete刪除 預設true Enumerab ...


針對JS高級程式設計這本書，主要是理解概念，大部分要點源自書內。寫這個主要是當個筆記加總結

存在的問題請大家多多指正！

6.1理解對象

創建對象的兩個方法（暫時）

 1 //第一種，通過創建一個Object類型的實例，然後為他添加屬性和方法
 2 var person = new Object()
 3     person.name = 'laotie'
 4     person.sayName = function(){
 5         alert(this.name)
 6 }   
 7 //第二種簡化版
 8 var person = {
 9     name: 'laotie',
10     sayName: {
11         alert(this.name)
12     }
13 }

 

6.1.1 類型屬性

1.數據屬性

JS不能訪問的數據屬性

  • Configurable 能不能用delete刪除 預設true
  • Enumerable 能否通過for-in迴圈返回屬性 預設true
  • Writable 能否修改屬性 預設true
  • Value 就是這個屬性的屬性值 預設undefined

Object.defineProperty（）接收三個參數：屬性所在的對象，屬性的名字和一個描述符對象 描述符對象必須是上面那四個

var person = {}
Object.defineProperty(person, 'name', {\
    //我設置了，其中person的屬性name，所以name這個屬性他就動不了了
    writable: false,
    value: 'laotie'
})

alert(person.name) //'laotie'
person.name = '666'
alert(person.name) //'laotie'

 

如果用Object創建的屬性一般configurable,enumerable,writable的預設值都是false，如果不用他創建的話就沒有限制。

總之這個東西沒什麼太大實際用處,幫助理解吧

2.訪問器屬性
  • Configurable, enumerable 跟上面的差不多
  • Get 在讀取屬性時調用的函數
  • Set 在寫入時調用的屬性 get,set預設都為undefined
var book = {
        _year: 2004
        edition: 1
    }
    
    Object.defineProperty(book, 'year', {
        //這裡放剛纔的屬性
        get: function(){
            return this._year
        },
        set: function(newValue){
            if(newValue > 2004){
                this._year = newValue
                this.edition += newValue - 2004
            }
        }
        
    })
    
    book.year = 2005
    alert(book.edition) //2

 

老方法不介紹了，是直接在對象後面調用__defineGetter__和__defineSetter__,參數裡面第一個是屬性，第二個穿進去個處理函數

6.1.2定義多個屬性

ES5加了個牛逼的Object.defineProperties（）方法
第一個參數里放要修改屬性的對象 ，第二個加個代碼塊裡面方參數

var book = {}
Object.defineProperties(book,{
    _year: {
        writable: true,
        value:2004
    },
    edition: {
        writable: true,
        value: 1
    },
    set:function(newValue){
        if(newValue > 2004){
                this._year = newValue
                this.edition += newValue - 2004
            }
    }
})

 

6.1.3讀取屬性的特性

Object.getOwnPropertyDescriptor()

var descript = Object.getOwnPropertyDescriptor(book, '_year')
alert(descript.value) //2004
alert(descript.configurable) //false

 

6.2創建對象

6.2.1工廠模式

fucntion createPerson(name, age, job){
    var o = new Object()
    o.name = name
    o.age = age
    o.job = job
    o.sayName = function(){
        alert(this.name)
    }
    
    return o 
}

var person1 = creatPerson('laotie', 26, 'meiyou')

 

沒法解決你這個對象什麼類型的，因為對象在裡面創建的，很迷

6.2.2構造函數模式

    //構造函數首字母大寫 Person
    function Person(name, age, job){
        this.name = name 
        this.age = age
        this.job = job
        this.sayName = function(){
            alert(this.name)
        }
    }
    //有個new
    var person1 = new Person('laotie', 26, 'meiyou')

 

用instanceof驗證是誰的實例

person1 instanceof Object //true
person1 instanceof Person //true
  • 如果不按套路用構造函數可以不用new 然後也可以沒有變數接著
Person('laotie', 25, '666') //添加對象到window
window.sayName() //‘laotie’

 

構造函數中的方法在不停的聲明function實例，每一個同名function通過新對象的創建都在不停地複製著等於this.sayName = new Function('alert(this.name)')

可以這樣改

    //構造函數首字母大寫 Person
    function Person(name, age, job){
        this.name = name 
        this.age = age
        this.job = job
        this.sayName = sayName
    }
    
   function sayName(){
        alert(this.name)
   }

 

但是這樣構建函數的話沒有封裝性可言，所以要用原型模式

6.2.3原型模式

每個函數都有一個prototype屬性指向原型對象

//標準的原型模式函數是沒有參數的
function Person(){}

Person.prototype.name = 'laotie'
Person.prototype.age = 29
Person.prototype.job = '666'
Person.prototype.sayName = function(){
    alert(this.name)
}

 

缺點：新建的所有對象所有屬性都共用，沒有傳參

只要創建一個新函數， 那他就有一個原型的屬性（prototype這個屬性），這個屬性指向他的原型對象，原型對象自動獲得一個constructor屬性（叫構造函數的屬性），這個屬性指向prototype屬性所在的函數，新建的實例函數里都會有一個不可見的[[Prototype]]的屬性（這個對象在火狐safari和chrome里可以看見，叫__proto__）指向原型對象

原型模式函數創建的對象可以再給屬性賦值，賦的值可以掩蓋原型對象中的值
delete你自己賦的值之後原型對象里的值還可以用

person1.hasOwnProperty('name') //可以看有無自己賦值的屬性，有事true ，沒有false
'name' in person1 //不管是自己的屬性還是原型對象里的屬性，只要有值就是true

 

簡單點的設置prototype

function Person(){}
Person.prototype = {
    //一般加上constructor: Person 要不然構造函數就跑到Object了
    constructor: Person
    name:'laotie',
    sayName: function(){
        alert(this.name)
    }
}

 

新建對象是一定要在構造的後面哈，在前面建對象的話會斷開和新建的原型對象的鏈接
function Person(){}
var person1 = new Person()
//相當於重新設置了Person的原型對象，現在的原型對象和person不是同一個了，所以person1中沒有sayName這個函數
Person.prototype = {
    constructor: Person
    name:'laotie',
    sayName: function(){
        alert(this.name)
    }
}
person1.sayName() //error

 

有個很大的毛病，就是原型模式函數不能自己傳參，所以無論新建多少對象都是一個德行，沒有屬於自己的屬性

6.2.4 把構造函數模式和原型模式組合一波

構造的定義不一樣的屬性，而原型模式構造一樣的屬性

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

Person.prototype = {
    constructor: Person,
    sayName: function(){
        alert(this.name)
    }
}

 

6.3繼承

6.3.1原型鏈

原型模式構造函數：

  • 每個構造函數都會都會有一個原型對象，原型對象contrustor指向構造函數，實例對象[[prototype]]屬性指向原型對象。

原型鏈就是把superType的實例對象給subType構造函數當原型。

還跟原型構造函數要註意的一樣，就是在新建實力之後更改構造函數的原型，要不然就會斷絕實例對象和新原型對象之間的聯繫

  • function SuperType(){
    this.property = true
}

SuperType.prototype.getSuperValue = function(){
    return this.property
}

function SubType(){
    this.subproperty = false
}

SubType.prototype = new SuperType()

SubType.prototype.getSubValue = function(){
    return this.subproperty
}

var instance = new SubType()

alert(instance.getSuperValue) //true

     

    原型模式參數傳遞不方便，所以菜的一批，所以借用構造函數

6.3.2 借用構造函數

就是在SubType里call或者apply一個SuperType,相當於在SubType調用了SuperType里的所有東西，所以就順理成章的繼承過來了

function SuperType(){
    this.color = ['red', 'blue']    
}

function SubType(){
    SuperType.call(this)
}

var instance1 = new SubType()
instance1.colors.push('black')
alert(instance1.colors) //red,blue,black

var instance2 = new SubType()
alert(instance.colors) //red,blue

 

與原型的不同就是可以傳參數，然後用call的第二個後面或者apply的第二個函數賦值

但是問題是方法都在構造函數里，函數沒法復用，所以就用組合式的比較弔，可以傳參，可以函數復用

6.3.4 組合式繼承

就是上面說的，用借用構造函數傳參和設定基本屬性，用原型鏈來做方法的復用

function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue']
}

SuperType.prototype.sayName = function() {
  alert(this.name)
}

function Subtype(name, age) {
//第二處這裡在call的時候又引入了name 和color屬性。所以重覆了，這也是組合繼承的缺點
  SuperType.call(this, name)
  this.age = age
}
//第一處在設置原型對象時候在原型對象中 有name 和color屬性了，看上面⤴️
Subtype.prototype = new SuperType()
Subtype.prototype.constructor = SubType
Subtype.prototype.sayAge = function (){
  alert(this.age)
}

 

這樣的好處是可以傳入參數可以有自己的屬性，然後又可以有共同的函數

6.3.4 原型式繼承

Object.creat()這個方法，可以放一個或者兩個參數，一個參數的時候是第一個是一個對象
第二個函數是可以附加一些屬性，通過{name:'laotie'}這樣的直接加進去

原理類似下麵

function object(o){
    function F(){}
    F.prototype = o
    return new F()
}

 

其實就是講一個對象豐富了加了一些屬性，然後再返回一個實例對象。有一個弊端，沒有creat之前的內容和屬性始終會共用。

6.3.5 寄生式繼承

這個書上也沒有仔細講，給我感覺就是傳進來一個對象，然後通過內部加強一些內容再返還出去

function creatAnother(original){
    var clone = object(original)
    clone.sayhi = funciton(){
        alert('hi')
    }
    return clone
}

 

6.3.6 寄生組合式繼承

尼古拉斯挑了個原型鏈繼承的和借用繼承的毛病，就是裡面的參數會重覆的建，占用記憶體，所以為了優化，就找了個寄生組合繼承，給我感覺像是借用加上原型式（不是原型鏈繼承模式是原型式）模式

function inheritPrototype(subType,SuperType){
    var prototype = object(SuperType.prototype)
    prototype.constructor = subType
    subtype.prototype = prototype
}

 

這個不就是原型式繼承嗎？為啥要帶上寄生式，感覺沒寄生式啥事。
然後剩下的用借用就行了

完整代碼：

function SuperType(name){
    this.name = name 
    this.colors = ['red','blue']
}

SuperType.prototype.sayName = function(){
    alert(this.name)
}

function SubType(name,age){
    SuperType.call(this,name)
    this.age = age
}

inheritPrototype(subType,SuperType)

SubType.prototype.sayAge = function(){
    alert(this.age)
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • React的世界觀及與Vue之比較
    寫在前面：本文談論的是主觀的個人感受，不追求立場的“客觀、公正”，因此我下麵所說的很可能是錯的，歡迎交流指正。 我學習前端時，跟大部分beginner一樣，學的第一個框架是Vue，入職後也一直寫Vue。寫了一年多，想換換口味了，於是決定最近的新項目改用React試試。用了大半個月後，我已經完全被這個 ...
  • 07.移動端類庫
    iScroll.js 一個可以實現客戶端原生滾動效果的類庫。 1、下載iScroll 2、build目錄下提供了不同版本的iScroll，可根據情況選擇使用 3、html要求有3層結構如下圖 4、獲取wrapper這個最外層結點，然後實例化，如下圖 swipe.js 1、下載swipe.js 2、h ...
  • 06.網頁佈局
    佈局方式 1、固定寬度佈局：為網頁設置一個固定的寬度，通常以px做為長度單位，常見於PC端網頁。 2、流式佈局：為網頁設置一個相對的寬度，通常以百分比做為長度單位。 3、柵格化佈局：將網頁寬度人為的劃分成均等的長度，然後排版佈局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來劃分成均等 ...
  • 05.預處理器
    CSS 預處理器是一種語言，用來為 CSS 增加一些編程的的特性，無需考慮瀏覽器的相容性問題，並且你可以在 CSS 中使用變數、簡單的程式邏輯、函數等等在編程語言中的一些基本技巧，可以讓你的 CSS 更簡潔，適應性更強，代碼更直觀等諸多好處。 常見的CSS預處理器有：LESS、SASS、Stylus ...
  • Node.js學習之（第三章：簡易小demo）
    前言 我們前面已經學習完了Node中一些核心模塊還有如何正確配置響應頭的Content Type，今天我們來實現一個簡單的demo，鞏固下之前學習的內容。 需求 我們平時訪問百度或者其他大的門戶網站的時候，伺服器給我們返回的基本都是一個HTML文檔，然後瀏覽器解析渲染成頁面。 今天我們就用Node. ...
  • 03.媒體查詢
    媒體查詢 設備終端的多樣化，直接導致了網頁的運行環境變的越來越複雜，為了能夠保證我們的網頁可以適應多個終端，不得不專門為某些特定的設備設計不同的展示風格，通過媒體查詢可以檢測當前網頁運行在什麼終端，可以有機會實現網頁適應不同終端的展示風格。 媒體類型 將不同的終端設備劃分成不同的類型，稱為媒體類型 ...
  • javascript 函數表達和閉包
    函數表達式和閉包 針對JS高級程式設計這本書，主要是理解概念，大部分內容源自書內。寫這個主要是當個書中的筆記加總結 存在的問題請大家多多指正！ 定義函數的兩種方法 函數聲明： 函數表達式： 函數聲明提升 ：函數可以先用，聲明在下麵自動給提到上面來 函數表達式 後面的是 匿名函數 ，又叫 拉姆達函數 ...
  • 原生js動態添加新元素、刪除元素方法
    1. 添加新元素 2.刪除已有元素 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類