ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの詳しい説明はこちら(グラフィックチュートリアル)

JavaScriptの詳しい説明はこちら(グラフィックチュートリアル)

亚连
亚连オリジナル
2018-05-19 16:01:151800ブラウズ

この記事では、JavaScript に関する関連情報を詳しく紹介します。

this の値は実行時に決定されます。プログラムが実行中であることは、状況に応じて次の状況に分類できます。

1. グローバル スコープの this

グローバル スコープでは、this は window オブジェクトを指します。

console.log(this);//指向window对象

this.x = 5//在全局作用域内创建一个x
//与this.x = 5的等价情况:
//var x = 5;
//x = 5;

グローバル スコープで var x=5 を実行すると、実際には window オブジェクトの属性 x が作成され、それが 5 に等しくなります。

変数を定義するときに var を追加しない場合、JS はその変数をグローバル変数とみなし、ウィンドウ オブジェクトのプロパティとして扱います。

2.関数内のこれ

JSには直接呼び出される関数を通常の関数と呼び、newを通してオブジェクトを作成する関数をコンストラクターと呼びます。

2.1 コンストラクター内の This

コンストラクター内の This は、作成するオブジェクトを指します。次のようなものです。

function Person(name){
  this.name = name;//this指向该函数创建的对象person
}
var person = new Person("chaimm");

2.2 通常の関数内の This

通常の関数内の This は、ウィンドウ オブジェクトを指します。

上記の例で Perosn 関数が直接実行される場合、これはウィンドウ オブジェクトを表すため、関数の実行後にグローバル名が作成されます。

function Person(name){
  this.name = name;//this指向window
}
Person("chai");//当作普通函数执行,this指向window对象


3. オブジェクト内の this

オブジェクト内の this は、次のような現在のオブジェクトを指します。

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

上記のコードでは、this は関数 getName が属するオブジェクトを指します。

ただし、オブジェクトの関数内にネストされた関数がある場合、この関数の this はその外側のオブジェクトではなくウィンドウを指します。

var person = {
  name : "chaimm",
  setName : function(name){
    (function(name){
      this.name = name; //此时this并不代表person对象,而是代表window对象
    })(name);
  }
}

上記の例では、person オブジェクトに getName 関数があり、その getName 関数内にある関数が、person オブジェクトではなく window オブジェクトを指しています。これは JS のバグです。通常、このバグを回避するには以下のような処理が行われます。

var person = {
  name : "chaimm",
  setName : function(name){
    var thar = this;//将this赋给that
    (function(name){
      that.name = name;//此时that指向person对象
    })(name);
  }
}

personオブジェクトの第1レベルの関数で、これをローカル変数thatに代入し、それを第2レベルの関数で使用します。これは人物オブジェクトを指し、人物の属性を操作できます。

注: オブジェクト内の関数を変数に割り当て、その変数を通じてその関数を呼び出す場合、以下に示すように、関数内の this はオブジェクトではなくウィンドウを指します。

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

//将getName函数赋给一个新的变量
var newGetName = person.getName;
//通过新的变量调用这个函数,这个函数中的this将指向window
newGetName();//若全局作用域中没有name,则将返回undefined

4. 呼び出しを使用します。これら 2 つの関数は、呼び出された関数内の this が指すオブジェクトを手動で指定できます。

//定义一个构造函数
var Person = function(name){
  this.name = "";
  this.setName = function(name){
    this.name = name;
  }
}

//创建两个对象
var personA = new Person("A");
var personB = new Person("B");

//使用personA的setName函数去修改personB的name属性
personA.setName.apply(personB,["C"]);

applyの使い方

オブジェクトA.関数名.apply(オブジェクトB,パラメータリスト);

オブジェクトBがapplyの最初のパラメータとして渡されると、オブジェクトAの関数内のthisはオブジェクトを指しますB、このとき、オブジェクト A に対するこの関数の操作はオブジェクト B に適用され、オブジェクト A を使用してオブジェクト B の関数を呼び出すことが実現されます。

上記は私があなたのためにまとめたものです。

関連記事:


JavaScript の学習まとめはこれ

JavaScript の 6 つのハードルこれ

JavaScript が何を指すのかについての詳細な紹介(写真と文章)

以上がJavaScriptの詳しい説明はこちら(グラフィックチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。