javascript面向對象編程筆記

来源:http://www.cnblogs.com/amumustyle/archive/2016/04/22/5422214.html
-Advertisement-
Play Games

對象：一切事物皆是對象。對象是一個整體，對外提供一些操作。比如說一個收音機是一個對象，我們不需要知道它的內部結構是什麼，只需要會使用外部的按鈕就可以使用收音機。 面向對象：面向對象語言的標誌是他們都有類的概念，通過類可以創建任意多個具有相同屬性的方法的對象。任何對象都是某一類事物的實例，簡單的說就是 ...


對象：一切事物皆是對象。對象是一個整體，對外提供一些操作。比如說一個收音機是一個對象，我們不需要知道它的內部結構是什麼，只需要會使用外部的按鈕就可以使用收音機。

 

面向對象：面向對象語言的標誌是他們都有類的概念，通過類可以創建任意多個具有相同屬性的方法的對象。任何對象都是某一類事物的實例，簡單的說就是使用對象時，只關註對象提供的功能，不關註其內部細節。

 

面向對象的特點：封裝，繼承，多態。

 

JS中面向對象的組成：1.方法（函數）：過程，動態的 2.屬性（有所屬關係的變數）：狀態，靜態的

 

對象是無序屬性的集合，其屬性可以包括基本值、函數、對象。每個屬性都會有一個名字，每個名字映射到一個值上
下麵是創建一個對象的一些方法

1.工廠模式

 1 function createPerson (name,sex) {//工廠方式構造一個對象
 2 
 3         //1.原料 
 4         var obj=new Object(); //new一個空白對象
 5         
 6         //2.加工
 7         obj.name=name;
 8         obj.sex=sex;
 9 
10         obj.showName=function(){
11             console.log('我的名字叫:'+this.name)
12         }
13 
14         obj.showSex=function(){
15             console.log('我是:'+this.sex+'的')
16         }
17         
18         //3.出廠
19         return obj;//這一步千萬不能那下
20     }
21 
22     var p1=createPerson('木木','女');//每用一次createPerson 就會new一個對象，每個對象都有一套自己的方法 造成資源浪費
23     var p2=createPerson('揚揚','男');
24 
25     p1.showName();
26     p1.showSex();
27     p2.showName();
28     p2.showSex();

使用工廠方式構造對象步驟：
1,原料
2.加工
3.出廠
工廠方式不常用，因為有缺點：1.沒有new 2.每個對象都有一套自己的函數，造成資源的浪費
怎麼解決這個兩個問題呢？那麼請看下麵

2.構造函數模式

 1 function Person (name,sex) {//構造函數   構造一個對象
 2         this.name=name;//this:當前的方法屬於誰(在函數前面有new時會失效)
 3         this.sex=sex;
 4 
 5         this.showName=function(){
 6             console.log('我的名字叫:'+this.name);
 7         }
 8 
 9         this.showSex=function(){
10             console.log('我是:'+this.sex+'的');
11         }
12        
13     }
14 
15     var p1=new Person('木木','女');  //外面加new後Person函數裡面就不用new一個空白對象
16     var p2=new Person('揚揚','男');
17 
18     console.log(p1.showName==p2.showName);//fase
19 
20     p1.showName();
21     p1.showSex();
22     p2.showName();
23     p2.showSex();

註意：一般將Person稱為構造函數，並且構造函數的名字首字母大寫，這是編碼規範。
this：表示當前的方法屬於誰，但是在這裡當this碰到New時就會失效。
用造函數模式解決了上面工廠模式沒有New的問題
這時就要想一想了在使用new操作符調用構造函數創建一個新實例的過程中發生了什麼呢？一個新實例是怎麼生成的呢？
這種方式調用構造函數經歷以下四個步驟：
1.創建一個新對象
2.將構造函數的作用域賦給新對象（因此this就指向了這個新對象）
3.執行構造函數中的代碼（為這個新對象添加屬性）
4.返回新對象

1 function show(){
2         alert(this);
3     }
4     show();//彈出window對象（當在全局作用域中調用一個函數時，this對象總指向window對象，全局函數屬於window的一個方法）
5     new show();//彈出obj （this會指向）新創建的一個對象

面這個例子會看得更加清楚
作為普通函數調用：

 1 var name = "mumu";
 2         function Person(name){
 3             this.name = name;
 4             this.show = function(){
 5             console.log("我是" + this.name);
 6             }
 7         }
 8 
 9         Person("javascript");
10         console.log(name);//結果是javascript

全局變數name被修改了

作為構造函數調用：

 1 var name = "mumu";
 2         function Person(name){
 3             this.name = name;
 4             this.show = function(){
 5             console.log("我是" + this.name);
 6             }
 7         }
 8 
 9         var Name = new Person("HTML");
10         console.log(Name.name);
11         console.log(name);

this指向新對象Name，全局變數name也沒有變化

那麼問題又來了：

1 console.log(p1.showName==p2.showName);//fase

不同實例的showName()函數是不相同的，那麼怎麼解決這個問題呢？下麵是一個解決辦法

 1 function Person (name,sex) {//構造函數  
 2         this.name=name;//this:當前的方法屬於誰(在函數前面有new時會失效)
 3         this.sex=sex;
 4 
 5         this.showName=showName;
 6         
 7     }
 8     function showName(){
 9             console.log('我的名字叫:'+this.name+'我是:'+this.sex+'的');
10         }
11 
12     var p1=new Person('木木','女');  //外面加new後Person函數裡面就不用new一個空白對象
13     var p2=new Person('揚揚','男');
14 
15     console.log(p1.showName==p2.showName);//ture
16 
17     p1.showName();
18     p2.showName();

將showName定義成一個全局方法，這樣每個實例共用的都是全局方法showName()。不相等的問題是解決了，可是如果構造函數里有大量的方法，這就造成代碼中有大量的全局變數，這樣我們自定義的引用類型就沒有封裝性了，資源還是照樣浪費。那麼怎麼解決這個問題呢？請看原型模式

3.原型模式

 1 function Person(name,sex) {//原型模式構造函數   
 2         Person.prototype.name=name;
 3         Person.prototype.sex=sex;
 4         Person.prototype.showName=function(){
 5             console.log('我的名字叫:'+this.name+'我是:'+this.sex+'的');
 6         }
 7     }
 8 
 9     var p1=new Person('木木','女'); 
10     var p2=new Person('揚揚','男');
11 
12     console.log(p1.showName==p2.showName);//ture
13     
14     p1.showName();
15     p2.showName();

prototype(原型)返回對象類型原型的引用。這個屬性是一個指針，指向對象。可以讓所有對象實例共用它所包含的屬性和方法，可以擴展系統對象，節省系統資源，所以這裡解決了上面資源浪費問題。
原型的問題：是當一個實例改變屬性值時，所有實例對應的屬性值也都跟著改變，無法初始化屬性值，當為對象實例添加一個屬性時，這個屬性就會屏蔽原型對象中保存的同名屬性，下麵是個小例子：

 1 function Person(name,sex) {//原型模式構造函數   
 2         Person.prototype.name=name;
 3         Person.prototype.sex=sex;
 4         Person.prototype.showName=function(){
 5             console.log('我的名字叫:'+this.name+'我是:'+this.sex+'的');
 6         }
 7     }
 8 
 9     var p1=new Person('木木','女'); 
10     var p2=new Person('揚揚','男');
11     
12     p1.name="兮兮";
13 
14     p1.showName();//兮兮 來自實例
15     p2.showName();//揚揚 來自原型

前面幾種方法都各有各優缺點，那麼把它們綜合一下又會怎麼樣呢？

4.組合使用構造函數模式和原型模式

 1 //構造函數模式定義實例屬性
 2     function Person (name,sex) {   
 3         this.name=name;
 4         this.sex=sex;
 5     }
 6     
 7     //原型模式共用方法和共用屬性
 8     Person.prototype.showName=function(){
 9             console.log('我的名字叫:'+this.name+'我是'+this.sex+'的')
10         }
11 
12     var p1=new Person('木木','女'); 
13 
14     p1.showName();

這種方法是最常用的，結合了兩種方法的優點，最大限度地節省了記憶體

5.動態原型模式

 1 function Person(name, age) {
 2     this.name = name;
 3     this.age = age;
 4 
 5         //方法
 6         if(typeof this.showName != 'function') {
 7             Person.prototype.showname = function() {
 8                 console.log("我的名字是： " + this.name);
 9             }
10         }
11     }
12     var person1 = new Person("mumu", 17);
13     person1.showname();

動態原型方法可以通過檢查方法是否有效，決定初始化的原型。這種方法堪稱為完美，但是不能使用面向字面量重寫原型，這樣會切斷現有實例與新原型之間的聯繫。

6.寄生構造函數模式

 1 function createPerson(name, age) {
 2         var obj=new Object();
 3         obj.name = name;
 4         obj.age = age;
 5         obj.showName = function() {
 6             console.log("我的名字是：" + this.name);
 7         }
 8         return obj;
 9     }
10     var person = new createPerson("mumu", 17);
11     person.showName();

此方法可以和工廠模式對比一下，創建實例方法與構造函數相同，其餘與工廠模式相同。如果前面方法都不適用可以考慮一下這種方法，但是這種方法構造函數返回的對象與實例沒有關係，也不能依賴instanceof判斷對象類型，因此，如果可以使用其他模式這種方法建議還是不要使用。

7.穩妥構造函數模式

 1 function Person(name, age) {
 2         var obj = new Object();
 3         //定義一些私有變數和函數
 4         obj.showName = function() {
 5             console.log("我的名字是：" + name); //定義的私有變數等只能通過showName訪問
 6         }
 7         return obj;
 8     }
 9     var person1 = Person("兮兮", 17);
10     person1.showName();

所謂穩妥對象，指的是沒有公共屬性。這種方法適合用於在安全的環境下，因為它不使用new調用構造函數，也不使用this引用實例方法。若想訪問其屬性，只能通過showname方法來訪問其內部私有屬性。


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

-Advertisement-
Play Games
更多相關文章
  • 第 1 章 Bootstrap 介紹
    學習要點：1.Bootstrap 概述2.Bootstrap 特點3.Bootstrap 結構4.創建第一個頁面5.學習的各項準備 主講教師：李炎恢 本節課我們主要瞭解一下 Boostrap 歷史、特點、用途，以及為什麼選擇 Boostrap 來開發我們的 Web 項目。 一．Bootstrap 概 ...
  • 前端學習一
    開始學習前端知識，做一些筆記來記錄下～ 之前學習都是使用的dw 現在前端開發工具既輕便功能也夠強大。 下麵記錄下常用的前端工具： 工具安裝： Sublime3安裝 官網下載地址：http://www.sublimetext.com/ 安裝插件步驟： 第一步：安裝插件的包管理器：package con ...
  • h5上傳圖片及預覽
    第一次做圖片上傳，記錄一些問題。 1，圖片的base64編碼就是可以將一副圖片數據編碼成一串字元串，使用該字元串代替圖像地址。而網頁上的每一個圖片，都是需要消耗一個http請求下載而來的，使用base64就不用請求http。 2，上傳圖片： 3，圖片轉base64（readAsDataURL方法用於 ...
  • JavaScript學習筆記 -- sort()的用法
    關於排序問題，第一次看教程/書的時候都是迷迷糊糊的感覺，看完就忘記了。等到看第二遍的時候，才發現自己其實沒有掌握該知識點，其實這些在網上都能搜到，但是只有自己親自整理才會有比較深刻的印象。前面還有許多問題沒有寫在博客上，以後視情況添加。 關於JS的sort()方法和reverse()方法是可以直接用 ...
  • 詳解Bootstrap按鈕組件
    按鈕組也是一個獨立的組件，所以可以找到相應的源碼文件： Less：buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 按鈕組和下拉菜單組件一樣，需要依賴於button.js插件才能正常運作。 結構方面：使用一個類名為btn-gr ...
  • 新增的querySelector、querySelectorAll測試
    從IE9開始DOM開始支持支持CSS的選擇器了，DOM提供了兩個介面 querySelector 得到一個DOM querySelectorAll 得到一組DOM 一個個的解釋這些選擇器也沒有必要，我們結合前面的數組知識，寫一段代碼來說明。頁面上有一組元素，然後會依據我們數組中的預訂選擇值選擇相應元 ...
  • 工欲善其事必先利其器——web調試工具firebug
    一、Firebug工具簡介 firebug是firefox下的一款開發類插件。firebug集html查看和編輯，JavaScript控制台，網路狀況監視器於一體，是開發JavaScript，css，html和ajax的得力助手。 YSlow是插件。 二、Firebug應用 1、禁用標簽 下拉菜單啟 ...
  • javascript 不響應可能是引用外部javascript時，引用順序不對。
    有相互引用關係的js,要最後執行的方法所在的js 先被引用。 a.js 中有function1 b.js 中有function2 function1 （） { function2（）{} } 要 <script src="b.js"></script> <script src="a.js"></sc ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類