ホームページ ウェブフロントエンド jsチュートリアル JavaScript オブジェクト指向プログラミング関数も class_js オブジェクト指向です

JavaScript オブジェクト指向プログラミング関数も class_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 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

機能とはどういう意味ですか? 機能とはどういう意味ですか? Aug 04, 2023 am 10:33 AM

ファンクションとは、関数を意味します。これは、特定の関数を備えた再利用可能なコード ブロックです。プログラムの基本コンポーネントの 1 つです。入力パラメータを受け取り、特定の操作を実行し、結果を返すことができます。その目的は、再利用可能なコード ブロックをカプセル化することです。コードの再利用性と保守性を向上させるコード。

Java で Jackson を使用する @JsonIdentityInfo アノテーションの重要性は何ですか? Java で Jackson を使用する @JsonIdentityInfo アノテーションの重要性は何ですか? Sep 23, 2023 am 09:37 AM

@JsonIdentityInfo アノテーションは、Jackson ライブラリ内でオブジェクトに親子関係がある場合に使用されます。 @JsonIdentityInfo アノテーションは、シリアル化および逆シリアル化中にオブジェクトの ID を示すために使用されます。 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 オブジェクト指向プログラミングにおけるフライウェイト パターンの分析 Aug 14, 2023 pm 05:25 PM

PHP オブジェクト指向プログラミングにおけるフライウェイト パターンの分析 オブジェクト指向プログラミングでは、デザイン パターンは一般的に使用されるソフトウェア設計手法であり、コードの可読性、保守性、スケーラビリティを向上させることができます。フライウェイト パターンは、オブジェクトを共有することでメモリのオーバーヘッドを削減する設計パターンの 1 つです。この記事では、PHP でフライウェイト モードを使用してプログラムのパフォーマンスを向上させる方法を説明します。フライ級モードとは何ですか?フライウェイト パターンは、異なるオブジェクト間で同じオブジェクトを共有することを目的とした構造設計パターンです。

PHP の高度な機能: オブジェクト指向プログラミングのベスト プラクティス PHP の高度な機能: オブジェクト指向プログラミングのベスト プラクティス Jun 05, 2024 pm 09:39 PM

PHP における OOP のベスト プラクティスには、命名規則、インターフェイスと抽象クラス、継承とポリモーフィズム、依存関係の注入が含まれます。実際のケースには、ウェアハウス モードを使用してデータを管理する場合や、ストラテジー モードを使用して並べ替えを実装する場合などがあります。

Go言語のオブジェクト指向機能の分析 Go言語のオブジェクト指向機能の分析 Apr 04, 2024 am 11:18 AM

Go 言語は、オブジェクト指向プログラミング、構造体によるオブジェクトの定義、ポインター レシーバーを使用したメソッドの定義、インターフェイスによるポリモーフィズムの実装をサポートしています。オブジェクト指向の機能は、Go 言語でのコードの再利用、保守性、カプセル化を提供しますが、クラスや継承、メソッド シグネチャ キャストといった従来の概念が欠如しているなどの制限もあります。

Golang にはクラスのようなオブジェクト指向機能はありますか? Golang にはクラスのようなオブジェクト指向機能はありますか? Mar 19, 2024 pm 02:51 PM

Golang (Go 言語) には伝統的な意味でのクラスの概念はありませんが、構造体と呼ばれるデータ型が提供され、これによってクラスと同様のオブジェクト指向機能を実現できます。この記事では、構造体を使用してオブジェクト指向機能を実装する方法を説明し、具体的なコード例を示します。構造体の定義と使用法 まず、構造体の定義と使用法を見てみましょう。 Golang では、type キーワードを通じて構造を定義し、必要に応じて使用できます。構造には属性を含めることができます

Python の「enumerate()」関数の目的は何ですか? Python の「enumerate()」関数の目的は何ですか? Sep 01, 2023 am 11:29 AM

この記事では、Python の enumerate() 関数と「enumerate()」関数の目的について学びます。 enumerate() 関数とは何ですか? Python の enumerate() 関数は、データ コレクションをパラメータとして受け取り、列挙オブジェクトを返します。列挙オブジェクトはキーと値のペアとして返されます。キーは各項目に対応するインデックス、値は項目です。構文 enumerate(iterable,start) パラメータ iterable - 渡されたデータ コレクションは、iterablestart と呼ばれる列挙オブジェクトとして返すことができます。 - 名前が示すように、列挙オブジェクトの開始インデックスは start によって定義されます。無視したら

See all articles