ホームページ ウェブフロントエンド jsチュートリアル JavaScriptオブジェクト指向プログラミング関数はメソッド(関数)_jsオブジェクト指向

JavaScriptオブジェクト指向プログラミング関数はメソッド(関数)_jsオブジェクト指向

May 16, 2016 pm 06:46 PM
function オブジェクト指向

好程序不是写给computer的,而是写给human的。遇到复杂功能,应该想着把它简化、组件化,把小功能封装成小组件,小功能块可以任意的组合得到千变万化的复杂功能。function就可以帮助我们把功能进行封装。那什么是封装呢。要我说,只要把具体实现给打包,对外提供调用接口那就是封装,方法也好、类也好就做了这些事。

      javascript中的function可以用来创建方法、也可以用来创建类,实际上我们可以认为是用function来模拟出的类(说到类一般都会要去了解闭包的知识)。还是先看一下方法吧。

       javascript函数分为有名函数、匿名函数和在匿名函数基础上延伸出来的立即执行函数。

       普通函数就是用function直接声明的有名函数。

    <SPAN class=kwrd>function</SPAN> Hello() {
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
      alert(<SPAN class=str>"hello , everybody!"</SPAN>);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    Hello();
ログイン後にコピー
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    <SPAN class=kwrd>function</SPAN> SayHelloTo(somebody) {
ログイン後にコピー
      alert(<SPAN class=str>"hello , "</SPAN> + somebody + <SPAN class=str>"!"</SPAN>);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    SayHelloTo(<SPAN class=str>"张三"</SPAN>);
ログイン後にコピー

上面分别创建了Hello和SayHelloTo方法。Hello不带有参数,直接通过Hello()来完成调用。SayHelloTo方法带有一个参数,向谁问候时需要知道是在问候谁。在调用SayHelloTo(“张三”)时要传入参数。这些代码和java、C#都没有什么太大区别。在方法重载上却有较大改变,javascript本身并不支持什么重载,一个方法名就对应一个方法。如果强制的写出多个同名方法,其实会出现先写的方法被覆盖掉的情况。

    <SPAN class=kwrd>function</SPAN> Hello() {
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
      alert(<SPAN class=str>"hello , everybody!"</SPAN>);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    Hello();
ログイン後にコピー
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    <SPAN class=kwrd>function</SPAN> Hello(somebody) {
ログイン後にコピー
      alert(<SPAN class=str>"hello , "</SPAN> + somebody + <SPAN class=str>"!"</SPAN>);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    Hello(<SPAN class=str>"张三"</SPAN>);
ログイン後にコピー
ログイン後にコピー

imageimage

第一个Hello方法被覆盖掉,执行时直接调用Hello()则认为调用第二个Hello方法但没有传递参数值,所以弹出了undefined信息。调用Hello(“张三”)时很正常的完成执行。其实javascript也可以用一些直白的方式来完成重载。学过C#的人都会知道有个params关键字,通过它可以实现向方法传递不定个数的参数。我们可以通过对参数的信息做手动的判断也可以模拟出类似重载的效果。而在javascript中根本就不需要什么params关键字,就可以很自然的实现任意个数参数的传递。function中有个arguments属性,可以把它看成一个数组,它按传递进来的参数的顺序来保存所有的参数。也就是说我们在定义方法时可以不声明参数名。

    <SPAN class=kwrd>function</SPAN> ShowArguments() {
ログイン後にコピー
      <SPAN class=kwrd>var</SPAN> args = <SPAN class=str>""</SPAN>;
ログイン後にコピー
      <SPAN class=kwrd>for</SPAN> (<SPAN class=kwrd>var</SPAN> i = 0; i < arguments.length; i++) {
ログイン後にコピー
        args += arguments[i] + <SPAN class=str>","</SPAN>;
ログイン後にコピー
      };
ログイン後にコピー
ログイン後にコピー
      alert(args.substr(0, args.length - 1));
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    ShowArguments(1, 2, 3, 4, 5, 6, 7);
ログイン後にコピー

image
试着用argements来模拟一下重载。

    <SPAN class=kwrd>function</SPAN> Hello() {
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
      <SPAN class=kwrd>if</SPAN> (arguments.length == 0) {
ログイン後にコピー
        alert(<SPAN class=str>"hello , everybody!"</SPAN>);
ログイン後にコピー
      }
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
      <SPAN class=kwrd>else</SPAN> {
ログイン後にコピー
        alert(<SPAN class=str>"hello , "</SPAN> + arguments[0] + <SPAN class=str>"!"</SPAN>);
ログイン後にコピー
      };
ログイン後にコピー
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    Hello();
ログイン後にコピー
    Hello(<SPAN class=str>"张三"</SPAN>);
ログイン後にコピー
ログイン後にコピー

基于参数个数不同的重载。

    <SPAN class=kwrd>function</SPAN> Increase(arg) {
ログイン後にコピー
      <SPAN class=kwrd>if</SPAN> (<SPAN class=kwrd>typeof</SPAN> arg == <SPAN class=str>"undefined"</SPAN>) {
ログイン後にコピー
        alert(<SPAN class=str>"请输入参数"</SPAN>);
ログイン後にコピー
      }
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
      <SPAN class=kwrd>if</SPAN> (<SPAN class=kwrd>typeof</SPAN> arg == <SPAN class=str>"string"</SPAN>) {
ログイン後にコピー
        alert(String.fromCharCode(arg.charCodeAt(0) + 1));
ログイン後にコピー
      }
ログイン後にコピー
      <SPAN class=kwrd>if</SPAN> (<SPAN class=kwrd>typeof</SPAN> arg == <SPAN class=str>"number"</SPAN>) {
ログイン後にコピー
        alert(arg + 1);
ログイン後にコピー
      }
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    Increase();
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    Increase(<SPAN class=str>"a"</SPAN>);
ログイン後にコピー
    Increase(1);
ログイン後にコピー
基于参数类型不同的重载。

函数除了有名函数之外也可以是匿名函数,匿名函数就是没有名子的函数,不论函数有名还是没有名子,都是一个完整的函数对象。匿名函数还是用function来声明,但不用为它指定名称。其它的方面,比如参数等等和有名函数没什么区别。

    <SPAN class=kwrd>function</SPAN>() {
ログイン後にコピー
      ……
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

匿名函数一般可以满足临时的函数需求,不需要有变量对其进行引用(有名的函数可以认为是有变量引用的函数)。比如需要一个函数做为值对象做为参数传入方法、需要编程的方式为对象添加事件,用匿名函数都可以很好的完成。当然你也可以单独声明变量来引用某个匿名函数对象,这和普通有名函数就没什么区别了。

    <SPAN class=kwrd>function</SPAN> Each(array, fun) {
ログイン後にコピー
      <SPAN class=kwrd>for</SPAN> (<SPAN class=kwrd>var</SPAN> i = 0; i < array.length; i++) {
ログイン後にコピー
        fun(array[i]);
ログイン後にコピー
      };
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    <SPAN class=kwrd>var</SPAN> nums = [1, 2, 3, 4, 5, 6, 7];
ログイン後にコピー
    Each(nums, <SPAN class=kwrd>function</SPAN>(arg) {
ログイン後にコピー
      alert(arg);
ログイン後にコピー
    });
ログイン後にコピー

上面代码执行,依次输出数组中的元素。

    <SPAN class=rem>//在窗体加载时,在标题上显示当前时间</SPAN>
ログイン後にコピー
    window.onload = <SPAN class=kwrd>function</SPAN>() {
ログイン後にコピー
      document.title = <SPAN class=kwrd>new</SPAN> Date().toString();
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    <SPAN class=rem>//也可以将匿名方法传入定时器中</SPAN>
ログイン後にコピー
    setInterval(<SPAN class=kwrd>function</SPAN>() {
ログイン後にコピー
      document.title = <SPAN class=kwrd>new</SPAN> Date().toString();
ログイン後にコピー
    }, 1000);
ログイン後にコピー

使用匿名函数绑定事件和进行定时操作。

    <SPAN class=kwrd>var</SPAN> Hello = <SPAN class=kwrd>function</SPAN>() {
ログイン後にコピー
      alert(<SPAN class=str>"hello , everybody!"</SPAN>);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

如果将匿名函数赋给变量,那和有名的普通函数就没区别了。但不管是变量引用还是普通地有名函数,这样的函数在内存上都持久的占有一定资源。有时候我们只想执行一次大不必使用有引用的函数,直接执行匿名函数可能是最好的选择。把匿名函数包起来,加个括号执行,一切ok,这就是由匿名函数延伸出来的立即执行函数。

    (<SPAN class=kwrd>function</SPAN>() {
ログイン後にコピー
      alert(<SPAN class=str>"hello , everybody!"</SPAN>);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    })();
ログイン後にコピー
 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    (<SPAN class=kwrd>function</SPAN>(somebody) {
ログイン後にコピー
      alert(<SPAN class=str>"hello , "</SPAN> + somebody + <SPAN class=str>"!"</SPAN>);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    })(<SPAN class=str>"张三"</SPAN>);
ログイン後にコピー

立即执行函数在做事件绑定,设置回调函数等方面往往会有意想不到的效果,可以解决诸如对象引用等问题。

    <SPAN class=kwrd>var</SPAN> student = {
ログイン後にコピー
      Name: <SPAN class=str>"张三"</SPAN>,
ログイン後にコピー
      Age: 20,
ログイン後にコピー
      Introduce: <SPAN class=kwrd>function</SPAN>() {
ログイン後にコピー
        alert(<SPAN class=str>"我叫"</SPAN> + <SPAN class=kwrd>this</SPAN>.Name + <SPAN class=str>",今年"</SPAN> + <SPAN class=kwrd>this</SPAN>.Age + <SPAN class=str>"岁了!"</SPAN>);
ログイン後にコピー
      } };
ログイン後にコピー
    window.onload = (<SPAN class=kwrd>function</SPAN>(obj) { <SPAN class=kwrd>return</SPAN> <SPAN class=kwrd>function</SPAN>() { obj.Introduce(); }; })(student);
ログイン後にコピー

因为javascript中函数的这些特点加之它的对象的特征,我们还可以写出一些有functional意味的程序出来。其实javascript中function真的是老大。

    <SPAN class=kwrd>function</SPAN> Sum(fun, x) {
ログイン後にコピー
      <SPAN class=kwrd>if</SPAN> (x <= 0)
ログイン後にコピー
        <SPAN class=kwrd>return</SPAN> 0;
ログイン後にコピー
      <SPAN class=kwrd>return</SPAN> fun(x) + Sum(fun, x - 1);
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  
ログイン後にコピー
    alert(Sum(<SPAN class=kwrd>function</SPAN>(i) { <SPAN class=kwrd>return</SPAN> i * i; }, 100));
ログイン後にコピー

下面这又是什么呢?是方法吗?是类吗?

    <SPAN class=kwrd>function</SPAN> Point() {
ログイン後にコピー
      
ログイン後にコピー
    };
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

      先啰嗦到这,下次再看看类。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

PHP オブジェクト指向プログラミングにおけるフライウェイト パターンの分析 PHP オブジェクト指向プログラミングにおけるフライウェイト パターンの分析 Aug 14, 2023 pm 05:25 PM

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

Go でオブジェクト指向プログラミングを探索する Go でオブジェクト指向プログラミングを探索する Apr 04, 2024 am 10:39 AM

Go 言語は、型定義とメソッドの関連付けを通じてオブジェクト指向プログラミングをサポートします。従来の継承はサポートされていませんが、合成を通じて実装されます。インターフェイスは型間の一貫性を提供し、抽象メソッドを定義できるようにします。実際の事例では、顧客操作の作成、取得、更新、削除など、OOP を使用して顧客情報を管理する方法を示します。

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

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

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

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

C# 開発経験の共有: オブジェクト指向プログラミングと設計原則 C# 開発経験の共有: オブジェクト指向プログラミングと設計原則 Nov 22, 2023 am 08:18 AM

C# (CSharp) は、ソフトウェア開発の分野で広く使用されている強力で人気のあるオブジェクト指向プログラミング言語です。 C# 開発プロセスでは、オブジェクト指向プログラミング (OOP) の基本概念と設計原則を理解することが非常に重要です。オブジェクト指向プログラミングは、現実世界の物事をオブジェクトに抽象化し、オブジェクト間の対話を通じてシステム機能を実装するプログラミング パラダイムです。 C# では、クラスはオブジェクト指向プログラミングの基本的な構成要素であり、オブジェクトのプロパティと動作を定義するために使用されます。 C# を開発する場合、いくつかの重要な設計原則があります。

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

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

See all articles