var objB = new ClassB("objB の色","objB の名前");
objB.sayColor();
objB は ClassB のインスタンスです。objB はどのようにして color 属性とsayColor メソッドを持っていますか?
まずインスタンス化コードを見てみましょう:
var objB = new ClassB("color of objB","name of objB");
ここで ClassB はクラスです。もちろん、ClassB では、これはオブジェクト objB を参照します。
ClassB では、コードの最初の 3 行で ClassA が使用され、ClassA はクラスではなく関数とみなされます。
ClassA 関数を直接呼び出すと、明らかに ClassA の this は window オブジェクトを参照するため、最初に ClassA を objB の newMethod 属性 (this.newMethod = ClassA) にコピーします。
次に、 this.newMethod を呼び出します。 これは、このメソッドの所有者が明らかに this になっており、 ClassB の this は現在 objB を参照しているため、この時点では ClassA にあります (これはコピーされているため、厳密には newMethod にあります)。すでに ClassA に 2 つのメソッドがあります) これは objB を参照します。このようにして、newMethod の呼び出しを通じて、color 属性と SayColor メソッドが objB に割り当てられます。 call メソッドと apply メソッドを使用して継承を実装するのは実際には原則であり、call および apply はメソッドの所有者を変更するメソッドとみなすことができ、ここでの ClassB の最初の 3 行のコードがこの役割を果たします。
4.prototype1.6 の Class.create
prototype1.6 の Class.create メソッドはおおよそ次のとおりです:
var Class = {
create: function() {
//
function klass() {
this.initialize.apply(this, argument);
}
//
for (var i = 0; i
klass.addMethods(properties[i])
return
}
}; > 使用中 次のようになります:
コードをコピー
},
say:function(message){
alert(this.name " :" message);
var aperson = new Person("name1");
person は、実際には Class.create メソッドによって返される klass (klass は Class.create のローカル変数、関数) であり、Class.create (initialize メソッドと Say メソッド) によって渡されるパラメータです。 ) がメソッドのプロパティ配列の作成に渡され、addMethods メソッドを通じて klass プロトタイプにこれらのメソッドを持たせます。したがって、最も重要な点であり、理解するのが最も難しいのは、「klass の this が正確に何を指すのか」ということです。よく考えてみれば、その答えを得るのは難しくありません。実際には person は klass であり、person オブジェクトをインスタンス化するときは、次の new キーワードを使用します:
var aperson = new Person("name1") ) ;
これは
var aperson = new klass("name1");
からは簡単にアクセスできます。この方法で問題を説明すると、klass は単純な関数ではなくクラスです (new キーワードが使用されているため、そう考えられます)。klass の this は宣言されたインスタンスを指します。ここでは aperson で、aperson は klass のプロトタイプを渡します。新しいプロセス中に、klass 内のコードも実行されるため、initialize はインスタンス化、つまりコンストラクターのときに実行されます。 (klass のこれは両方とも aperson を参照します。なぜ apply を通じて一度呼び出す必要があるのですか? これは主にコンストラクターのパラメーターを渡すためです。 apply メソッドを使用すると、配列を介して初期化するために無限の数のパラメーターを簡単に渡すことができます。 .メソッド。)
5. さらにいくつかの例を分析します。
1. 次のように実行します。 🎜>
コードをコピーします
コードは次のとおりです:
function innerFoo(){
this.Name = '外部名';
表示される結果は「内部名、外部名」です。
OuterFoo は関数 (クラスではありません) であり、最初の文は
this.Name = 'Outer Name'; in
は window オブジェクトを参照しているため、OuterFoo() の後 window.Name = 'Outer Name';
を返し、この時点では InnerFoo も関数です (クラスではありません)。 )、InnerFoo を実行するとき、これは window も参照するため、InnerFoo の this.Name の値は「Outer Name」になります (window.Name は転送ステーションとして機能し、OuterFoo が値「Outer Name」を InnerFoo に渡すことができます)。 Name の値はローカル変数 "Inner Name" です
2. 次のコードを実行します
function JSClass(){
this.m_Text = '分割要素';
this.m_Element = document .createElement( 'DIV');
this.m_Element.innerHTML = this.m_Text;
if(this.m_Element.attachEvent)
this.m_Element.attachEvent('onclick', this. ToString);
else if(this.m_Element.addEventListener)
this.m_Element.addEventListener('click', this.ToString,false);
else
this.m_Element.onclick = this。 ToString;
}
JSClass.prototype.Render = function(){
document.body.appendChild(this.m_Element);
JSClass.prototype。 ToString = function (){
alert(this.m_Text);
alert(this == window)
}
window.onload = function(){
var jc = new JSClass ();
jc.ToString();
}
「分割要素」をクリックすると、「未定義」と表示されます。 IE でも必須です。 「true」が表示され、他のブラウザでも「false」が表示されます。
要素のクリック イベントはインスタンス メソッドにバインドされているため、addEventListener を通じてバインドされたメソッドがコピーされるため、これは HTML 要素を指します。この要素には m_Text 属性がないため (m_Text 属性は JSClass のインスタンス、つまり jc に属します)、この要素をクリックすると、attachEvent にバインドされたイベントが関数をグローバル ワールドにコピーします。要素をクリックすると、これはウィンドウ オブジェクトを指します。また、「未定義」と表示されます。 jc.ToString()メソッドが呼び出された場合のみ、jcオブジェクトを参照します。jcはm_Textを所有しているため、「分割要素」を表示できます。
6. 概要
コード環境で this が指すオブジェクトを素早く見つけるにはどうすればよいでしょうか?次の 3 つの点に注意してください。
1. 関数の各ステップがコピーなのか参照 (呼び出し) なのかを明確に知る必要があります。
2. 誰が実行しているのかを明確に知る必要があります。関数の所有者は
3. 関数の場合、それを関数として使用しているかクラスとして使用しているかを判断する必要があります
補足:
1 で関数を直接定義できます。インスタンスとクラスの両方
2. プロトタイプを使用してインスタンスの関数を定義することはできません。クラスで直接定義された関数は、これを使用してオブジェクトのプロパティにアクセスすることはできません。
4. クラスのプロトタイプ上で作成された関数はこれを使用でき、クラス内で定義された関数はこれを使用でき、オブジェクト インスタンスで作成された関数はこれを使用できます。
{
document.write(msg "
");
}
function Say()
{
this.f="props";
this.func3=function(){alert("f3," this.f) ;}
}
say .func1=function(){alert("func1," this.f);}; //エラー、クラスで直接定義された関数はこの
say.prototype では使用できません.func2=function(){alert(" func2," this.f);}
say.func1();
(新しいsay()).func2(); ; //エラー、プロトタイプ関数で定義されています。
say.func3() を呼び出す前にオブジェクトをインスタンス化する必要があります。 //エラー、
(new Say()) を呼び出す前に、クラスで定義された関数をインスタンス化する必要があります。 .func3();
var obj={
fld1:10,
func1:function(msg){alert(msg);},
func4:function(){alert(this.fld1) );}
}
obj.prototype.func=function(){alert("func");}; //エラー プロトタイプはインスタンス オブジェクトのオブジェクトの定義に使用できません
obj.func2=function (){alert("func2, this .fld1);}; //OK、インスタンス上で直接定義された関数はこれを使用してオブジェクト
alert(obj.fld1);
obj のプロパティにアクセスできます。 .func1("func1");
obj .func2();
Javascript this usage summary
http://www.jb51.net/article/16863.htm
JavaScript this in-depth understanding
http://www.jb51.net/article/19425.htm
JAVASCRIPT THIS detailed explanation object-oriented
http://www.jb51.net/article/17584.htm
Javascript this pointer
http://www.jb51.net/article/19434.htm
Detailed explanation of how to use this keyword in JavaScript
http://www.jb51.net/article/7954.htm
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
