Javascriptで関数内のプロパティを呼び出す

Question

Javascriptでのプロパティのアクセスについて、非常に簡単な質問があります。これまで最も簡単なものになるはずですが、これが動作しない理由を私は理解カント：

私はオブジェクトがあります。

var myObj = { 
    first: "First text", 
    second: "Second text", 
    third: "Third text" 
}; 

をそして、私は最初のプロパティを呼び出したい：

console.log(myObj.first); // First text 

すべて大丈夫。しかし、私は、関数からこのプロパティを呼び出すと、また新しい価値"Fourth text"で新しいプロパティ"Fourth"を割り当てたい：あなたが見ることができるように

function myFunction(myObj){ 
    console.log(this.first); // [object Object] undefined 
    this.fourth = "Fourth text"; 
} 
myFunction(myObj); 
console.log(myObj.fourth); // undefined 

、最後の2つの呼び出しが未定義になります。なぜ私は理解できないのですか？任意のヘルプは非常に高く評価されます:)

Answer 1

myObjをあなたの関数に渡しますが、thisとして使用しました。 this.firstの代わりにfunction：myObj.firstのパラメータを使用します。

var myObj = { 
 
    first: "First text", 
 
    second: "Second text", 
 
    third: "Third text" 
 
}; 
 

 
function myFunction(myObj){ 
 
    console.log(myObj.first); 
 
    myObj.fourth = "Fourth text"; 
 
} 
 

 
myFunction(myObj); 
 
console.log(myObj.fourth);

それとも、thisを使用してアクセスする場合は、あなたがあなたのmyObjにコンテキストをバインドする必要があります。たとえばcallと、最初の引数として、あなたのオブジェクトを渡します。関数内のthisは、渡されたオブジェクトを参照します。あなたがオブジェクトにアクセスする必要が

var myObj = { 
 
     first: "First text", 
 
     second: "Second text", 
 
     third: "Third text" 
 
    }; 
 

 
function myFunction(){ 
 
    console.log(this.first); 
 
    this.fourth = "Fourth text"; 
 
} 
 

 
myFunction.call(myObj); 
 
console.log(myObj.fourth);

Answer 2

。

myObj.first 
^^^^^ 

function myFunction(myObj){ 
 
    console.log(myObj.first); 
 
    myObj.fourth = "Fourth text"; 
 
} 
 

 
var myObj = { 
 
    first: "First text", 
 
    second: "Second text", 
 
    third: "Third text" 
 
}; 
 

 
myFunction(myObj); 
 

 
console.log(myObj.fourth);

すでにmentioneを持っているとして、あなたは結果

function myFunction() { 
 
    console.log(this.first); 
 
    this.fourth = "Fourth text"; 
 
} 
 

 
var myObj = { 
 
    first: "First text", 
 
    second: "Second text", 
 
    third: "Third text" 
 
}; 
 

 
myFunction.bind(myObj)(); 
 

 
console.log(myObj.fourth);

のために呼ばれるためにある新しい関数を生成する関数、にオブジェクトをバインドすることができ

Answer 3

関数内myObjを使用して、関数のthis

var myObj = { 
 
    first: "First text", 
 
    second: "Second text", 
 
    third: "Third text" 
 
}; 
 

 
//use myObj as this of function 
 
function myFunction(){ 
 
    console.log(this.first); // "First text" 
 
    this.fourth = "Fourth text"; 
 
} 
 
myFunction.call(myObj); 
 
console.log(myObj.fourth); // "Fourth text"

としてmyObjを使用して

var myObj = { 
 
    first: "First text", 
 
    second: "Second text", 
 
    third: "Third text" 
 
}; 
 

 
//use myObj inside a function 
 
function myFunction(myObj){ 
 
    console.log(myObj.first); // "First text" 
 
    myObj.fourth = "Fourth text"; 
 
} 
 
myFunction(myObj); 
 
console.log(myObj.fourth); // "Fourth text"

Answer 4

あなたの問題は、 "この" withiの使用方法はあなたの機能。 （この詳細についてはJavaScriptでhttps://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this）

あなたの機能はあなたのオブジェクトの一部ではありません。私はあなたがすでにあなたのオブジェクトをパラメータとして与えているのを見ますが、決してそれを使用しません。 「this」の代わりに、パラメータを使用する必要があります。

var myObj = { 
    first: "First text", 
    second: "Second text", 
    third: "Third text" 
} 


    function myFunction(myObj){ 
    console.log(myObj.first); 
    myObj.fourth = "Fourth text"; 
    } 


myFunction(myObj); 
console.log(myObj.fourth); 

あなたは「これは」、あなたはそれを行うことができます使用したい場合：

var myObj = { 
    first: "First text", 
    second: "Second text", 
    third: "Third text", 
    myFunction: function(){ 
    console.log(this.first); 
    this.fourth = "Fourth text"; 
    } 
} 

myObj.myFunction(); 
console.log(myObj.fourth);