이것의 사용법과 차이점에 대한 자세한 설명, JavaScript로 호출하고 적용하기

이전 JavaScript 학습에서 this, call 및 apply는 항상 혼란스러웠지만 널리 사용됩니다. 그래서 자바스크립트의 이것을 이해하고, 전화하고, 적용하는데 하루 종일 시간을 보냈습니다.

우선 이것부터 얘기해보자.

'JavaScript 디자인 패턴과 개발 사례'의 설명에 이 내용의 핵심을 짚는 문장이 있는 것 같아요. 즉,

JavaScript에서 This는 항상 객체를 가리킵니다

실제 응용 프로그램에서 this를 가리키는 것은 다음 네 가지 유형으로 나눌 수 있습니다.

As 객체 메소드 호출

1. 일반 함수 호출

2. 생성자 호출

3. 적용 및 호출 호출

4. 다음으로 처음 세 가지 사항을 분석해 보겠습니다. 네 번째 항목의 신청 및 통화에 대해서는 통화 및 신청 섹션에서 자세히 설명하겠습니다.

1. 객체 메소드로 호출

설명: 객체 메소드로 호출하면 객체를 가리킵니다. 예:

/**
 * 1.作为对象的方法调用
 *
 * 作为对象方法调用时，this指向该对象。
 */

var obj = {
 a: 1,
 getA: function() {
  console.log(this === obj);
  console.log(this.a);
 }
};

obj.getA(); // true , 1

2. 일반 함수로 호출

참고: 일반 함수로 호출하면 항상 전역 개체(브라우저의 창)를 가리킵니다. 예:

/**
 * 2.作为普通函数调用
 *
 * 不作为对象属性调用时,this必须指向一个对象。那就是全局对象。
 */

window.name = 'globalName';

var getName = function() {
 console.log(this.name);
};

getName(); // 'globalName'

var myObject = {
 name: "ObjectName",
 getName: function() {
  console.log(this.name)
 }
};

myObject.getName(); // 'ObjectName'

// 这里实质上是把function() {console.log(this.name)}
// 这句话赋值给了theName。thisName在全局对象中调用，自然读取的是全局对象的name值
var theName = myObject.getName;

theName(); // 'globalName'

3. 생성자 호출

설명: 생성자로 호출되면 반환된 항목을 가리킵니다. 물체. 예:

그러나 생성자에서 다른 객체를 반환하도록 수동으로 지정하면 작동하지 않습니다.

/**
 * 3.作为构造器调用
 * 
 * 作为构造器调用时，this指向返回的这个对象。
 */

var myClass = function() {
 this.name = "Lxxyx";
};

var obj = new myClass();

console.log(obj.name); // Lxxyx
console.log(obj) // myClass {name: "Lxxyx"}

반환된 데이터 유형이 다른 데이터 유형이면 문제가 없습니다.

var myClass = function() {
 this.name = "Lxxyx";
 // 加入return时，则返回的是别的对象。this不起作用。
 return {
  name:"ReturnOthers"
 }
};

var obj = new myClass();
console.log(obj.name); // ReturnOthers

4. 전화 신청

전화 신청과 목적은 같습니다. 이들은 모두 함수 본문에서 this의 포인터를 지정하는 데 사용됩니다.

Call과 Apply의 차이점

Call: 첫 번째 매개변수는 이를 가리키는 포인터이며, 함수에 전달할 매개변수는 하나씩 입력해야 합니다. . 적용: 첫 번째 매개변수는 이에 대한 포인터이고 두 번째 매개변수는 배열이며 모든 매개변수가 한 번에 전달됩니다.

첫 번째 매개변수가 null이면 호출 자체를 가리킵니다.

1.

을 가리키도록 변경합니다. 설명: 이것은 호출 및 적용의 가장 일반적인 사용입니다. 함수 본문에서 this의 포인터를 변경하는 데 사용됩니다.

예:

2. 다른 객체에서 메서드를 빌려옵니다.

var name = "GlobalName"

var func = function() {
 console.log(this.name)
};

func(); // "GlobalName"

var obj = {
 name: "Lxxyx",
 getName: function() {
  console.log(this.name)
 }
};

obj.getName.apply(window) // "GlobalName" 将this指向window
func.apply(obj) // "Lxxyx" 将this指向obj

여기서는 즉시 실행되는 익명 함수로 시작합니다.

함수에는 인수 속성이 있으며 인수는 배열과 유사한 배열입니다.

(function(a, b) {
 console.log(arguments) // 1,2
 // 调用Array的原型方法
 Array.prototype.push.call(arguments, 3);
 console.log(arguments) // 1,2,3
})(1,2)

그러나 인수는 배열 메서드를 직접 호출할 수 없으므로 Array 객체의 프로토타입 메서드를 호출하려면 call 또는 Apply를 사용해야 합니다.

원리도 이해하기 쉽습니다. 예를 들어 방금 호출한 것은 푸시 메소드이고, 푸시 메소드는 Google v8 엔진에 있습니다.

이것만 관련이 있으니 배열류 객체라면 관련 메소드를 호출해서 처리하면 됩니다.

function ArrayPush() {
 var n = TO_UINT32(this.length); // 被push对象的长度
 var m = % _ArgumentsLength(); // push的参数个数
 for (var i = 0; i < m; i++) {
  this[i + n] = % _Arguments(i); // 复制元素
 }
 this.length = n + m; //修正length属性
 return this.length;
}

이 부분은 내용이 꽤 복잡하고, 저도 잘 못해요. 따라서 자격을 갖춘 학생들에게 관련 서적을 구입하거나 후속 블로그 기사를 기다리는 것이 좋습니다.

감상

이 부분을 공부하면서 JavaScript에 대한 이해가 깊어졌습니다. 가장 직관적인 표현은 일부 우수한 프레임워크의 소스 코드를 볼 때 더 이상 호출하고 적용하고 바인딩하는 것에 대해 혼동하지 않는다는 것입니다. 그래도 너무 행복해요~

다음 시간에는 제가 매일 배우고 사용하는 CSS를 심도있게 탐구해보겠습니다. 결국 JavaScript를 배운 후에는 HTML과 CSS를 남길 수 없습니다.

【관련 추천 튜토리얼】

1.

JavaScript 동영상 튜토리얼

2. JavaScript 온라인 매뉴얼
3. 부트스트랩 튜토리얼