Javascript는 'this'의 사용에 대해 설명합니다.

Question

저는 자바 스크립트를 배우고 있는데 왜 자바 스크립트가 this.vanilla인지 이해하려고합니다.

는이 글을 쓰는 것과 같습니다

var SomeVariable = [1, "bean", vanilla ? vanilla : "Madagascar Bourbon"]; 

매개 변수 vanilla과 동일한 이름을 사용하여 매우 혼란 보인다. 여기 VanillaBean

var VanillaBean = function(vanilla, cinnamon) { 
    this.vanilla = [1, "bean", vanilla ? vanilla : "Madagascar Bourbon"]; 
} 

Answer 1

는 vanillacinnamon와라는 두 개의 인자를 수용하는 기능이다. 아래와 같이 호출 할 때 적어도 하나의 속성, vanilla으로 객체를 생성합니다 :

var flavour = new VanillaBean("cheap", 250); 

flavour.vanilla는 [1, "bean", "cheap"] 될 것입니다.

(감사 @FelixKling와 @의 t.niese.)

this는 생성하는 객체, 그리고 아무것도 아닌 다른 vanilla 재산을 말한다.

당신은

을 여전히 목록을 얻을 것입니다,하지만 그것은 단지 독립 변수가 아닌 모든 객체의 속성이 될 것이다 (아마, 음, window,하지만 ...) SomeVariable을 포함하는 첫 번째 버전을 사용한다면 객체

Answer 2

var a = {}; 

this : function가 회원이기 때문에이 경우에 this

a.test = function() { return this; }; 

는 a 것이다. 이 경우 b에서

a.t = function() { 
    var b = function() { return this; }; 
    b(); 
}; 

는 this이 window 그래서 아무것도의 구성원이 아닙니다.

this을 이해하려면 누가 자신의 기능을 확인하고 소유자가없는 경우 창을 나타냅니다. 소유자가없는 모든 기능은 창에 의해 자동으로 소유됩니다.

추가 임시로 소유자 전화를 변경할 수 있습니다.

var b = function() {}; 
var c = { d: 1 }; 
b.call(c); 

통화 기능은 일시적으로 c에 소유자를 변경하고 this는 c 될 것입니다.

새 인스턴스 만들기. 이 경우에 this

function E() { this.h = 2; } 
E.prototype = { f: 1 }; 
E.prototype.g = function() { return this; }; 
var e = new E(); 
e.g(); 

는 e이다. prototype은 새 오브젝트가 처음에 어떻게 보이는지 설명 할 수있는 구조를 제공합니다. 여기서는 { h: 2, g: func, f: 1 }이됩니다.

Answer 3

html 요소에서 사용되는 경우 this은 DOM의 요소를 참조합니다.

예 : this 비 복귀 기능에서 사용된다

<script type="text/javascript"> 
    function hover(domElement) { 
     domElement.style.backgroundColor = '#CCC'; 
    } 
</script> 
<div onmouseover="hover(this);">Hover me</div> 

이 함수는 객체의 생성자되고, this 함수가 호출 될 때 자동 복귀 도착 내재적 생성 된 객체를 의미 new.

예 :

function Point(x, y) { 
    this.x = x || 0; 
    this.y = y || 0; 
    this.distance = function (point) { 
     return Math.sqrt(
      Math.pow(point.x - this.x, 2) + 
      Math.pow(point.y - this.y, 2) 
     ); 
    }; 
} 

var a = new Point(10, 10); 
var b = new Point(100, 100); 

document.write(a.distance(b)); 

this 및 new없이 동일한 기능 :

function Point(x, y) { 
    obj = {}; 

    obj.x = x || 0; 
    obj.y = y || 0; 
    obj.distance = function (point) { 
     return Math.sqrt(
      Math.pow(point.x - this.x, 2) + 
      Math.pow(point.y - this.y, 2) 
     ); 
    }; 

    return obj; 
} 

var a = Point(10, 10); 
var b = Point(100, 100); 

document.write(a.distance(b));