개념적 개요 이것
함수가 만들어지면 키워드가 생성되며 (백그라운드에서) 객체에 연결되어 있으며 기능 이이 개체에서 작동합니다. 다시 말해, 키워드는 함수, 객체에 대한 참조에 사용할 수 있으며 함수는 해당 객체의 속성 또는 방법입니다.
이 개체를 보자 :
<! docType html> <html lang = "en"> <body> <cript> var code = {living : true, age : 23, gender : 'male', getgender : function () {return cody.ender;}}; console.log (cody.getgender ()); // logs 'male'</script> </body> </html>기능 getgender에서 Cody 객체 내부에서는 성별 속성 (즉, Cody.gender)을 얻을 수 있습니다. 코디 객체를 가리키기 때문에 코디 객체를 얻기 위해 이것을 사용할 수도 있습니다.
<! docType html> <html lang = "en"> <body> <cript> var code = {living : true, age : 23, gender : 'male', getgender : function () {return this. gender;}}; console.log (cody.getgender ()); // logs 'male'</script> </body> </html>this.
이것에 대한 주제는 약간 혼란 스러울 수 있지만 그럴 필요는 없습니다. 일반적으로,이 지적한 객체는 함수 자체가 아니라 함수를 포함하는 객체입니다 (물론 키워드 또는 ancl () 및 apply ()를 사용하는 것과 같은 예외가 있습니다).
중요한 팁
- 키워드 이것은 다른 변수와 같습니다. 유일한 차이점은 변경할 수 없다는 것입니다.
- 다른 매개 변수 및 변수와 달리 함수로 전달되는 변수는 함수를 호출하는 객체의 키워드 (속성이 아님)입니다.
이것의 값을 결정하는 방법은 무엇입니까?
이것은 모든 함수로 전달되며 그 값은 함수가 실행될 때 호출되는 시점에 따라 다릅니다. 여기에서 기억해야 할 매우 특별한 장소이므로 여기에 참고하십시오.
다음 코드에서 MyObject 객체에는 속성 Saysfoo가 있으며, 이는 SaysFoo 함수를 가리 킵니다. 글로벌 도메인에서 Sayfoo 함수가 호출되면 창 객체를 가리 킵니다. myObject가 함수를 호출하면 MyObject를 가리 킵니다.
myObject에는 foo라는 속성이 있으므로 여기에 사용됩니다.
<! doctype html> <html lang = "en"> <body> <cript> var foo = 'foo'; var myObject = {foo : '나는 myObject.foo'}; var sayfoo = function () {console.log (this [ 'foo']); }; // myObject sayfoo 속성을 제공하고 sayfoo 함수 myobject.sayfoo = sayfoo; myObject.sayfoo (); // logs 'I am myObject.foo'12 sayfoo (); // logs 'foo'</script> </body> </html>이 값은 함수가 호출되는 시점에 따라 다릅니다. myObject.sayfoo와 sayfoo는 모두 같은 함수를 가리 키지 만 sayfoo () 호출의 컨텍스트는 다르므로 이것의 값은 다릅니다. 아래는 비슷한 코드이며 헤드 객체 (창)은 명시 적으로 사용되며 유용하기를 바라고 있습니다.
<! doctype html> <html lang = "en"> <body> <cript> window.foo = 'foo'; Window.myObject = {foo : '나는 myObject.foo'}; window.sayfoo = function () {! Console.log (this.foo); }; Window.myObject.sayfoo = Window.sayfoo; Window.myObject.sayfoo (); Window.sayfoo (); </script> </body> </html>동일한 함수를 가리키는 여러 참조가있을 때 호출 함수의 컨텍스트에 따라이 값이 변경됨을 분명히 알 수 있습니다.
중요한 팁
-이를 제외한 모든 변수와 매개 변수는 정적 변수 범위에 속합니다.
이것은 임베디드 기능 내의 헤드 객체를 가리 킵니다.
다른 함수에 포함 된 함수에서 이것을 사용할 때 어떤 일이 발생하는지 궁금 할 것입니다. 불행히도 ECMA 3에서는 규칙을 따르지 않으며 함수가 속한 객체가 아니라 헤드 객체 (브라우저의 창 객체)를 가리 킵니다.
다음 코드에서는 func2 및 func3 의이 코드는 더 이상 myObject가 아니라 헤드 객체를 가리 킵니다.
<! docType html> <html lang = "en"> <body> <cript> var myobject = {func1 : function () {console.log (this); // logs myObject varfunc2 = function () {console.log (this); // windows를 로그 하고이 시점에서 varfunc3 = function () {console.log (this); // windows는 Head Object} ()이므로 Windows를 기록합니다. } (); }}; myObject.func1 (); </script> </body> </html>그러나 ECMAScript 5에서는이 문제가 수정됩니다. 이제이 문제를 알고 있어야합니다. 특히 한 기능의 값을 다른 기능으로 전달할 때.
아래 코드를보고 익명 기능을 foo.func1로 전달하십시오. 익명 함수가 foo.func1에서 호출되면 (함수가 다른 함수에 중첩되어 있음) 익명 함수의 헤드 객체를 가리 킵니다.
<! docType html> <html lang = "en"> <body> <cript> var foo = {func1 : function (bar) {bar (); // foo console.log (this)가 아닌 Windows Windows; //이 키워드는 Foo Object}}}; foo.func1 (function () {console.log (this)}); </script> </body> </html>이제 이것을 포함하는 함수가 다른 함수에 있거나 다른 함수에 의해 호출된다면, 이것의 값은 헤드 객체를 가리킬 것입니다 (다시, 이것은 ECMAScript 5에서 수정됩니다.)
중첩 된 기능의 문제를 해결하십시오
이를 잃지 않도록하기 위해 부모 함수의 스코프 체인을 사용하여 참조를 저장할 수 있습니다. 다음 코드에서는 범위를 사용하여이를 사용하는 변수를 사용하여 기능 컨텍스트를 더 잘 저장할 수 있습니다.
<! docType html> <html lang = "en"> <body> <cript> var myobject = {myProperty : 'icanseehelight', myMethod : function () {var that = this; // MyMethod SCOPE VarHelPerfunction function () {// childFunction var helperfunction function () {// childfunction // logs 'i that console.log (that.myproperty)를 통해 빛을 볼 수 있습니다. // logs 'light'console.log (this)를 볼 수 있습니다. // "the"} ()를 사용하지 않으면 Window 개체를 기록합니다. }} myObject.mymethod (); // myMethod를 호출 </script> </body> </html>이것의 가치를 제어하십시오
이것의 값은 일반적으로 함수가 호출되는 컨텍스트 (키워드가 사용되지 않는 한, 나중에 소개되는 경우)에 따라 다르지만, apply () 또는 호출 ()을 사용하여 객체를 지정하여 함수가 트리거 될 때이 값을 변경/제어 할 수 있습니다. 이 두 가지 방법을 사용하는 것은 다시 말하는 것과 같습니다. "이봐, x 함수를 호출하지만 z 객체 가이 값을 만들도록하십시오." 그렇게하면이 JavaScript의 기본값이 변경됩니다.
아래에서 객체와 함수를 생성 한 다음 Call ()을 통해 함수를 트리거하므로 함수의 MyOJBect를 가리 킵니다. MyFunction 기능에서 이것은 헤드 객체 대신 MyObject에서 작동하므로 MyFunction에서 이에 의해 가리키는 객체를 변경합니다.
<! doctype html> <html lang = "en"> <body> <cript> var myobject = {}; var myFunction = function (param1, param2) {// setViacall () '이'는 함수가 호출 될 때 내 객체에 대한 포인트 .foo = param1; this.bar = param2; Console.log (this); // 로그 객체 {foo = 'foo', bar = 'bar'}}; myFunction.call (myObject, 'foo', 'bar'); // 함수 호출,이 값을 myObject console.log (myObject)로 설정하십시오.위의 예에서는 Call (), apply ()도 동일한 사용에 적용 할 수 있습니다. 둘 사이의 차이점은 매개 변수가 함수로 전달되는 방법입니다. 사용 호출 (), 매개 변수는 쉼표로 구분되며 ()를 apply ()로 분리하고 매개 변수는 배열로 전달됩니다. 다음은 동일한 코드이지만 apply ()를 사용하십시오.
<! doctype html> <html lang = "en"> <body> <cript> var myobject = {}; var myFunction = function (param1, param2) {// apply ()를 통해 설정하면 () 기능이 호출 될 때 내 객체를 가리 킵니다 .foo = param1; this.bar = param2; Console.log (this); // 로그 객체 {foo = 'foo', bar = 'bar'}}; myFunction.Apply (myObject, [ 'foo', 'bar']); // 함수 호출,이 값 콘솔을 설정하십시오 .Log (myObject); // 객체 {foo = 'foo', bar = 'bar'} </script> </body> </html>이것을 사용자 정의 생성자에 사용하십시오
기능이 키워드 새로 트리거되면,이 값은 생성자에 인스턴스 자체를 가리 키도록 선언됩니다. 다시 말해 : 생성자에서, 우리는 이것을 사용하여 실제로 생성되기 전에 객체를 지정할 수 있습니다. 이 값을 콜 () 또는 apply ()로 변경하는 것 같습니다.
아래에서는 생성 된 객체를 가리키는 생성자 사람을 구성합니다. 사람의 객체가 생성되면이 객체를 가리키고 속성 이름을 객체에 넣고 값은이 생성자에게 전달 된 매개 변수 값 (이름)입니다.
<! doctype html> <html lang = "en"> <body> <cript> var person = function (name) {this.name = name || '존도'; // 이것은 생성 된 즉각적인} var code = new Person ( 'Cody Lindley')을 나타냅니다. // 개인 생성자 console.log (cody.name)에 따라 인스턴스를 만듭니다. // 'Cody Lindley'</script> </body> </html> 로그이런 식으로, 생성자가 키워드 새로 트리거되면, 이것은 "생성 될 객체"를 가리 킵니다. 그런 다음 키워드 새를 사용하지 않으면이 값은 사람을 트리거하는 맥락을 가리킬 것입니다. 이것은 헤드 객체입니다. 아래 코드를 살펴 보겠습니다.
<! docType html> <html lang = "en"> <body> <cript> var person = function (name) {this.name = name || 'Johndoe'; } var code = person ( 'Cody Lindley'); // 'new'console.log (cody.name)를 사용하지 않았다. // 정의되지 않은 경우 값은 실제로 Window.Name Console.Log (Window.Name)에 설정됩니다. // 'Cody Lindley'</script> </body> </html> 로그프로토 타입 방법 내의 생성자 인스턴스를 가리키는이
방법이 생성자의 프로토 타입 속성으로 사용되는 경우,이 방법에서는 트리거 방법의 인스턴스를 지적합니다. 여기, 우리는 사람 () 생성자가 있는데, 그 사람의 이름이 필요합니다. 성명을 얻기 위해 whatismyfullname 메소드를 person.prototype에 추가하고 모든 사람의 인스턴스 가이 방법을 상속합니다. 이 방법에서는이 방법을 트리거 한 인스턴스 (및 그 속성)를 가리 킵니다.
아래에서 나는 두 사람 객체 (Cody and Lisa)를 만들었고 상속 된 WhatismyfullName 메소드에는이 인스턴스 에이 점이 포함되어 있습니다.
<! docType html> <html lang = "en"> <body> <cript> var person = function (x) {if (x) {this.fullname = x}; }; person.prototype.whatismyfullname = function () {repty this.fullname; // 'this'는 person ()} var code = new Person ( 'Cody Lindley')에서 만든 인스턴스를 나타냅니다. var lisa = 새로운 사람 ( 'Lisa Lindley'); // 상속 된 WhatisMyfullName 메소드를 호출하여 인스턴스 Console.log (cody.whatismyfullname (), lisa.whatismyfullname ())을 참조하는 데 사용합니다. /* 프로토 타입 체인은 여전히 유효하므로 인스턴스에 풀 이름 속성이 없으면 프로토 타입 체인에서 찾을 수 있습니다. 아래에서는 사람 프로토 타입과 객체 프로토 타입에 풀 이름 속성을 추가합니다. 메모를 참조하십시오. */object.prototype.fullname = 'John Doe'; var John = 새로운 사람 (); // 인스턴스 console.log (john.whatismyfullname ())에 풀 이름이 추가되지 않도록 인수가 전달되지 않습니다. // 'John Doe'</script> </body> </html> 로그이를 프로토 타입 객체 내부의 메소드에서 사용하면 인스턴스를 가리 킵니다. 인스턴스에 속성이 포함되어 있지 않으면 프로토 타입 검색이 시작됩니다.
힌트
-이를 가리키는 객체에 찾으려는 속성이 포함되어 있지 않으면 모든 속성에 적용되는 법률도 여기에 적용됩니다. 즉, 속성은 프로토 타입 체인을 따라 "검색"됩니다. 따라서 본 예에서는 인스턴스에 풀 이름 속성이 포함되어 있지 않으면 FullName은 person.prototype.fullName을 찾은 다음 Object.Prototype.fullName을 찾습니다.
더 많은 JavaScript 구문을 보려면 "JavaScript 참조 자습서"및 "JavaScript Code Style Guide"를 따라갈 수 있습니다. 또한 모두가 wulin.com을 더 지원하기를 바랍니다.