JavaScriptにおけるthisの使い方及びcallの理解
5362 ワード
thisとは何ですか
thisはJavaScriptのキーワードの一つです.それは対象の方法に使われます.thisは常にこの方法を呼び出すオブジェクトを指します.
オブジェクトにthisを適用する方法
関数でthis
thisはコンストラクタにあります.
コールでオブジェクトに入る
コール中の着信関数
似たような例は次のようなものがあります.
thisはJavaScriptのキーワードの一つです.それは対象の方法に使われます.thisは常にこの方法を呼び出すオブジェクトを指します.
オブジェクトにthisを適用する方法
var obj = {
name : 'object',
sayName : function () {
alert(this.name);
}
};
obj.sayName(); // object
オブジェクトとして obj
呼び出し sayName
この方法は、this
指しているのは obj
.故に alert(this.name)
結果は object
.すなわち this
対象の方法に現れた場合、この方法を実行する場合 this
この対象自体を指す.関数でthis
var val='kk';
function hello(){
console.log('hello '+this.val);
}
var a={"val":"a","hello":hello},b={"val":"b","hello":hello};
hello();//hello kk
a.hello();//hello a
b.hello();//hello b
thisは、現在の関数を呼び出すオブジェクトを指しており、ウェブページのグローバルスコープで呼び出した場合、thisオブジェクトはwindowであることが分かります.thisはコンストラクタにあります.
var name = "global";
function Person () {
this.name = "someone";
}
var sam = new Person();
alert(sam.name); // someone
以上のコードは,構造関数において明確に示されている. this
の指向問題.コンストラクタの例を宣言すると、コンストラクタ内部の this
いずれも新しい実例を指す.ですから、実行しています var sam = new Person()
この文は、 this
方向を指す sam
ですので、この時は sam.name = "someone"
callとappyは何ですか?call
メソッドを適用 Function
オブジェクトcall方法は、関数のオブジェクトコンテキストを初期のコンテキストから、thisObjによって指定された新しいオブジェクトに変更することができる.thisObjパラメータが提供されていない場合、GlobalオブジェクトはthisObjとして使用される.applyとcallの両方は役割は同じですが、両者はパラメータに違いがあります.最初のパラメータの意味は同じですが、2番目のパラメータ:applyはパラメータ配列、つまり複数のパラメータを組み合わせて1つの配列にして入ってきます.callはcallのパラメータとして入ってきます.如き func.call(func1,var1,var2,var3)
appyはfunc.apply(func1,[var1,var2,var3])
と表記されています.コールでオブジェクトに入る
var sayName = function () {
alert(this.name);
}
var peter = {
name: "peter"
}
sayName.call(peter); //peter
上記の例は直観的に理解できます. call
仕事の原理.つまり、関数で呼び出すと call
この方法は、関数内部の this
オブジェクトは自動的に指します. call
メソッドの最初のパラメータです.上の例ではつまり peter
この相手です.だから実行しています sayName.call(peter)
を選択します. this.name
自動的に指します peter.name
.結果は peter
function Person1 () {
this.name = "person1";
this.sayName = function () {
alert(this.name);
}
}
function Person2 () {
this.name = "person2";
}
var sam = new Person2();
Person1.call(sam);
sam.sayName(); //person1
以上の例で、最も重要なのは Person1.call(sam)
このステップ.中で何があったのか見てみましょう.呼び出し時 call
この方法の場合、関数 Person1
内部の this
方向を指す sam
このオブジェクト.に相当する sam
このオブジェクトはこの2つの文を実行します.this.name = "person1";
this.sayName = function () {
alert(this.name)
}
ですので、ここで元を書き直しました. sam
オブジェクト内の name
を選択します.また新しい方法が得られた.成功的に呼び出すことができます. sam.sayName()
そして結果は戻ってきます person1
. コール中の着信関数
function class1 () {
this.message = "yeah";
}
function class2 () {
this.sayMessage = function () {
alert(this.message);
}
}
class2.call(class1);
alert(class1.sayMessage);
class1.sayMessage(); //undefined
上記の例では、私達は呼び出しました. class2
関数の call
方法が入ってきました class1
この関数.結果 class1
持っています sayMessage
この方法.この方法を直接呼び出して返したところ、 undefined
私たちが望むのではなく yeah
.これはなぜですか?この中の this
私たちは次のように修正します.var message = "hi";
function class1 () {
this.message = "yeah";
}
function class2 () {
this.message = "hello";
this.sayMessage = function () {
alert(this.message);
}
}
class2.call(class1);
alert(class1.sayMessage);
class1.sayMessage(); // hello
class1.message = "msg";
class1.sayMessage(); //msg
最初の呼び出し sayMessage
方法を返します hello
.もう一度見にきます. class2.call(class1)
この過程.この方法を実行すると、class1
獲得する class2
の message
属性と sayMessage
方法.だから今は class1.message = "hello"
, class1.sayMessage = function () {alert(this.message)}
.従って実行 sayMessage
を返します hello
.私たちが手動で修正するとき class1.message
を選択すると、この方法を呼び出して、私たちが修正した値を返します.これは私たちの上の推理が正しいことを証明しています.function class1 () {
this.message = "yeah";
}
function class2 () {
this.sayMessage = function () {
alert(this.message);
}
}
class2.call(class1);
alert(class1.sayMessage);
class1.sayMessage(); //undefined
この例には定義がありません. class1.message
この属性です.だから実行します sayMessage
メソッドの場合、未定義に戻ります.紛らわしいところがあります. class1
で定義されている this.message
わけではない class1.message
.ではなく class1
の実例はこれを持っています. message
を選択します似たような例は次のようなものがあります.
function Class1(){
this.showTxt = function(){alert(this.name)}
}
function Class2(){
this.name = 'class2';
}
var class1 = new Class1();
class1.showTxt.call(Class2);//undefined
alert(Class2.showTxt);//undefined