0

重複の可能性:
JavaScript の「this」キーワード

パラメータ firstName、lastName、email、telephone を持つ add という関数を作成しました。この新しい関数の意図は、ボブとメアリーのような新しい連絡先オブジェクトを作成することです。

this私の質問は、キーワードの文脈と使用に関するものです。this新しく作成されたオブジェクトのプロパティ値を、渡された適切な追加関数パラメーターに設定thisできるようにします。コード内で何ができるようになるとしたら、その目的は何ですか?また、この一言で何ができるでしょうか? 複数のオブジェクトを作成できるように、関数パラメーターを介して任意の文字列を渡すことができる機能を有効にすることですか?

私はthis最近、このキーワードを使用して、オブジェクトごとに個別の関数を作成することなく、複数のオブジェクトで同じ関数を使用できるようにしました。たとえば、オブジェクトごとに個別の age 変更関数ではなく、すべてのオブジェクトの age プロパティを設定できる関数です。

次に、データが連絡先配列の適切な位置に挿入される方法についての私の理解が正しいかどうかを確認したかったのです。最後に、ここで this キーワードのコンテキストについてお尋ねしてもよろしいですか?

contacts[contacts.length] = this;

これは次と同じです:

contacts[2] = this;

私の質問を最も簡潔な方法で表現していない場合は、お詫び申し上げます。以下の私のコードを見つけてください。thisこのコーディング状況のキーワードの回答または説明は、非常に高く評価されます。

var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777 - 7777",
    email: "bob.jones@example.com"
};

var mary = {
    firstName: "Mary",
    lastName: "Johnson",  
    phoneNumber: "(650) 888 - 8888",
    email: "mary.johnson@example.com"
};

var contacts = [bob, mary];

    function add(firstName, lastName, email, telephone){
    this.firstName = firstName; 
    this.lastName = lastName;
    this.email = email;
    this.telephone = telephone;
    contacts[contacts.length] = this
    }

    var response1 = prompt("First Name?");
    var response2 = prompt("Last Name?");
    var response3 = prompt("Email?");
    var response4 = prompt("Telephone No.?");
    add(response1, response2, response3, response4);
4

3 に答える 3

0

this in your add function actually refers to the global window object, so you are adding that to your array instead of a new contact.

You need to create a new object inside that function and add that to the array:

function add(firstName, lastName, email, telephone){
    var newContact = {
        firstName: firstName,
        lastName: lastName,
        email: email,
        telephone: telephone
    }
    contacts[contacts.length] = newContact;
}

Here is a good reference for this - http://bonsaiden.github.com/JavaScript-Garden/#function.this

If you really want to use this, you can specify what this refers to by calling the function using call or apply:

add.call({}, response1, response2, response3, response4); // pass new object as this
add.apply({}, [response1, response2, response3, response4]); // pass new object as this
于 2012-08-24T10:05:56.183 に答える
0

thisキーワードは、実用的な目的を果たすことがあります。

  • の場合SOMETHING.add(response1, response2, response3, response4)、thisになりますSOMETHING。

  • SOMETHING = new add(response1, response2, response3, response4)の場合、this新しく作成されたオブジェクトになりますSOMETHING。

ただし、add() をメソッドとしてではなく関数として呼び出すthisと、グローバル (ウィンドウ) オブジェクトになります。したがって、4 つのグローバル変数 (firstName、lastName、email、および telephone) を作成するだけで、その後配列にエントリを追加するたびに上書きされます。コードが最近の JavaScript インタープリターのオプトイン「ES5 厳密モード」で実行された場合、add() 関数の最初の行で実行時エラーが発生することに注意してください。

(さらに読みたい場合は、「this」キーワードはどのように機能しますか?を参照してください。)

あなたの場合、私は避けthis、代わりに明示的に新しいオブジェクトを作成します。

function add(firstName, lastName, email, telephone){
    var obj = {
        firstName: firstName,
        lastName: lastName,
        email: email,
        telephone: telephone
    };
    contacts[contacts.length] = obj;
}

についてcontacts[contacts.length] = obj;は、代替手段として を使用しますcontacts.push(obj);。ただし、この方法はまったく問題なく、実際にはパフォーマンスがわずかに向上する可能性があります。好きな方を選んでください。

于 2012-08-24T10:12:50.513 に答える
0

thisスコープとコンテキストがすべてです。それが使用されるより広い文脈を指します。

次に例を示します。

function MyObject(one,two) {
this.one = one;
this.two = two;
}

Myobject.prototype.SayNumbers() {
alert(this.one + this.two);
}

var myobj = new MyObject("Foo","Bar");
myobj.Saynumbers();

上記の例のコンテキストではthis、「myobj」オブジェクト内で使用された関数に「属しています」。これにより、オブジェクトのプロパティにアクセスして警告することができます。

thisグローバル スコープで (つまり、関数/オブジェクト内ではなく) キーワードを使用した場合、window オブジェクトを参照します。

this参照によって渡すこともできます。これは、イベント ハンドラーに役立ちます。onclick イベントの場合this、イベント処理関数にパススルーして、クリックされたオブジェクトを操作できます。

実験して少し調べてみてください - このサイトにはいくつかの良い例があります: http://www.quirksmode.org/js/this.html

于 2012-08-24T10:07:44.937 に答える