JS関数this_javascriptスキルの使用例分析

この記事の例では、JS 関数 this の使用方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは、js で関数を記述するときによく使用されます。これは正確には何ですか? これは、コンテキストとも呼ばれる、実行環境のスコープを指すポインターです。
まず関数について話しましょう。私の個人的な理解では、関数は言語内で繰り返し呼び出されるコード ブロックです。
JSでは、オブジェクトのプロパティに関数を代入するとき、メソッド
と呼ばれます。 例:

var m={};
m.title='title';
m.show=function(){
alert(this.title)
}
m.show()

オブジェクト m のメソッドとして関数を呼び出すことです
この場合、これはオブジェクト m を指します。

関数名を直接呼び出すことを関数と呼びます:

var a=1212;
function show(){
alert(a)//1212
}
show()// 1212

グローバル環境では、グローバル変数はウィンドウのプロパティとして理解でき、グローバル関数はウィンドウのメソッドです
以下の例を見てください:

var m ={};
m.id='mmm';
m.show=function(){
  alert(this.id);
}
var a={};
a.id='aaa';
a.show=m.show;
a.show(); //aaa

a.show=m.show;  先理解这句话，因为函数是个对象，
m.show=function(){
  alert(this.id)
}

この式は、
を同時に参照する a.show と m.show と同等です。

function(){
  alert(this.id)
}

は実際には
と同等です

a.show=function(){
  alert(this.id)
}

したがって、a.show() を呼び出すと、これはオブジェクトを指します。
次の栗をご覧ください

var m ={};
m.id='mmm'
m.show=function(){
  alert(this.id)
}
var a={}
a.id='aaa'
a.show=function(){
  m.show()
};
a.show(); //mmm

a.show() を呼び出すときは、m.show() メソッドを呼び出すのと同じなので、これは m オブジェクトを指します。

次の例をもう一度見てください。最初はまだ理解できません。

var color='red';
var app = {};
app.color="green";
app.paint=function(node){
node.style.color=this.color;
  alert(this.color);
}
function findNode(callback){
  var btn =document.querySelector('.btn');
  callback(btn);//传进来，
}
findNode(app.paint);
alert(this.color); //red 而不是green

関数パラメータが渡される場合、パラメータは参照ではなく値によって渡されます

つまり、findNode(app.paint) が渡されると、実際には
になります。

function(node){
  node.style.color=this.color;
  alert(this.color);
}

参照。findNode はグローバルに定義されているため、WINDOW OR UNDEFINED を指します。

パラメータの受け渡しについては、値で渡します

function show(a){
  alert(a)
}

パラメータが基本的なデータ型であると理解しやすい

var b=10;
show(b)//alert(10);

オブジェクトは

var c ={};
c.prop=true;
var showProp=function(obj){
obj.prop=false
}
showProp(c); //c.prop = false

上記の例はパラメータを参照渡ししていると考える人もいます

実際、上記のパラメータは依然として値によって渡されます。showProp(c) が c を関数に渡すとき、関数内の c は参照と同等です。 false}

次の例を見てください

var c ={};
c.prop=true;
var showProp=function(obj){
  obj = new Object();
  obj.prop=false
  return obj;
}
showProp(c);
alert(c.prop); //true

受信した obj はここで変更されています。関数に従ってパラメーターが参照によって渡された場合、関数内の変更は確実に外部に反映されます。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。