コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でのこの属性の詳細な説明

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

零到壹度
リリース： 2018-04-08 14:28:59
オリジナル
2709 人が閲覧しました

この記事では主に 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 サイトの他の関連記事を参照してください。

関連ラベル：
javascript this 属性
ソース：php.cn
前の記事：Angular で Dom を使用する際の誤解を避ける方法 次の記事：Vue プロジェクトは環境ごとにどのようにパッケージ化する必要がありますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート