JavaScript_Basic 지식의 여러 중요한 속성(this, 생성자, 프로토타입) 소개

this
this가 전역 범위에서 사용되는 경우 현재 페이지 개체 창을 나타내며, 함수에서 사용되는 경우 this는 이를 기준으로 합니다. 런타임에 어떤 객체가 호출되는지. 또한 함수에서 this의 특정 포인터를 변경하기 위해 apply와 call이라는 두 가지 전역 메서드를 사용할 수도 있습니다.
우선 전역 범위에서 이를 사용하는 예를 살펴보겠습니다.

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

<스크립트 유형=>
console.log( === window)
console.log(window.alert === .alert)
console .log(.parseInt (, 10));

함수에서 이는 다음과 같이 함수가 정의될 ​​때가 아니라 런타임에 결정됩니다.

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

foo() {
console.log(. 과일);
}
과일 = ;
foo();
pack = {
foo: foo
pack.foo( );


전역 함수 적용 및 호출을 사용하여 함수에서 this의 포인터를 다음과 같이 변경할 수 있습니다.

코드 복사 코드는 다음과 같습니다. foo() {

console.log(.fruit);

}
fruit = ; >pack = {
fruit:
};
foo.apply(window);
foo.apply(pack)

참고: 적용 및 호출 함수는 동일한 효과를 갖습니다. 유일한 차이점은 두 함수의 매개변수 정의가 다르다는 것입니다
.
자바스크립트에서는 함수도 객체이기 때문에 다음과 같은 흥미로운 예를 볼 수 있습니다.

코드 복사

코드는 다음과 같습니다. : foo() { ( === window) { console.log() }

}

foo.boo = () {
( === foo) {
console.log();
} ( === 창) {
console.log()
}
}; 🎜 >foo();
foo.boo();
foo.boo.apply(window);

프로토타입

자바스크립트 객체. 그리고 모든 함수에는 기본 프로토타입 속성이 있습니다.
사용자 정의 개체를 생성하는 시나리오에서 이 함수를 사용하는 경우 이 함수를 생성자라고 부릅니다. 예를 들어 다음은 간단한 시나리오입니다.

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

사람(이름) { .name = 이름; } Person.prototype = { getName: () { .name; >zhang = Person() ; console.log(zhang.getName());

비유적으로 JavaScript의 데이터 유형(String, Number, Array ), Object를 생각해 보겠습니다. , 날짜 등 이러한 유형은 다음과 같이 JavaScript 내부의 생성자로 구현된다고 믿을 만한 이유가 있습니다.
Array() {
}
arr1 = Array(1, 56, 34, 12); [1, 56, 34, 12];
배열에 대한 다양한 작업 방법(예: 연결, 조인, 푸시)도 프로토타입 속성에 정의되어야 합니다.
사실 JavaScript의 모든 내장 데이터 유형에는 읽기 전용 프로토타입 속성이 있지만(이해할 수 있습니다. 이러한 유형의 프로토타입 속성이 수정되면 사전 정의된 메소드가 사라지기 때문입니다), 여기에 자신만의 확장 메소드를 추가할 수 있습니다. .
Array.prototype.min = () {
min = [0]
( i = 1; i < .length; i ) {
([i] < min) {
min = [i];

}
min;
console.log([1, 56, 34, 12].min()); 🎜>참고: 여기에 함정이 있습니다. 배열의 프로토타입에 확장 메서드를 추가한 후 for-in을 사용하여 배열을 반복할 때 이 확장 메서드도 반복됩니다.
다음 코드는 이를 보여줍니다(min 메소드가 Array 프로토타입으로 확장되었다고 가정).
arr = [1, 56, 34, 12]
total = 0; arr) {
total = parsInt(arr[i], 10);
}
console.log(total)
해결책도 매우 간단합니다.
arr = [1, 56 , 34, 12];
total = 0;
( i arr) {
(arr.hasOwnProperty(i)) {
total =parseInt(arr[i], 10); 🎜 >}
}
console.log(total);

constructor

constructor는 항상 현재 객체를 생성한 생성자를 가리킵니다. 예를 들어 다음 예는




코드 복사


코드는 다음과 같습니다.

arr = [1, 56, 34, 12];
console.log(arr.constructor === Array)
Foo = () { }; (Foo.constructor === 함수);
obj = Foo();
console.log(obj.constructor === Foo)
console.log(obj.constructor.constructor === Function);

그러나 생성자가 프로토타입을 만나면 흥미로운 일이 발생합니다.
각 함수에는 기본 속성 프로토타입이 있고 이 프로토타입의 생성자는 기본적으로 이 함수를 가리킨다는 것을 알고 있습니다. 다음 예와 같이

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

Person( 이름) {
.name = 이름;
};
Person.prototype.getName = () {
.name
}; >console.log( p.constructor === 사람);
console.log(Person.prototype.constructor === 사람)
console.log(p.constructor.prototype.constructor === 사람 );


함수의 프로토타입을 재정의했을 때(참고: 위 예와의 차이점은 수정이 아니라 재정의임) 생성자의 동작이 다음과 같이 약간 이상했습니다. 다음 예는

코드 복사 코드는 다음과 같습니다. Person(name) ) {

.name = 이름;

};
Person.prototype = {
getName: () {
}
}p = 사람();
console.log(p.constructor = == 사람);
console.log(Person.prototype.constructor === 사람);
console.log(p.constructor. 프로토타입.constructor === 사람);


왜?
Person.prototype을 덮어쓰는 것은 다음 코드 작업과 동일합니다.

코드 복사

코드는 다음과 같습니다: Person.prototype = Object({ getName: () { .name;

}

})


while constructor 항상 자신을 생성하는 생성자를 가리키므로 이때는 Person.prototype.constructor === Object, 즉

코드 복사

코드는 다음과 같습니다. Person(name) { .name = name }; 🎜>getName: () {

.name;

p = Person()
console.log(p.constructor === Object); console.log(Person.prototype.constructor == = Object);
console.log(p.constructor.prototype.constructor === Object);


이 문제를 해결하는 방법은 무엇입니까? 방법도 매우 간단합니다. Person.prototype.constructor를 다시 덮어쓰면 됩니다.




코드 복사


코드는 다음과 같습니다.

사람(이름) {

.name = 이름; } Person.prototype = Object({ getName: () { .name ; } });

Person.prototype.constructor =

p = Person()
console.log(p.constructor === Person); console.log(Person.prototype.constructor === 사람);
console.log(p.constructor.prototype.constructor === 사람)