JavaScript에서 이 속성에 대한 자세한 설명

이 글에서는 주로 자바스크립트의 this 속성을 소개하고 있는데, 편집자는 꽤 좋다고 생각해서 공유하고 참고하겠습니다. 편집기를 따라가서 살펴보겠습니다.

이것은 항상 객체를 반환합니다. 즉, 속성 또는 메서드 가 현재 위치한 객체를 반환합니다.

객체의 속성은 다른 객체에 할당될 수 있기 때문에 해당 속성이 위치한 현재 객체가 가변적이라는 점, 즉 이것이 가변적이라는 점입니다.

예:

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

결과: "Name: Li Si"

다른 예를 살펴보세요:

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

결과도 "Name: Li Si"입니다. f 실행 중 - 최상위 창의 사용 사례

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를 정의합니다. 객체에서 Obj에 this.p를 정의하는 것은 p 속성을 갖도록 인스턴스 객체를 정의하는 것과 동일하며, 그런 다음 m 메소드는 이 p 속성을 반환할 수 있습니다.

3. 개체 메서드

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

obj 개체에서 foo 메서드가 직접 호출되는 경우에만 obj를 가리킵니다. 다른 용도에서는 코드 블록이 현재 위치한 개체를 가리킵니다.

사례 1: (obj.foo = obj.foo)()——window

사례 2: (false || obj.foo)()——window

사례 3: (1 , obj.foo)( )——window

위 코드에서는 obj.foo가 먼저 계산된 후 실행됩니다. 값이 변경되지 않더라도 이는 더 이상 obj

4를 가리키지 않습니다. Node

Node에 있으면 글로벌 환경에서 this는 글로벌을 가리키며, 모듈 환경에서는 this가 module.exports

를 가리킵니다. this

1 사용 시 주의 사항 this

var o = {
	f1 : function(){
		console.log(this);
		var f2 = function(){
			console.log(this);
		}();
	}
}
o.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 - 두 번째 레이어에서 외부 this를 가리키는 변수를 사용하세요

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

변수를 사용하여 this의 값을 고정한 후 내부 레이어에서 이 변수를 호출하세요. , 매우 유용하고 널리 사용되는 방법입니다

해결책 2 - 엄격 모드를 사용합니다. 엄격 모드에서 함수 내부의 이것이 최상위 개체를 가리키면 오류가 보고됩니다.

2. 배열 처리 방법에서는 이것을 사용하지 마세요

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

결과:

undefine a1

undefine 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 메소드의 두 번째 매개변수로 취급하고 실행 환경을 수정합니다

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는 세 가지 메소드를 제공합니다. : 이

function.prototype.call()

함수 인스턴스의 호출 메서드는 함수 실행 시 이것이 위치하는 범위를 지정할 수 있으며, 호출 메소드의 매개변수 객체를 측정합니다. 매개변수가 비어 있거나 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 및 call은 apply accepts입니다. 배열은 함수가 실행될 때 매개 변수로 사용됩니다. func.apply(thisValue,[arg1,arg2,...])

응용 프로그램 중 하나를 적용 - 가장 큰 요소를 찾습니다. array

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

apply two - 적용 배열의 빈 요소는 정의되지 않습니다(배열의 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 애플리케이션 3 - 배열과 유사한 객체 변환

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

apply 애플리케이션 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 단계란 무엇인가요? 호출 및 적용보다 더 중요한 것은 이것을 바인딩하는 것 외에도 원래 함수의 매개변수도 바인딩할 수 있다는 것입니다

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!