首頁 web前端 js教程 javascript 面向对象编程 function也是类_js面向对象

javascript 面向对象编程 function也是类_js面向对象

May 16, 2016 pm 06:46 PM
function 物件導向

但javascript中并没有类概念,所谓的类也是模拟而来,通过函数加闭包模拟出类成员及私有成员(关于闭包可以参见跨越边界: 闭包)。这里我们将用比较平实的方式来了解一下javascript中的”类”,避开一些生硬的原理。

      既然是用function来模拟类,所以编写代码创建类的关键字还是function。我们创建一个座标点类。

    <SPAN class=kwrd>function</SPAN> Point() {
登入後複製
      <SPAN class=kwrd>this</SPAN>.X = 0;
登入後複製
      <SPAN class=kwrd>this</SPAN>.Y = 0;
登入後複製
    };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
    <SPAN class=kwrd>var</SPAN> zeroPoint = <SPAN class=kwrd>new</SPAN> Point();
登入後複製
    alert(<SPAN class=str>"当前座标值( X:"</SPAN> + zeroPoint.X + <SPAN class=str>" , Y:"</SPAN> + zeroPoint.Y + <SPAN class=str>" )"</SPAN>);
登入後複製

image

大家都知道非静态类成员的访问需要通过对象来完成,所以先new出了一个Point类型对象,再通过该对象完成X和Y轴座标值的访问。从语法上来说,javascript类对象的创建过程和C#等差不多,但实现机制却不相同。这里的new创建出了一个Object,后续的Point()函数执行时将其this指向了这个新的Object对象。Point中的this.X和this.Y是Point类的两个公共成员,所以Point的对象可以直接对它们进行访问。

说到类成员或对象的成员,免不了要提到可访问性的问题。在javascript的类中,也有public成员和private成员之分,但究其细节却不尽相同。javascript私有成员也是些在类外部不可以通过对象进行操作的成员,其实在类的内部成员之间私有成员也不定能被访问。在类的内部一般只有私有成员和私有成员之间可以互相的访问,你可以认为其它成员权限不够不能操作这些隐私的东西,但如果你有特权,那就不一样了,管它私有公开照用不误。私有成员变量和普通变量声明一样,用var关键字,私有方法可以用var声明变量来接收方法对象,也可以像普通方法那样去构建。

    <SPAN class=kwrd>function</SPAN> Lady() {
登入後複製
登入後複製
      <SPAN class=kwrd>var</SPAN> age = 30;
登入後複製
登入後複製
      <SPAN class=kwrd>var</SPAN> name = <SPAN class=str>"菜花"</SPAN>;
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
      <SPAN class=kwrd>var</SPAN> think = <SPAN class=kwrd>function</SPAN>() {
登入後複製
登入後複製
        alert(<SPAN class=str>"其实我今年"</SPAN> + age + <SPAN class=str>"岁。"</SPAN>);
登入後複製
登入後複製
      };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
      
登入後複製
      <SPAN class=kwrd>function</SPAN> fancy(){
登入後複製
        alert(<SPAN class=str>"幻想变成20岁。"</SPAN>);
登入後複製
登入後複製
      };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
      <SPAN class=kwrd>this</SPAN>.Introduce = <SPAN class=kwrd>function</SPAN>() {
登入後複製
登入後複製
        alert(<SPAN class=str>"我叫"</SPAN> + name + <SPAN class=str>" , 今年20岁。"</SPAN>);
登入後複製
      };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
    };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
    <SPAN class=kwrd>var</SPAN> younglady = <SPAN class=kwrd>new</SPAN> Lady();
登入後複製
登入後複製
    alert(younglady.age);<SPAN class=rem>//结果undefined</SPAN>
登入後複製
    younglady.think(); <SPAN class=rem>//不支持</SPAN>
登入後複製
    younglady.fancy(); <SPAN class=rem>//不支持</SPAN>
登入後複製

上面是一个Lady类,age、think、fancy都是私有成员,think和fancy方法可以访问age和name,think和fancy两个方法也可以互相进行调用。但它们是私有的,所以创建出来的youngLady对象并不能调用到age、think和fancy,当然也不能调用到name。如果私有成员只能互相之间调用,其实也就失去了私有成员存在的意义。javascript提供特权成员可以建立外界和私有成员互通的桥梁。特权成员是公共成员的一种,公共成员有普通公共成员、特权成员和对象公共成员。

特权成员就是在类中用this.XX的方式建立的成员,它们可以通过对象来被调用,它们也可以访问私有成员,可以建立私有成员被访问的通道。

    <SPAN class=kwrd>function</SPAN> Lady() {
登入後複製
登入後複製
      <SPAN class=kwrd>var</SPAN> age = 30;
登入後複製
登入後複製
      <SPAN class=kwrd>this</SPAN>.Name = <SPAN class=str>"菜花"</SPAN>;
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
      <SPAN class=kwrd>var</SPAN> think = <SPAN class=kwrd>function</SPAN>() {
登入後複製
登入後複製
        alert(<SPAN class=str>"其实我今年"</SPAN> + age + <SPAN class=str>"岁。"</SPAN>);
登入後複製
登入後複製
      };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
      <SPAN class=kwrd>function</SPAN> fancy() {
登入後複製
        alert(<SPAN class=str>"幻想变成20岁。"</SPAN>);
登入後複製
登入後複製
      };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
      <SPAN class=kwrd>this</SPAN>.Introduce = <SPAN class=kwrd>function</SPAN>() {
登入後複製
登入後複製
        alert(<SPAN class=str>"我叫"</SPAN> + <SPAN class=kwrd>this</SPAN>.Name + <SPAN class=str>" , 今年"</SPAN> + age + <SPAN class=str>"岁。"</SPAN>);
登入後複製
      };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
    };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
    <SPAN class=kwrd>var</SPAN> younglady = <SPAN class=kwrd>new</SPAN> Lady();
登入後複製
登入後複製
    younglady.Introduce(); <SPAN class=rem>//Introduce</SPAN>
登入後複製

image

普通公共成员的创建,不在类的里面来编码,而是通过类的prototype来创建。添加普通公共成员都直接添加到类的prototype中,而prototype就是一个像JSON对象一样的成员集对象。当我们进行对象创建时,可以认为会将类prototype中的成员整体copy入新的Object对象中。

    <SPAN class=kwrd>var</SPAN> younglady = <SPAN class=kwrd>new</SPAN> Lady();
登入後複製
登入後複製
登入後複製
    younglady.Introduce(); <SPAN class=rem>//Introduce</SPAN>
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
    Lady.prototype.Hobby = <SPAN class=str>"上网"</SPAN>;
登入後複製
    Lady.prototype.GetName = <SPAN class=kwrd>function</SPAN>() {
登入後複製
      <SPAN class=kwrd>return</SPAN> <SPAN class=kwrd>this</SPAN>.Name;
登入後複製
    };
登入後複製
登入後複製
    
登入後複製
    <SPAN class=kwrd>var</SPAN> lady2 = <SPAN class=kwrd>new</SPAN> Lady();
登入後複製
    alert(lady2.GetName());
登入後複製
    alert(lady2.Hobby);
登入後複製

上面代码通过prototype为Lady类添加了普通公共成员GetName方法和Hobby属性,因为是公共成员,所以它们可以和原先定意在类中的特权成员进行互相访问。因为公共成员可以互相访问。对上述代码做些修改。如下。

    <SPAN class=kwrd>var</SPAN> younglady = <SPAN class=kwrd>new</SPAN> Lady();
登入後複製
登入後複製
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
    Lady.prototype.Hobby = <SPAN class=str>"上网"</SPAN>;
登入後複製
    Lady.prototype.GetName = <SPAN class=kwrd>function</SPAN>() {
登入後複製
      <SPAN class=kwrd>return</SPAN> <SPAN class=kwrd>this</SPAN>.Name;
登入後複製
    };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
    alert(younglady.GetName());
登入後複製
登入後複製
    alert(younglady.Hobby);
登入後複製
登入後複製

先创建出Lady对象,再修改类成员,先前创建好的对象也具有了新的成员。这就是prototype做为类原型所带来的好处,这里简单理解,可以认为prototype是类对象的模版,模版的修改会影响到所有该类对象。

在添加普通成员的时候也可以来个批量的添加,直接用一个新的JSON对象来赋给prototype就可以了。但是要注意,现在是将原先的prototype进行了替换,在替换之前创建的对象引用的是旧的prototype对象,所以对prototype替换之前创建的对象不会有Hobby和GetName成员。

    Lady.prototype = {
登入後複製
      Hobby: <SPAN class=str>"上网"</SPAN>,
登入後複製
      GetName: <SPAN class=kwrd>function</SPAN>() {
登入後複製
        <SPAN class=kwrd>return</SPAN> <SPAN class=kwrd>this</SPAN>.Name;
登入後複製
      }
登入後複製
    };
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
    <SPAN class=kwrd>var</SPAN> younglady = <SPAN class=kwrd>new</SPAN> Lady();
登入後複製
登入後複製
登入後複製
    alert(younglady.GetName());
登入後複製
登入後複製
    alert(younglady.Hobby);
登入後複製
登入後複製

除了在构建类时可以添加公共成员,还可以对对象直接进行成员操作。这在本小系列第二篇文章里有描述。这里做一下补充,对对象直接添加的成员,也是一种公共成员,这些成员也可以和类中原先具有的公共成员进行访问。

    younglady.SetName = <SPAN class=kwrd>function</SPAN>(name) {
登入後複製
      <SPAN class=kwrd>this</SPAN>.Name = name;
登入後複製
    };
登入後複製
登入後複製
    younglady.SetName(<SPAN class=str>"菜明"</SPAN>);
登入後複製
    alert(younglady.GetName());
登入後複製

以上说了一下类成员的东西,下次再说说类继承相关的东西。(如有不当说法请指正)

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

function是什麼意思 function是什麼意思 Aug 04, 2023 am 10:33 AM

function是函數的意思,是一段具有特定功能的可重複使用的程式碼區塊,是程式的基本組成單元之一,可以接受輸入參數,執行特定的操作,並傳回結果,其目的是封裝一段可重複使用的程式碼,提高程式碼的可重複使用性和可維護性。

@JsonIdentityInfo註解在Java中使用Jackson的重要性是什麼? @JsonIdentityInfo註解在Java中使用Jackson的重要性是什麼? Sep 23, 2023 am 09:37 AM

當物件在Jackson庫中具有父子關係時,將使用@JsonIdentityInfo註解。 @JsonIdentityInfo 註解 用於在序列化和反序列化過程中指示物件身分。 ObjectIdGenerators.PropertyGenerator是一個抽象佔位符類,用來表示要使用的物件識別碼來自POJO屬性的情況。語法@Target(value={ANNOTATION_TYPE,TYPE,FIELD,METHOD,PARAMETER})@Retention(value=RUNTIME)public

探索Go語言中的物件導向編程 探索Go語言中的物件導向編程 Apr 04, 2024 am 10:39 AM

Go語言支援物件導向編程,透過型別定義和方法關聯實作。它不支援傳統繼承,而是透過組合實現。介面提供了類型間的一致性,允許定義抽象方法。實戰案例展示如何使用OOP管理客戶訊息,包括建立、取得、更新和刪除客戶操作。

PHP高階特性:物件導向程式設計的最佳實踐 PHP高階特性:物件導向程式設計的最佳實踐 Jun 05, 2024 pm 09:39 PM

PHP中OOP最佳實務包括命名約定、介面與抽象類別、繼承與多型、依賴注入。實戰案例包括:使用倉庫模式管理數據,使用策略模式實現排序。

Golang中有類似類別的物件導向特性嗎? Golang中有類似類別的物件導向特性嗎? Mar 19, 2024 pm 02:51 PM

在Golang(Go語言)中並沒有傳統意義上的類別的概念,但它提供了一種稱為結構體的資料類型,透過結構體可以實現類似類別的物件導向特性。在本文中,我們將介紹如何使用結構體實現物件導向的特性,並提供具體的程式碼範例。結構體的定義和使用首先,讓我們來看看結構體的定義和使用方式。在Golang中,結構體可以透過type關鍵字定義,然後在需要的地方使用。結構體中可以包含屬

解析PHP物件導向程式設計中的享元模式 解析PHP物件導向程式設計中的享元模式 Aug 14, 2023 pm 05:25 PM

解析PHP物件導向程式設計中的享元模式在物件導向程式設計中,設計模式是一種常用的軟體設計方法,它可以提高程式碼的可讀性、可維護性和可擴充性。享元模式(Flyweightpattern)是設計模式中的一種,它透過共享物件來降低記憶體的開銷。本文將探討如何在PHP中使用享元模式來提升程式效能。什麼是享元模式?享元模式是一種結構型設計模式,它的目的是在不同物件之間共享相同的

Go語言的物件導向特性解析 Go語言的物件導向特性解析 Apr 04, 2024 am 11:18 AM

Go語言支援物件導向編程,透過struct定義對象,使用指標接收器定義方法,並透過介面實現多態。物件導向特性在Go語言中提供了程式碼重用、可維護性和封裝,但也存在缺乏傳統類別和繼承的概念以及方法簽章強制型別轉換的限制。

'enumerate()'函數在Python中的用途是什麼? 'enumerate()'函數在Python中的用途是什麼? Sep 01, 2023 am 11:29 AM

在本文中,我們將了解enumerate()函數以及Python中「enumerate()」函數的用途。什麼是enumerate()函數? Python的enumerate()函數接受資料集合作為參數並傳回一個枚舉物件。枚舉物件以鍵值對的形式傳回。 key是每個item對應的索引,value是items。語法enumerate(iterable,start)參數iterable-傳入的資料集合可以作為枚舉物件傳回,稱為iterablestart-顧名思義,枚舉物件的起始索引由start定義。如果我們忽

See all articles