JavaScript의 바인딩, 호출, 적용 기능 사용법에 대한 자세한 소개

저희 프로젝트팀에서 다른 프로그램에 js를 소개할 때 많은 콘텐츠를 준비했는데 역시 별 효과가 없었던 것 같아서 그냥 얘기만 하면 부족하군요. 그것을 해야 합니다. 며칠 전 누군가가 코드에서 call() function의 사용법에 대해 물었습니다. 저는 js를 사용하는 프로그래머들에게 책을 읽어보라고 권했습니다. 서버 읽기 《javascript프로그래밍Essence" 이 책은 그릇의 대가ford가 쓴 것이 아닙니다. 나중에 segmentfault에서 비슷한 질문을 보고 답변을 드린 후 여기에 메모를 남겼습니다.

먼저 js에서 클래스나 객체를 정의하는 방법은 w3school here를 참고하세요. 글이 아주 자세하고 명확해서요. 자세한 내용은 다루지 않겠습니다.

바인드, 호출, 적용 세 가지 기능의 사용법을 소개하기 위해 js의 몇 가지 기능 설정을 소개해야 합니다. 이 부분에 관해서는 "자바스크립트 프로그래밍의 본질"의 4장을 읽어보시길 권합니다.

이 세 가지 기능에 대한 자세한 소개는 MDN 문서 bind, call, apply를 참조하세요.

브릭부터 시작하여 세그먼트 오류에 대한 이전 답변을 수정해 보겠습니다.

js에는 4가지 함수 호출 모드가 있습니다. 메서드 호출과 일반 함수 호출 , 생성자 함수 호출, 적용/호출 호출.

동시에 모든 함수 호출은 선언 시 정의된 형식 매개변수 외에도 this와 인수라는 2개의 형식 매개변수를 자동으로 추가합니다.

arguments에는 위의 세 가지 기능이 포함되지 않으므로 여기서는 이에 대해서만 이야기합니다. 이 값은 위 4번의 호출 모드에서 다른 값에 바인딩됩니다. 별도로 이야기해 보겠습니다.

메서드 호출:

이 함수는

var a = {     
    v : 0,     
    f : function(xx) {                 
        this.v = xx;     
    } 
} 
a.f(5);

<🎜와 같은 개체의 속성

입니다. >이때, 위 함수의 This는 이 객체 a에 바인딩됩니다. 따라서 this.v는 객체 a의 속성 v를 얻을 수 있습니다.

일반 함수 호출: 아직 코드를 살펴보는 중

function f(xx) {         
    this.x = xx; 
} 
f(5);

이때 함수 ​​f의 this는 전역 객체에 바인딩되어 있습니다. browser , 일반적으로 창 개체입니다. 그래서 여기서 this.x가 실제로 접근하는 것은 window.x입니다. 물론 window에 x 속성이 없다면 이렇게 작성하면 js의 치팅 구문에 따라 x가 추가됩니다. 창 개체에 속성을 부여하고 동시에 값을 할당합니다.

생성자 함수 호출:

생성자 함수 는 항상 js에서 가장 짜증나는 부분이라고 생각합니다. js의 원래 디자인 프로토타입 기반 객체 지향 구현은 적합하지 않습니다. 마치 다른 클래스 기반 객체 지향 구현으로 인해 모든 사람이 망쳐 놓은 습관을 충족시키기 위해 특별히 설계된 것처럼 말입니다.

new 키워드로 함수를 호출하면 js는 이 함수의 새로운 객체인 프로토타입 속성을 생성합니다. 이 새로운 객체에 바인딩됩니다. 물론, 새로운 키워드는 return 문의 동작도 변경하지만 여기서는 이에 대해 논의하지 않겠습니다.

function a(xx)
{         
    this.m = xx; 
} 
var b = new a(5);

코드를 보세요. 호출할 때 함수 이름 앞에 키워드 new를 추가하는 것 외에는 위 함수를 작성하는 것과 일반적으로 호출되는 함수에 차이가 없습니다. 더 이상 바인딩되지 않습니다. 앞에서 언급한 전역 개체는 여기서 생성된 새 개체이므로 이 방법은 실제로 매우 위험합니다. 함수만 보면 이 함수가 생성자로 사용되도록 의도되었는지 여부를 알 수 없기 때문입니다. 일반 기능의 경우. 따라서 jslint에서는 작성하는 모든 생성자가 필요하다는 것을 알 수 있습니다. 즉, new 키워드를 사용한 것을 확인한 후에는 후속 함수의 첫 글자를 대문자로 사용해야 합니다. 함수를 대문자로 표기해야 합니다. 개인적으로 의견은 단 하나입니다: 부정 행위:)

전화 적용/전화:

我们知道，在 js 里，函数其实也是一个对象，那么函数自然也可以拥有它自己的方法，有点绕，在js 里，每个函数都有一个公共的 prototype —— Function，而这个原型自带有好几个属性和方法，其中就有这里困惑的 bind、call、apply 方法。先说 apply 方法，它让我们构造一个参数数组传递给函数，同时可以自己来设置 this 的值，这就是它最强大的地方，上面的 3 种函数调用方式，你可以看到，this 都是自动绑定的，没办法由你来设，当你想设的时候，就可以用 apply()了。apply 函数接收 2 个参数，第一个是传递给这个函数用来绑定 this 的值，第二个是一个参数数组。

看代码

function a(xx) {         
    this.b = xx; 
} 
var o = {}; 
a.apply(o, [5]); 
alert(a.b);    // undefined 
alert(o.b);    // 5

是不是很神奇，函数 a 居然可以给 o 加属性值。当然，如果你 apply 的第一个参数传递 null，那么在函数 a 里面 this 指针依然会绑定全局对象。

call() 方法和 apply() 方法很类似，它们的存在都是为了改变 this 的绑定，那 call() 和apply() 有什么区别呢?就我个人看来，没啥鸟区别。。。开玩笑!刚刚说了，上面 apply() 接收两个参数，第一个是绑定 this 的值，第二个是一个参数数组，注意它是一个数组，你想传递给这个函数的所有参数都放在数组里，然后 apply() 函数会在调用函数时自动帮你把数组展开。而 call()呢，它的第一个参数也是绑定给 this 的值，但是后面接受的是不定参数，而不再是一个数组，也就是说你可以像平时给函数传参那样把这些参数一个一个传递。

所以如果一定要说有什么区别的话，看起来是这样的

function a(xx, yy) {     
    alert(xx, yy);     
    alert(this);     
    alert(arguments); 
} 
a.apply(null, [5, 55]); 
a.call(null, 5, 55);

仅此而已。

最后再来说 bind() 函数，上面讲的无论是 call() 也好， apply() 也好，都是立马就调用了对应的函数，而 bind() 不会， bind() 会生成一个新的函数，bind() 函数的参数跟 call() 一致，第一个参数也是绑定 this 的值，后面接受传递给函数的不定参数。 bind() 生成的新函数返回后，你想什么时候调就什么时候调，看下代码就明白了

var m = {    
    "x" : 1 
}; 
function foo(y) { 
    alert(this.x + y); 
} 
foo.apply(m, [5]); 
foo.call(m, 5); 
var foo1 = foo.bind(m, 5); 
foo1();

末了来个吐槽，你在 js 里想定义一个函数，于是你会这么写:

function jam() {};

其实这是 js 里的一种语法糖，它等价于：

var jam = function() {};

然后你想执行这个函数，脑洞大开的你会这么写：

function jam() {}();

但是这么写就报错了，其实这种写法也不算错，因为它确实是 js 支持的函数表达式，但是同时 js 又规定以function 开头的语句被认为是函数语句，而函数语句后面是肯定不会带 () 的，所以才报错，于是聪明的人想出来，加上一对括号就可以了。于是就变成了这样：

1(function jam() {}());

这样就定义了一个函数同时也执行它，详情参加 ECMAScript 的 Expression Statement 章节。

위 내용은 JavaScript의 바인딩, 호출, 적용 기능 사용법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!