JavaScript之深入對象（一）

来源:https://www.cnblogs.com/ruhaoren/archive/2019/09/12/11510116.html
-Advertisement-
Play Games

在之前的《JavaScript對象基礎》中，我們大概瞭解了對象的創建和使用，知道對象可以使用構造函數和字面量方式創建。那麼今天，我們就一起來深入瞭解一下JavaScript中的構造函數以及對象的原型及原型鏈。 一 構造函數 1，什麼是構造函數 Javascript中使用構造函數的目的是批量創建擁有相 ...


　　在之前的《JavaScript對象基礎》中，我們大概瞭解了對象的創建和使用，知道對象可以使用構造函數和字面量方式創建。那麼今天，我們就一起來深入瞭解一下JavaScript中的構造函數以及對象的原型及原型鏈。

 

 

一     構造函數

1，什麼是構造函數

         Javascript中使用構造函數的目的是批量創建擁有相同屬性的不同對象。

         實際上構造函數和普通函數並沒有本質上的區別，唯一不同的地方在於：構造函數一般使用new關鍵字調用。

         為了容易區別哪些是普通函數，哪些是構造函數，業界的共識是：構造函數使用大駝峰式命名規則（所有單詞首字母大寫）。普通函數和變數採用小駝峰式命名規則。

1 function myFunction(){
2 //這是普通函數
3 }
4 function MyFunction(){
5 //這是構造函數
6 }

2，構造函數的特點

         構造函數最大的特點就是通過關鍵字this來給即將創建的對象添加屬性和方法。

1 function Person(){
2     this.name = 'ren';
3     this.age = 12;
4 }
5 var perseon = new Person();
6 console.log(person);//{name:'ren',age:12}

3，構造函數的執行過程

         首先隱式的創建一個空對象，賦值給this。

         然後通過this添加屬性和方法。

         最後隱式的返回this對象。

1 //執行過程，以上面的Person為例
2 var this = {};
3 this.name = 'ren';
4 this.age = 12;
5 return this;

4，構造函數的返回值

         上面提到，構造函數執行到最後將隱式的的返回一個對象，但相信大家也沒有忘記，普通函數可以使用return關鍵字指定返回值。那麼，如果我們手動的在構造函數最後添加了return關鍵字，那麼它究竟會返回什麼呢？

         預設返回this。

         如果手動添加原始值，還是返回this。

1 function Person(){
2     this.name = 'ren';
3     this.age = 12;
4     return 50;
5 }
6 var person = new Person();
7 console.log(person);//{name:'ren',age:12}

         手動添加引用值，最終返回這個引用值。

1 function Person(){
2     this.name = 'ren';
3     this.age = 12;
4     return {name:'ru',age:22};
5 }
6 var person = new Person();
7 console.log(person);//{name:'ru',age:22}

　　請註意，以上情況都是基於把它當做構造函數，使用new關鍵字調用的結果。如果把它當做普通函數執行，那麼無論return後面添加什麼值，都將原樣返回，如果沒有return，則只會返回undefined。並且，這時函數內部將不會創建一個空對象，而且this也將不再引用這個空對象了，而是指向window對象。

 1 function Person(){
 2     this.name = 'ren';
 3     return {name:'person'};
 4 }
 5 function Animal(){
 6     this.name = 'ren';
 7     return 'dog';
 8 }
 9 var person = Person();
10 var animal = Animal();
11 console.log(person);//{name:'person'}
12 console.log(animal);//'dog'

 

二     函數的原型

　　一般我們在討論原型的時候通常是指構造函數的原型，因為使用普通函數的原型沒有實際意義。所以下麵提到的”原型”或“函數的原型”均指構造函數的原型。

　　要理解函數的原型其實很簡單。只需弄清楚3個屬性：

         fn.prototype

         obj.__proto__

         obj.constructor

 

1，  函數的prototype屬性

　　prototype是函數才具有的屬性，它指向一個對象，該對象具有的屬性和方法將被構造函數創建的對象(實例)繼承。

1 function test(){}
2 console.log(typeof test.prototype);//'object'
3 console.log(test.prototype);//{...}

　　這裡說繼承其實並不准確。比如a繼承了b的屬性和方法。字面上的意思是：a擁有了和b完全相同的屬性和方法。但構造函數創建的對象（實例）並沒有直接擁有原型上的屬性和方法，它只是拿到了使用那些屬性和方法的許可權而已。

1 function Person(){}
2 Person.prototype.name = 'ren';
3 var person = new Person();
4 console.log(person.hasOwnProperty('name'));//false,hasOwnProperty()方法用於檢測對象真實具有某屬性，而非繼承
5 console.log(person.name);//'ren'，但是可以訪問name屬性

2，  對象的__proto__屬性

　　大部分對象（不管什麼方式創建的）都有__proto__屬性。這個屬性將指向它自己的原型。那麼它自己的原型是個什麼東西呢？

　　前面提到，構造函數的目的是批量創建擁有相同屬性的不同對象，既然要創建大量擁有相同屬性的對象，那麼肯定需要一個統一的模板，這個統一的模板就是對象的原型。實際上它就是構造函數的prototype屬性指向的那個對象。

1 function Person(){}
2 var person = new Person();
3 console.log(person.__proto__ === Person.prototype);//true

3，  對象的constructor屬性

　　constructor屬性並不是所有對象都有的，只有原型對象才具有該屬性。該屬性指向與之相關聯的構造函數。

1 function Person(){}
2 var person = new Person();
3 console.log(person.hasOwnProperty('constructor'));//false
4 console.log(Person.prototype.constructor === Person);//true
5 console.log(person.__proto__.constructor === Person);//true

　　註意，雖然constructor屬性並不是所有對象都有的，但是實例依然可以訪問該屬性，並最終得到相應的構造函數。那是因為當讀取實例的屬性時，如果找不到，就會查找與對象關聯的原型中的屬性。

4，  實例、構造函數和原型的關係

 

三     原型鏈

1，原型鏈

　　前面講到，大部分對象都有__proto__屬性，指向它自己的原型對象。那麼原型對象自身呢？原型對象自身作為對象，當然也具有__proto__屬性，並且指向原型的原型。

　　同樣的，原型的原型也是一個對象，那麼它也就有一個constructor屬性指向一個關聯的構造函數。依次類推，原型對象最終將指向Object對象的原型，與之相關聯的構造函數則是Object。並且Object對象的原型就沒有原型對象了，如果訪問Object.prototype.__proto__將返回null。

 1 function Father(){}
 2 Father.prototype.name = 'ren';
 3 var father = new Father();
 4 
 5 function Son(){}
 6 Son.prototype = father;
 7 Son.prototype.age = 12;
 8 var son = new Son();
 9 
10 function GrandSon(){}
11 GrandSon.prototype = son;
12 GrandSon.prototype.address = 'cd';
13 var grandson = new GrandSon();
14 
15 Object.prototype.mail = '@';
16 
17 console.log(grandson.name);//'ren'
18 console.log(grandson.age);//12
19 console.log(grandson.address);//'cd'
20 console.log(grandson.mail);//'@'

　　從上面的例子可以看出，訪問對象的屬性和方法，其實是通過__proto__屬性在對象的原型鏈上查找，這一點和在函數內訪問變數有一點類似。

　　其實上面的例子有一個小小的bug，不知道你們發現了沒有。

1 console.log(Son.prototype.constructor);//Father (){}
2 console.log(GrandSon.prototype.constructor);//Father (){}
3 //列印的都是構造函數Father，這是為什麼呢？

　　Son構造函數的原型被我們手動指定為了father（Father構造函數的一個實例），father作為一個實例，它並不真實擁有constructor屬性，所以當我們訪問Son.prototype.constructor屬性時，實際在訪問father.__proto__.constructor，即Father構造函數。但Son作為一個構造函數，被它構造出來的對象在訪問constructor時理應指向Son本身才符合邏輯，所以我們應該在修改Son的原型後手動為father實例添加constructor屬性，並引用Son。相似的，son實例也應添加一個constructor屬性，並引用GrandSon（使用father或Son.prototype都可以達到目的，因為他們指向同一個對象。同理，son或者GrandSon.prototype也一樣）。

1 Son.prototype.constructor = Son;
2 GrandSon.prototype.constructor = GrandSon();

　　這一段可能理解起來有點繞，但是請務必多嘗試，並真正理解它。原型鏈是JS中一個相當重要的概念。最後附一張原型鏈的圖解。

2，Object.create()

         方法接受一個對象或者null作為參數，返回一個對象。如果傳遞了一個對象，那麼該對象將成為返回對象的原型。

1 var myProto = {name:“ren”};
2 var obj = Object.create(myProto);
3 obj.__proto__ === myProto;//true

　　如果傳遞了null作為參數，那麼它將沒有原型，所以也沒有__proto__屬性了。這就是在第2.2節說大部分對象都有__proto__屬性的原因了。還有一種說法是：並不是所有對象最終都繼承自Object。當然null也不繼承自Object。

1 var obj = Object.create(null);
2 console.log(obj.__proto__);//undefined

 


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

-Advertisement-
Play Games
更多相關文章
  • PhpMyAdmin 配置文件現在需要一個短語密碼的解決方法
    本文主要介紹PhpMyAdmin 配置文件現在需要一個短語密碼的解決方法，比較實用，希望能給大家做一個參考。 新版本的PhpMyAdmin 增強了安全性，需要在配置文件設置一個短語密碼。否則進入之後會有“配置文件現在需要一個短語密碼。”的紅色警嘆提示。 解決方法： 1、將 phpMyAdmin/li ...
  • 將Android封裝庫通過gradle部署到maven私服並依賴使用
    一、在需要發佈的模塊chrisbaselibrary下的build.gradle中添加以下部分 直接添加到最後即可。 使用gradle的插件uploadArchives實現部署。 部署成功後，我們可以修改app模塊的依賴方式。不過建議另外建一個項目進行依賴測試，畢竟這個項目中的app模塊是用來做實時 ...
  • 鍵值是數字時的處理方式
    同事碰到介面返回為數值的鍵值，想處理成自己想要的鍵值的對象，於是寫了個方法來處理類似的數據 '{"1":"憑訂單詳情頁的入園憑證(入園輔助碼或二維碼)入園","2":"憑下單時預留的身份證入園","3":""}' 處理成自己想要的鍵值的對象 const content = '{"1":"憑訂單詳情頁 ...
  • redux和react-redux
    redux和react redux的關係： redux是react的狀態管理工具，卻不僅僅只是為了react而生的，所以在使用中會存在痛點。而react redux是專門為了react定製，目的是為瞭解決redux的痛點，起到了補充的作用。 redux和flux思想： 從代碼層面而言，flux無非就 ...
  • capserjs-prototype(上)
    Casper prototyp back() 具體樣式: back() Moves back a step in browser’s history: 在瀏覽器歷史中回退一步: 同樣看一眼 "forward()" 方法 base64encode() 具體樣式: base64encode(String ...
  • casperjs-options
    The Casper class The easiest way to get a casper instance is to use the module’s create() method: 最簡單獲取casper實例的方法是casper模塊的create()方法: But you can al ...
  • jq動畫插件，自製基於vue的圓形時鐘
    首先附上jq插件庫，裡面的東西太炫了，建議學前端的可以看看學習下：http://www.jq22.com/ 裡面有個“超個性動畫版本的個人簡歷”，通過屏幕上不斷列印內容，改變相應樣式來實現動畫簡歷，我從來沒想到過還有這種操作； 再附上一個比較有趣的基於vue的圓形時鐘： <!DOCTYPE html ...
  • 那些你不知道的HTML知識，快來學習一下吧
    前言 HTML作為前端三大基礎知識點之一，是每一個前端開發人員都要掌握的部分。今天這篇文章我們來看看一些平時不太會註意，卻在面試時可能會問到的題目，來看看你都會嗎？ 如何使用div模擬實現textarea？ 我們都知道textarea是form表單中一個很常見的元素，用於多行文本輸入，可以設置行數和 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類