JavaScript オブジェクト指向 -- メソッド

高洛峰
リリース: 2017-01-04 09:41:52
オリジナル
1177 人が閲覧しました

JavaScript のオブジェクト指向は近年人気の概念ですが、私の知識が限られているため、多くの Web プロジェクトを実行し、インターネット上で難解な資料やチュートリアルをたくさん読みましたが、その難解な内容についてはまだ少し理解しています。少し前に読んだこの本について、ようやく自分なりの理解ができたので、今日はそれを披露します。間違っていると思うなら、直接批判してください。自分。

まず、以下のことを簡単に理解しましょう。

関数 fn(){} や var fn=function(){} などを JS コードで書くと、配列はもちろんオブジェクトとしても理解できます。

オブジェクト指向を理解する前に、まず次のことを理解しましょう。

1. オブジェクトのメソッドの呼び出し

jsの最外層に書かれた関数は、windowオブジェクトのメソッドとしても理解できます。定義された変数は、ウィンドウ オブジェクトのプロパティと呼ぶこともできます。例:

var test=function(){
alert("123")
}
当然上面的你也可以这样定义
function test(){
alert("123")
}
ログイン後にコピー

window オブジェクトのメソッドとして、次のように呼び出すことができます

test()//警告ボックス 123 をポップアップします (window オブジェクトはトップレベルのオブジェクトであるため、省略できます)
window.test()//警告ボックス 123 をポップアップします
window['test']()//警告ボックス 123 をポップアップします。Test は、window 配列オブジェクトの下のメソッド値として理解できます。

上記の例を通じて、オブジェクトのメソッドの使用方法と呼び出し方法を大まかに理解できます。

2. プライベート メソッド

プライベート メソッドは、オブジェクトの内部スコープ内でのみ使用できるメソッドです。これは変数のスコープの観点から理解できます。
上記の例の関数は、window オブジェクトのプライベート メソッドとして理解できます。以下の例を続けてください。

var pet=function(){
 function showpet(){
 alert("123")
 }
 showpet();//私有方法可以在函数作用域范围内使用。
 var temp="私有变量只有在函数或者对象作用域范围内能访问"
}
showpet();//会出错
pet.showpet()//还是不能这样调用
var Penguin=new pet() //实例化一个pet对象
Penguin.showpet()//不好意思这样子还是不能让你调用。
ログイン後にコピー

定義したいメソッドがオブジェクトのスコープ外で呼び出せる場合はどうすればよいですか?プライベート メソッドを使用するにはどうすればよいですか?次の部分を見てみましょう。

3. 静的メソッド

上記の質問を踏まえて、上記の例を続けてみましょう。

var pet=function(){
 function showpet(){//私有方法
 alert("123")
 }
 showpet();//私有方法可以在函数作用域范围内使用。
}
pet.show=function(){//给pet对象添加一个静态方法。
alert("456")
}
pet.name="Penguin"//给pet对象添加一个静态属性。
pet.show()//弹出警告框456
alert(pet.name)//弹出警告框Penguin
//继续思维碰撞
=====================
var Penguin=new pet() //实例化一个pet对象
Penguin.show()//不好意思,这个静态方法好像没有被实例继承。有这种思路值得表扬啊,加油!
ログイン後にコピー

もちろん、あなたは静的メソッドが何であるかを示しています。実際、私も初心者なので、理解できません。オブジェクトの静的メソッドの書き方とそれを呼び出す方法を知っているでしょう。いつか、あなたは突然理解し、私に教えに来るでしょう。上記の質問を踏まえて、インスタンス化されたオブジェクトによって呼び出すことができるメソッドを見てみましょう。

4. パブリック メソッド

パブリック メソッドは、通常、オブジェクトのプロトタイプを変更すると、そのプロトタイプの変更を継承します (この文は非常に大げさです)。漠然とした感じなので無視してください)。

オブジェクトのプロトタイプ メソッドを変更するには、上記の例を続けます。

pet.prototype.setname=function(str){//通过修改原型添加一个公有方法,用于添加修改实例对象的name
name=str;
}
ログイン後にコピー

例を見てください:

var pet=function(){
 function showname(){//私有方法
 alert(this.name)
 }
 this.show=function(){ //如果这里不理解,请注意这个方法下面就要介绍了。
 showname();
 }
}
pet.prototype.setname=function(str){
name=str;
}
var Penguin=new pet()
 Penguin.setname("Penguin");//添加实例的name值为Penguin
 Penguin.show();   //弹出Penguin
 Penguin.setname("wind");//添加实例的name值为wind
 Penguin.show();   //弹出wind
ログイン後にコピー

コードを実行して試してみましょう。

<script>
var pet=function(){
 name:"123",
 function showname(){//私有方法
 alert(this.name)
 }
 this.show=function(){
 showname();
 }
 }
pet.prototype.setname=function(str){
 name=str;
}
 var Penguin=new pet()
 Penguin.setname("Penguin");
Penguin.show();
Penguin.setname("wind");
Penguin.show();
</script>
ログイン後にコピー

5. 特権メソッド (オブジェクトまたは関数の外部インターフェイス)

実際、このメソッドは上記の例ですでに使用されています。このメソッドは、インスタンス化されたオブジェクトの継承によって呼び出すことができます。コンストラクター内の thsi キーワードを介してメソッドを定義します。特権メソッドはコンストラクターの外部でパブリックにアクセスでき (インスタンス化されたオブジェクトに限定されます)、プライベート メンバーやメソッドにもアクセスできるため、特権関数を通じてプライベート メソッドへのパブリック メソッド アクセスを制御できます。 JS フレームワーク拡張機能には多くのアプリケーションがあります。

読者は、上記が P の段落であると考えることができます。特権メソッドを定義する方法、特権メソッドを参照する方法を見て、引き続き上記の例を呼び出して見てみましょう。

var pet=function(){
 function showname(){//私有方法
 alert(this.name)
 }
 this.show=function(){//通过使用this关键字定义一个特权方法。
 showname();  //在特权方法中访问私有方法;
 }
}
pet.prototype.setname=function(str){
name=str;
}
var Penguin=new pet();//实例化一个pet对象
 Penguin.setname("Penguin");//调用公有方法修改
 Penguin.show();   //调用特权方法访问私有方法,弹出name
ログイン後にコピー

まず、コンストラクターで this.fn=function(){} を使用して特権メソッドを作成します。特権関数でプライベート メソッドにアクセスする

インスタンス化されたオブジェクトは、特権関数にアクセスすることによって、いくつかのプライベート メソッドを使用できます。特権関数にアクセスする方法は、パブリック関数にアクセスする場合と同じです。

最初のパートはここまでです。次のパートでは、例を使用してオブジェクト指向がどのようにインストールされるかを説明します。

以上がこの記事の全内容です。興味のある方は「JavaScript オブジェクト指向 - カプセル化」を読んでみてください。PHP 中国語 Web サイトをよろしくお願いします。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート