JavaScript でのこの属性の詳細な説明

この記事では主に JavaScript の this 属性を紹介します。編集者がそれを参考にさせていただきます。エディターをフォローして見てみましょう

これは常に オブジェクト を返します。つまり、プロパティまたはメソッド が現在配置されているオブジェクトを返します 。

オブジェクトのプロパティは別のオブジェクトに割り当てることができるため、プロパティが配置されている現在のオブジェクトは変数です、つまり、この点は変数です。

例:

var A = {
	name : '张三',
	describe : function(){
		return '姓名：' + this.name;
	}
};
var B = {
	name : '李四'
}
B.describe = A.describe;
B.describe();

結果:「名前: Li Si」

別の例を見てください:

var A = {
	name : '张三',
	describe : function(){
		return '姓名：' + this.name;
	}
};
var name = '李四'
f = A.describe;
f();

結果も「名前: Li Si」です。これは、この時点では、これがオブジェクトを指しているためです。 f is running - トップレベルウィンドウの使用機会

this

1. グローバル環境 - これが関数内にあるかどうかに関係なく、グローバル環境で実行されている限り、これはトップレベルのオブジェクトウィンドウ

2. コンストラクター - インスタンスオブジェクトです

を参照します。例:

var Obj = function(p){
	this.p = p;
}
Obj.prototype.a = function(){
	return this.p;
}
var obj = new Obj('color');
obj.a();
obj.p;

結果は「color」が返されます

これはインスタンスを指すため、コンストラクターを定義します。オブジェクトの場合、Obj で this.p を定義することは、p 属性を持つようにインスタンス オブジェクトを定義することと同等であり、m メソッドはこの p 属性を返すことができます。

3. オブジェクト メソッド

var obj = {
	foo : function(){
		console.log(this);
	}
};
obj.foo();//obj

foo メソッドが obj オブジェクトで直接呼び出された場合のみ、これは obj を指します。他の用途では、コード ブロックが現在配置されているオブジェクトを指します。

ケース 1: (obj.foo = obj.foo)()——window

ケース 2: (false || obj.foo)()——window

ケース 3: (1 , obj.foo)( )——window

上記のコードでは、obj.foo が最初に計算されてから実行されます。たとえその値が変更されていなくても、Node

内にある場合、これは obj

4 を指しなくなります。グローバル環境では、this は global を指します。モジュール環境では、this は module.exports を指します

this を使用する際の注意事項

1. this の複数のレイヤーを避ける

var o = {
	f1 : function(){
		console.log(this);
		var f2 = function(){
			console.log(this);
		}();
	}
}
o.f1();

実行結果は次のようになります:

{f1: ƒ }

Window {decodeURIComponent: ƒ, postMessage: ƒ, Blur: ƒ, focus: ƒ, close: ƒ, …}

f2 のこれがグローバル オブジェクトを指しているのはなぜですか?上記のコードの実行プロセスは実際には

var temp = function(){
	console.log(this);
};
var o = {
	f1 : function(){
		console.log(this);
		var f2 = temp();
	}
}
o.f1();

解決策 1 - 2 番目の層で外側の this を指す変数を使用します

var o = {
	f1 : function(){
		console.log(this);
		var that = this;
		var f2 = function(){
			console.log(that);
		}();
	}
}
o.f1();

変数を使用して this の値を固定し、内側の層でこの変数を呼び出します, これは非常に便利で広く使用されている方法です

解決策 2 - 厳密モードを使用する厳密モードでは、関数内の this がトップレベルのオブジェクトを指している場合、エラーが報告されます。

2. 配列処理メソッドでこれを使用しないでください

var o = {
	v : 'hello',
	p : ['a1','a2'],
	f : function(){
		this.p.forEach(function(item){
			console.log(this.v + ' ' + item);
		});
	}
}
o.f();

結果:

未定義 a1

未定義 a2

この結果の理由は、前の段落の多層 this と同じです

解決策 1 - を使用します中央の変数

var o = {
	v : 'hello',
	p : ['a1','a2'],
	f : function(){
		var that = this;
		this.p.forEach(function(item){
			console.log(that.v + ' ' + item);
		});
	}
}
o.f();

解決策 2 - これを forEach メソッドの 2 番目のパラメーターとして扱い、その実行環境を修正します

var o = {
	v : 'hello',
	p : ['a1','a2'],
	f : function(){
		this.p.forEach(function(item){
			console.log(this.v + ' ' + item);
		},this);
	}
}
o.f();

3. コールバック関数でこれを回避します

var o = new Object();
o.f = function(){
	console.log(this === o);
}
o.f();//true
$("#button").on("click",o.f);//false

これをバインドする方法

JavaScript は 3 つのメソッドを提供します: call、apply、bind でこのポイントを切り替え/修正します

function.prototype.call()

関数インスタンスの call メソッドは、関数の実行時に this が配置されるスコープを指定できます。呼び出しメソッド Measure のパラメータ パラメータが空、null、または未定義の場合、デフォルトでグローバル オブジェクトが渡されます。呼び出しパラメータがオブジェクトでない場合は、自動的にラッピング オブジェクトにラップされます。 func.call(thisValue,arg1,arg2,…)

var n = 123;
var obj = {n : 456};
function a(){
	console.log(this.n);
}

a.call();//123
a.call(null);//123
a.call(undefined);//123
a.call(window);//123
a.call(obj);//456

call メソッドのアプリケーションは、オブジェクトのネイティブ メソッドを呼び出すことです

var obj = {};
//原生方法
obj.hasOwnProperty('toString');//false
//覆盖了原生的方法
obj.hasOwnProperty = function(){
	return true;
}
obj.hasOwnProperty('toString');//true
//调回原生的方法
Object.prototype.hasOwnProperty.call(obj,'toString');//false

function.prototype.apply()

apply と apply の唯一の違いは呼び出しは、apply が受け入れることです。関数の実行時に配列がパラメータとして使用されます。func.apply(thisValue,[arg1,arg2,...])

アプリケーションの 1 つを適用します - 配列の最大の要素を見つけます

var a = [10,3,4,2];
Math.max.apply(null,a);

apply two - apply 配列の空の要素は未定義になります (配列の forEach メソッドは空の要素をスキップしますが、未定義ではないため) ?

var a = ['a','','b'];
function print(i){
	console.log(i);
}
a.forEach(print);//a b
Array.apply(null,a).forEach(print);//a undefined b

実行結果は上記とは異なり、すべて b

apply application 3 - 配列のようなオブジェクトの変換

Array.prototype.slice.apply({0:1,length:1});

apply application 4 - コールバック関数オブジェクトのバインド

var o = new Object();
o.f = function(){
	console.log(this === o);
}
var f = function(){
	o.f.apply(o);//或o.f.call(o);
}
$("#button").on("click",f);

function です。

bind メソッドは、関数本体内のこれをオブジェクトにバインドし、新しい関数を返すために使用されます

次の例は、メソッドに値を割り当てた後にエラーになります

var d = new Date();
d.getTime();
var print = d.getTime;
print();//Uncaught TypeError: this is not a Date object.

解決策:

var print = d.getTime.bind(d);

bind call and apply は、これをバインドするだけでなく、元の関数のパラメータもバインドできるということです

var add = function(x,y){
	return x * this.m + y * this.n;
}
var obj = {
	m:2,
	n:2
}
var newAdd = add.bind(obj,5);//绑定add的第一个参数x
newAdd(5);//第二个参数y

バインドメソッドをサポートしていない古いブラウザの場合は、自分でバインドメソッドを定義できます

if(!('bind' in Function.prototype)){
	Function.prototype.bind = function(){
		var fn = this;
		var context = arguments[0];
		var args = Array.prototype.slice.call(arguments,1);
		return function(){
			return fn.apply(context,args);
		}
	}
}

以上がJavaScript でのこの属性の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。