JavaScript 面向對象編程

来源:http://www.cnblogs.com/zkh101/archive/2017/09/28/7606104.html
-Advertisement-
Play Games

面向對象編程就是將你的需求抽象成一個對象，針對這個對象分析其特征（屬性）和動作（方法），這個對象稱為“類”。JavaScript 的核心是支持面向對象的，同時它也提供了強大靈活的 OOP 語言能力，遺憾的是對於JavaScript這種解釋性的弱類型語言，沒有強類型語言中那種通過class等關鍵字實現... ...


前言

面向對象編程就是將你的需求抽象成一個對象，針對這個對象分析其特征（屬性）和動作（方法），這個對象稱為“類”。JavaScript 的核心是支持面向對象的，同時它也提供了強大靈活的 OOP 語言能力，遺憾的是對於JavaScript這種解釋性的弱類型語言，沒有強類型語言中那種通過class等關鍵字實現類的方式，但JavaScript可以通過一些特性模仿實現面向對象編程。

面向對象有三個基本特征：封裝、繼承、多態。

封裝

封裝，就是把客觀事物封裝成抽象的類，類中包含了事物的屬性和方法，並且類可以把自己的數據和方法只讓可信的類或者對象操作，對不可信的進行信息隱藏。
JavaScript創建一個類很容易，通過聲明一個函數保存在一個變數里來實現，這個類的類名通常會採用首字母大寫的形式來表示，然後在這個函數（類）的內部使用this關鍵字來定義類的屬性和方法。例如：

var Person = function(name,sex,age){
    this.name = name;
    this.sex = sex;
    this.age = age;
}

也可以在類的原型上添加屬性和方法。例如：

Person.prototype.say = function(){
    // Say something
}

或者

Person.prototype = {
    say: function(){ … }
}

這樣就完成了Person類的封裝，當我們要使用這個類時，需要通過new關鍵字來實例化（創建）一個新的對象，通過.操作符訪問對象的屬性和方法。例如：

var person = new Person('Scott','male',20);
console.log(person.name);  // Scott

通過this添加的屬性和方法是在當前對象上添加的，而JavaScript是一種基於原型prototype的語言，每創建一種對象時，都有一個原型prototype用於指向其繼承的屬性和方法，通過prototype繼承的屬性和方法不是屬於對象本身的，在使用這些方法時，會通過原型鏈進行查找。當創建一個對象時，會創建this指向的屬性和方法，而通過prototype繼承的屬性或方法是該類的每個對象所共有的，不會再次創建。

當創建一個函數或者對象時都會為其創建一個prototype對象，原對象中的__proto__屬性指向該原型對象，prototype對象中會有一個constructor屬性指向擁有整個原型對象的函數或者類。

通過new關鍵字創建對象時實際上是對新對象中this的不斷賦值，並將prototype指向類的原型對象，而在類外通過.操作符定義的屬性和方法是不會添加到新建對象上的，通過對象進行訪問的結果是undefined。例如：

Person.isChinese = true;
Person.eat = function(){ … }

var person = new Person("Alex","female",19);
console.log(person.name);    // Alex
console.log(person.isChinese);    // undefined
console.log(person.eat());    // undefined

如果你忽略了new關鍵字直接調用類，如：var person = Person("Alex","female",19);，此時會直接調用Person這個函數，如果這個函數是在全局作用域里執行的，則此時類中的this指向的當前對象就是全局變數，在頁面中全局變數就是window，所以通過this添加的屬性或方法會被添加到window中，並且最終的person對象會是undefined。

要解決這個問題可以採用“安全模式”，例如：

var Person = function(name,sex,age){
    if(this instanceof Person){
        this.name = name;
        this.sex = sex;
        this.age = age;
    }else{    // 未使用 new
        return new Person(name,sex,age);
    }
}

var person = Person("Scott","male",20);

這樣就不用當心創建對象時忘記使用new關鍵字了。

繼承

繼承可以使用現有類的所有功能，併在無需重新編寫原來的類的情況下對這些功能進行擴展。繼承所涉及的對象不止一個，JavaScript並沒有提供繼承這一現有的機制，也正因為JavaScript少了這些顯性的限制，使其更具有靈活性。在JavaScript中可以使用類式繼承、構造函數繼承、組合繼承來達到繼承的效果。

類式繼承

// 聲明父類
function Parent(){
    this.parentValue = true;
}
// 為父類添加共有方法
Parent.prototype.getParentValue = function(){
    return this.parentValue;
}

// 聲明子類
function Child(){
    this.childValue = false;
}
// 繼承父類
Child.prototype = new Parent();
// 為子類添加共有方法
Child.prototype.getChildValue = function(){
    return this.childValue;
}

類的原型對象的作用是為類的原型添加共有屬性和方法，但類必須通過原型prototype來訪問這些屬性和方法。當實例化一個父類時，新建對象複製了父類構造函數內的屬性和方法，並且將原型__proto__指向了父類的原型對象，這樣就擁有了父類原型對象上的屬性和方法，新建對象可以直接訪問父類原型對象的屬性和方法，接著將這個新建的對象賦值給子類的原型，那麼子類的原型就可以訪問父類的原型屬性和方法。將這個對象賦值給子類的原型，那麼這個子類就可以訪問父類原型上的屬性和方法，並且可以訪問從父類構造函數中複製的屬性和方法。我們可以來測試一下：

var child = new Child();
console.log(child.getParentValue());      // true
console.log(child.getChildValue());       // false
console.log(child instanceof Parent);     // true
console.log(child instanceof Child);      // true
console.log(Child instanceof Parent);     // false

但這種繼承方式有2個缺點：

  • 由於子類是通過其原型prototype對父類實例化，如果父類中的共有屬性是引用類型，會被所有實例所共用，一個子類的實例修改了該屬性會直接影響到所有實例。例如：

    function Parent(){
this.values = ['A','B','C'];
}
function Child(){}
Child.prototype = new Parent();
var child1 = new Child();
var child2 = new Child();
console.log(child2.values);    // ["A","B","C"]
child1.values.push('D');
console.log(child2.values);    // ["A","B","C","D"]

  • 創建父類實例時，是無法向父類傳遞參數的，也就是無法對父類構造函數內的屬性進行初始化。例如這種錯誤的繼承方式：

    function Parent(name){
this.name = name;
}
function Child(){}
Child.prototype = new Parent('name');    // 錯誤

構造函數繼承

// 聲明父類
function Parent(name){
    this.name = name;
    this.values = ['A','B','C'];
}
Parent.prototype.showName = function(){
    console.log(this.name);
}
// 聲明子類
function Child(name){
    Parent.call(this,name);
}
var child1 = new Child('one');
var child2 = new Child('two');
child1.values.push('D');
console.log(child1.name);   // one
console.log(child1.values); // ["A","B","C","D"]
console.log(child2.name);   // two
console.log(child2.values); // ["A","B","C"]
child1.showName();          // TypeError

語句Parent.call(this,name);是構造函數繼承的精華，call方法可以更改函數的作用環境，在子類中執行該方法相當於將子類的變數在父類中執行一遍，此時父類方法中的this屬性指的是子類中的this，由於父類中是給this綁定屬性的，所以子類也就繼承了父類的屬性和方法。構造函數繼承並沒有涉及原型prototype，所以父類的原型方法不會被子類繼承，子類的每個實例會單獨擁有一份父類的屬性方法而不能共用，如果想被子類繼承就必須放在構造函數中，要實現這樣的效果可以採用組合繼承的方式。

組合繼承

類式繼承是通過子類的原型prototype對父類實例化來實現的，構造函數繼承是通過在子類的構造函數作用環境中執行一次父類的構造函數來實現的，而組合繼承則同時做到這兩點。

// 聲明父類
function Parent(name){
    this.name = name;
    this.values = ['A','B','C'];
}
Parent.prototype.getName = function(){
    console.log(this.name);
}
// 聲明子類
function Child(name,id){
    Parent.call(this, name);
    this.id = id;
}
Child.prototype = new Parent();
Child.prototype.getId = function(){
    console.log(this.id);
}

var child1 = new Child('child1', 1);
child1.values.push('D');
console.log(child1.values); // ["A", "B", "C", "D"]
child1.getName();           // child1
child1.getId();             // 1

var child2 = new Child('child2', 2);
console.log(child2.values);    // ["A", "B", "C"]
child2.getName();              // child2
child2.getId();                // 2

子類的實例中更改父類繼承下來的引用類型屬性，不會影響到其它實例，並且子類實例化過程中又能將參數傳遞到父類的構造函數中。

多態

多態就是同一個方法多種調用方式，JavaScript可以通過對傳入的參數列表arguments進行判斷來實現多種調用方式。例如：

function Add(){
    // 無參數
    function zero(){
        return 0;
    }
    // 一個參數
    function one(num){
        return num;
    }
    // 兩個參數
    function two(num1, num2){
        return num1 + num2;
    }

    this.add = function(){
        // 獲取參數列表及參數個數
        var arg = arguments,
            len = arg.length;
        switch(len){
            case 0:
                return zero();
            case 1:
                return one(arg[0]);
            case 2:
                return two(arg[0], arg[1]);
        }
    }
}

var A = new Add();
console.log(A.add());       // 0
console.log(A.add(1));      // 1
console.log(A.add(1,2));    // 3

當調用add進行運算時，會根據參數列表的不同做相應的運算，這就是JavaScript的多態實現方式。

總結

面向對象設計方法的應用解決了傳統結構化開發方法中客觀世界描述工具與軟體結構的不一致性問題，縮短了開發周期，解決了從分析和設計到軟體模塊結構之間多次轉換映射的繁雜過程，是一種高效率的軟體開發方式，特別是在多人協作開發的情況下，可以提高代碼的可復用性和維護性，使開發更有效率。

本文為作者kMacro原創，轉載請註明來源：http://www.jianshu.com/p/c2083cf275ec。


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

-Advertisement-
Play Games
更多相關文章
  • 仿百度文庫網站系統，文庫網站系統源碼，文庫網站建設開發
    專業定製仿百度文庫網站系統，仿豆丁網網站，仿道客巴巴網站，文庫網站系統源碼，文庫網站建設開發，支持電腦版+手機版+微信版+小程式版+APP版，由10年的技術團隊專業定製，需要的朋友可以聯繫我們。 網站採用：PHP+MySQL+thinkPHP框架（可定製） <ignore_js_op> <ignor ...
  • 素數問題
    所謂素數是指除了1和它本身以外，不能被任何整數整除的數，例如17就是素數，因為它不能被2~16的任一整數整除。因此判斷一個整數m是否是素數，只需把m被2~m-1之間的每一個整數去除，如果都不能被整除，那麼m就是一個素數另外判斷方法還可以簡化。m不必唄2~m-1之間的每一個整數去除，只需被2~√m之間 ...
  • sql語句增刪改查與子查詢
    修改表 修改表 語法: Alter table <舊表名> rename [ TO] <新表名>; 例子:Alter table `demo01` rename `demo02`; 添加欄位 語法: Alter Table 表名 ADD 欄位名 數據類型 [屬性]; 例子:Alter Table ` ...
  • 我的第一個python web開發框架（2）——一個簡單的小外包
    第一部分說明 第一部分大概有20來章，主要講的是一些開發常識、開發前中後期準備內容、開發環境與伺服器部署環境安裝設置、python基礎框架結構與功能等內容，代碼會比較簡單。 本系列會以故事的方式，向大家描述一位有點開發基礎的程式猿，怎麼將一個小系統，根據需求的增加，以及對技術的追求，慢慢的通過重構， ...
  • ant 打包war包
    項目結構 在目錄中運行 ant war 即可. ...
  • 服務治理概述
    本來應一個可愛帥氣的編輯之邀，要寫一本書《靜兒的互聯網服務治理私房菜》。想選服務治理的題材，想急著簽協議就寫了一個很匆忙的目錄和例章。寫書本是計划了很久的一件事情。現在反而有些猶豫了。我是不是應該把腳步放慢一些，再穩一些。我是不是應該自己先寫了一部分，再考慮簽約出版的事情。要做的事情太多了，比如：家 ...
  • 編程心智(一)——代碼架構與系統架構
    原文地址: http://michael-j.net/2017/09/24/%E7%BC%96%E7%A8%8B%E5%BF%83%E6%99%BA-%E4%B8%80-%E2%80%94%E2%80%94%E4%BB%A3%E7%A0%81%E6%9E%B6%E6%9E%84%E4%B8%8E%E ...
  • UML學習——狀態圖（四）
    1.什麼是UML狀態圖 UML狀態圖是描述類對象可能經歷的所有狀態的模型圖，描述了對象基於事件反應的動態行為。顯示實體根據當時的狀態做出具體的動作。 2.UML類圖的作用。 UML類圖的作用是研究類對象，角色，子系統或者其他組件之間的實時行為。 3.UML狀態圖的繪製 3.1 狀態圖的模型組成元素 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類