Javascript 이 키워드 상세설명_기본지식

1. 생성자가 인스턴스화한 객체를 가리킵니다

이전 기사에서는 다음 예와 같이 new를 사용하여 생성자를 호출하는 것과 new를 사용하지 않는 것의 차이점을 언급했습니다.

코드 복사 코드는 다음과 같습니다.

함수 Benjamin(사용자 이름, 성별) {
This.username = 사용자 이름;
This.sex = 섹스;
}
var benjamin = new Benjamin("zuojj", "남성");
//출력: Benjamin{sex: "male",username: "zuojj"}
console.log(벤자민);
var ben = Benjamin("장산", "여성");
//출력: 정의되지 않음
console.log(ben);

생성자를 일반 함수로 호출하면 반환값이 없으며 이는 전역 개체를 가리킵니다. 그렇다면 새 키워드가 부족하여 발생하는 문제를 어떻게 방지할 수 있습니까?

코드 복사 코드는 다음과 같습니다.

함수 Benjamin(사용자 이름, 성별) {
//"this"가 "Benjamin" 객체인지 확인
if(벤자민의 이 인스턴스) {
This.username = 사용자 이름;
This.sex = 섹스;
}그밖에 {
새로운 Benjamin(사용자 이름, 성별)을 반환합니다.
}
}
var benjamin = new Benjamin("zuojj", "남성");
//출력: Benjamin{sex: "male",username: "zuojj"}
console.log(벤자민);
var ben = Benjamin("장산", "여성");
//출력: Benjamin {사용자 이름: "zhangsan", 성별: "female"}
console.log(ben);

위의 예에서는 먼저 이것이 Benjamin의 인스턴스인지 확인합니다. 그렇지 않은 경우 new를 사용하여 자동으로 생성자를 호출하고 인스턴스화합니다. 즉, 더 이상 인스턴스화하기 위해 new 키워드가 누락되는 것을 걱정할 필요가 없습니다. 생성자. 물론, 우리가 이러한 현상을 피한다면 나쁜 습관이 생길 수도 있습니다. 다음과 같은 오류가 발생할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 Benjamin(사용자 이름, 성별) {
//"this"가 "Benjamin" 객체인지 확인
if(벤자민의 이 인스턴스) {
This.username = 사용자 이름;
This.sex = 섹스;
}그밖에 {
// 그렇지 않으면 오류가 발생합니다.
throw new Error("`new` 없이 호출된 `Benjamin`");
}
}

2. 함수를 호출하는 객체를 가리킵니다

아래 예를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

var x = 10;
var obj = {
x:10,
출력: 함수() {
//출력: true
console.log(this === obj);
반환 this.x;
},
내부 개체: {
x: 30,
출력: function() {
//출력: true
console.log(this === obj.innerobj);
반환 this.x;
}
}
};
//출력: 10
console.log(obj.output());
//출력: 30
console.log(obj.innerobj.output());

3. 전역 객체를 가리킵니다

위의 생성자에 대해 논의할 때 new가 적용 가능하지 않은 경우 이것이 전역 개체를 가리킨다는 점도 논의했습니다. 쉬운 실수의 두 가지 일반적인 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

변수 x = 100;
var obj = {
x:10,
출력: 함수() {
(함수() {
//출력: true
console.log(이 === 창);
//출력: 내부: 100
console.log("내부:" this.x);
})();

반환 this.x;
}
};
//출력: 10
console.log(obj.output());

클로저를 사용하면 범위가 변경되고 이는 브라우저에서 창을 가리킵니다.

코드 복사 코드는 다음과 같습니다.

변수 x = 100;
var obj = {
x:10,
출력: 함수() {
반환 this.x;
}
};
var 출력 = obj.output;
//출력: 10
console.log(obj.output());
//출력: 100
console.log(출력());
var obj2 = {
x: 30,
출력: obj.output
}
//출력: 30
console.log(obj2.output());

이때 this는 함수가 호출될 때 항상 객체를 가리킵니다.

4. 이는 apply/call() 메소드에 의해 할당된 객체를 가리킵니다

코드 복사 코드는 다음과 같습니다.

변수 x = 100;
var obj = {
x:10,
출력: 함수() {
반환 this.x;
}
};
//출력: 10
console.log(obj.output());
var obj2 = {
x: 40,
출력: obj.output
}
//출력: 40
console.log(obj.output.call(obj2));
//출력: 10
console.log(obj2.output.apply(obj));

5. 콜백 함수의 this는 콜백을 호출하는 함수에서 this가 가리키는 객체를 가리킵니다.

코드 복사 코드는 다음과 같습니다.

//
$("#username").on("클릭", function() {
console.log(this.value);
});

6. Function.prototype.bind의

bind() 메소드는 호출 시 this 키워드가 제공된 값으로 설정되고, 새 함수가 호출될 때 제공된 인수 앞에 주어진 일련의 인수를 갖는 새 함수를 생성합니다.
예시 1:

코드 복사 코드는 다음과 같습니다.

함수 사람() {
return this.name;
}
//Function.prototype.bind
var per = person.bind({
이름: "zuojj"
});
console.log(당);
var obj = {
이름: "벤",
사람:사람,
당: 당
};
//출력: Ben, zuojj
console.log(obj.person(), obj.per());

예 2:

코드 복사 코드는 다음과 같습니다.

this.x = 9
var 모듈 = {
x: 81,
getX: function() { return this.x }
};
//출력: 81
console.log(module.getX())
var getX = module.getX;
//출력: 9, 이 경우 "this"는 전역 객체를 참조하기 때문입니다
console.log(getX)
// 모듈에 바인딩된 'this'를 사용하여 새 함수를 만듭니다
varboundGetX = getX.bind(모듈);
//출력: 81
console.log(boundGetX());