>  기사  >  웹 프론트엔드  >  이것을 자바스크립트에서 사용하는 방법은 무엇입니까?

이것을 자바스크립트에서 사용하는 방법은 무엇입니까?

coldplay.xixi
coldplay.xixi원래의
2021-03-31 13:39:122104검색

JavaScript에서 이를 사용하는 방법: 1. 함수에 자신이 속한 개체가 있는 경우 해당 개체를 가리킵니다. 2. 함수에 자신이 속한 개체가 없으면 다음을 가리킵니다. 전역 개체 3. 생성자에서 이는 새 개체를 가리킵니다.

이것을 자바스크립트에서 사용하는 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터.

JavaScript에서 사용하는 방법:

1) 함수에 자신이 속한 개체가 있는 경우: 해당 개체가 속한 개체를 가리킵니다.

함수에 자신이 속한 개체가 있는 경우 일반적으로 호출됩니다. . 표현을 통해 자연스럽게 자신이 속한 객체를 가리킵니다. 예를 들어, 다음 예는

var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); // 输出 100
 
 // 输出 { value: 100, getValue: [Function] },
 // 其实就是 myObject 对象本身
 console.log(this);
 
 return this.value;
};
 
console.log(myObject.getValue()); // => 100

getValue()가 myObject 객체에 속하고 myOjbect에 의해 호출되므로 myObject 객체를 가리킵니다.

2) 함수에는 소유 개체가 없습니다. 전역 개체를 가리킵니다

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 输出全局对象 global
 };
 
 foo();
 
 return this.value;
};
 
console.log(myObject.getValue()); // => 100

위 코드 블록에서 foo 함수는 getValue의 함수 본문에 정의되어 있지만 실제로는 getValue나 myObject에 속하지 않습니다. foo는 어떤 객체에도 바인딩되어 있지 않으므로 호출 시 this 포인터가 전역 객체를 가리킵니다.

설계 오류라고 합니다.

3) 생성자에서 다음은 새 객체를 가리킵니다.

js에서는 new 키워드를 통해 생성자를 호출하고 이것이 새 객체에 바인딩됩니다.

var SomeClass = function(){
 this.value = 100;
}
 
var myCreate = new SomeClass();
 
console.log(myCreate.value); // 输出100

그런데, js에서는 생성자, 일반 함수, 객체 메서드, 클로저 사이에 명확한 경계가 없습니다. 경계는 모두 인간의 마음에 있습니다.

4) 호출 적용 및 호출 및 바인드 바인딩: 바인딩된 개체를 가리키는

apply() 메서드는 두 개의 매개 변수를 허용합니다. 첫 번째는 함수가 실행되는 범위이고 다른 하나는 매개 변수 배열(인수)입니다. .

call() 메서드의 첫 번째 매개 변수의 의미는 다른 매개 변수를 하나씩 나열해야 한다는 점을 제외하면 apply() 메서드의 의미와 동일합니다.

간단히 말하면, 호출 방법은 우리가 일반적으로 함수를 호출하는 방법에 더 가까운 반면, 적용하려면 배열 형식으로 배열을 전달해야 합니다. 그것들은 상호 교환 가능합니다.

var myObject = {value: 100};
 
var foo = function(){
 console.log(this);
};
 
foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }
 
var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

관련 무료 학습 권장사항: javascript 비디오 튜토리얼

위 내용은 이것을 자바스크립트에서 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.