> 웹 프론트엔드 > JS 튜토리얼 > JS 호출 모드 및 이 키워드의 사용에 대한 자세한 설명

JS 호출 모드 및 이 키워드의 사용에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-04-27 13:53:59
원래의
1516명이 탐색했습니다.

이번에는 JS 호출 모드와 이 키워드의 사용법에 대해 자세히 설명하겠습니다. JS 호출 모드에 대한 주의 사항과 이 키워드의 사용법은 다음과 같습니다.

호출 호출

함수를 호출하여 현재 함수의 실행을 일시 중지하고 제어 및 매개변수를 새 함수에 전달합니다.

실제 매개변수와 형식 매개변수 간의 불일치는 런타임 오류로 이어지지 않으며, 더 많은 매개변수는 무시되고, 더 적은 매개변수는 정의되지 않은 것으로 채워집니다.

각 메소드는 this와 인수라는 두 개의 추가 매개변수를 받습니다. 이 값은 호출 모드, 호출 모드(메서드, 함수, 생성자 및 호출 모드 적용)에 따라 다릅니다.
이 값은 값이 할당되고 호출되는 순간 발생합니다. 호출 메소드를 사용하여 다양한 호출 패턴을 구현할 수 있습니다

1

2

3

4

5

6

7

8

9

10

11

12

13

14

var myObject = { 

value: 0, 

increment: function (inc) { 

this.value += typeof inc === 'number' ? inc : 1; 

}; 

myObject.double = function(){ 

var helper = function(){ 

console.log(this);// this point to window 

console.log(this);// this point to object myObject 

helper(); 

myObject.double();//myObject Window

로그인 후 복사

1 메소드 호출 패턴 메소드 호출 패턴

메소드: 함수는 객체의 속성으로 저장되며 메소드가 호출되면 객체에 바인딩됩니다.

공개 메서드: 이

1

2

myObject.increment(); 

document.writeln(myObject.value); //

로그인 후 복사

기본 구현: myObject.increment를 통해 자신이 속한 개체의 컨텍스트를 얻는 메서드입니다. call(myObject, 0); myObject.increment。call(myObject,0);

2 The Function Invocation Pattern 函数调用模式

当函数并非对象的属性时就被当作函数调用(有点废话。。),this被绑定到全局对象(window)

ECMAScript5中新增strict mode, 在这种模式中,为了尽早的暴露出问题,方便调试。this被绑定为undefined

1

2

var add = function (a,b) { return a + b;}; 

var sum = add(3,4);// sum的值为7

로그인 후 복사

底层实现:add.call(window,3,4)

2 함수 호출 패턴 Function Invocation Pattern

함수가 객체의 속성이 아닌 경우 함수라고 합니다(좀 말도 안되는 소리지만...) , 이는 전역 개체(창)에 바인딩됩니다.

엄격 모드는 가능한 한 빨리 문제를 노출하고 디버깅을 용이하게 하기 위해 ECMAScript5의 새로운 기능입니다. 이것은 정의되지 않은

1

strict mode:add.call(undefined,3,4)

로그인 후 복사
기본 구현: add.call(window, 3, 4)

1

2

3

4

5

6

7

function hello(thing) { 

console.log(this + " says hello " + thing); 

person = { name: "Brendan Eich" 

person.hello = hello; 

person.hello("world"// [object Object] says hello world 等价于 person。hello。call(person,“world”) 

hello("world"// "[object DOMWindow]world" 等价于 hello。call(window,“world”)

로그인 후 복사
메서드 호출 모드와 함수 호출 모드의 차이점

1

2

3

4

5

6

7

8

var Quo = function (string) { 

this.status = string; 

}; 

Quo.prototype.get_status = function ( ) { 

return this.status; 

}; 

var myQuo = new Quo("this is new quo"); //new容易漏写,有更优替换 

myQuo.get_status( );// this is new quo

로그인 후 복사

3 생성자 호출 패턴

JavaScript

은 프로토타입 상속을 기반으로 하는 언어이며 클래스 기반 언어에 대한 객체 구성 구문 세트를 제공합니다.

이것은 new

1

2

3

4

5

6

7

8

9

10

11

apply(this,arguments[]); 

call(this,arg1,arg2...); 

var person = { 

name: "James Smith"

hello: function(thing,thing2) { 

console.log(this.name + " says hello " + thing + thing2); 

person.hello.call({ name: "Jim Smith" },"world","!"); // output: "Jim Smith says hello world!" 

var args = ["world","!"]; 

person.hello.apply({ name: "Jim Smith" },args); // output: "Jim Smith says hello world!"

로그인 후 복사

4에서 반환한 객체를 가리킵니다. Apply Invocation Pattern

apply와 call은 모두 javascript의 내장 매개변수입니다. 이전 매개변수는 배열이고, 후자의 매개변수는 하나씩 적용됩니다. 적용을 전달하는 것도 call

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Function.prototype.bind = function(ctx){ 

var fn = this; //fn是绑定的function 

return function(){ 

fn.apply(ctx, arguments); 

}; 

}; 

bind用于事件中 

function MyObject(element) { 

this.elm = element; 

element.addEventListener('click', this.onClick.bind(this), false); 

}; 

//this对象指向的是MyObject的实例 

MyObject.prototype.onClick = function(e) { 

var t=this; //do something with [t]... 

};

로그인 후 복사

의 하위 레이어에 의해 구현됩니다. 반면에 바인드 함수는 이를 함수에 바인딩하는 것과 함수를 호출하는 것을 분리하여 특정 컨텍스트에서 함수를 호출할 수 있습니다. , 특히 이벤트 바인드 적용 구현rrreee

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서:

🎜nodeJS 모듈 사용 단계에 대한 자세한 설명🎜🎜🎜🎜🎜jQuery 플러그인 highslide.js 제어 이미지 사례 자세한 설명🎜🎜🎜

위 내용은 JS 호출 모드 및 이 키워드의 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿