이것은 자바스크립트에서 무엇을 의미하나요?

js에서 이는 "this; current"를 의미하며 현재 함수의 실행 환경을 동적으로 가리키는 포인터 변수입니다. 동일한 함수가 다른 시나리오에서 호출되면 this의 포인터도 변경될 수 있지만 항상 해당 함수가 있는 함수의 실제 호출자를 가리킵니다. 호출자가 없으면 전역 개체 창을 가리킵니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript 함수가 호출된 후 특정 실행 환경에서 실행됩니다. 이 실행 환경은 함수 호출자 또는 함수를 호출하는 개체입니다. 함수에 호출자가 없으면(객체를 통하지 않고 직접) 실행 환경은 전역 객체 창입니다.

함수 실행 중 실행 환경을 참조(액세스)하기 위해 JavaScript에서는 특별히 this 키워드를 추가했습니다. 이는 현재 함수의 실행 환경을 가리키는 포인터 변수입니다.

동일한 함수가 다른 시나리오에서 호출되면 이것의 요점도 바뀔 수 있지만 항상 해당 함수가 위치한 함수의 실제 호출자를 가리킵니다. 호출하는 사람이 누구인지 가리킵니다. 호출자가 없으면 전역 개체 창을 가리킵니다.

"JS this 및 개체 호출" 섹션에서 이 포인터의 예비 사용에 대해 설명했습니다. 이해하지 못하는 독자는 링크를 클릭하여 이 섹션을 자세히 살펴보세요.

이것을 사용하세요

함수 실행 시 JavaScript 엔진에 의해 자동으로 생성되며 함수 내에 존재하며 현재 호출 개체를 참조하는 동적 포인터입니다. 구체적인 사용법은 다음과 같습니다.

this[.属性]

속성이 포함되지 않은 경우 현재 개체가 전달됩니다.

이것은 사용법이 유연하고 포함된 값도 다양합니다. 예를 들어, 다음 예제에서는 call() 메서드를 사용하여 함수 내에서 this가 참조하는 객체를 지속적으로 변경합니다.

var x = "window";  //定义全局变量x，初始化字符串为“window”
function a () {  //定义构造函数a
    this.x = "a";  //定义私有属性x，初始化字符a
}
function b () {  //定义构造函数b
    this.x = "b";  //定义私有属性x，初始化为字符b
}
function c () {  //定义普通函数，提示变量x的值
    console.log(x);
}
function f () {  //定义普通函数，提示this包含的x的值
    console.log(this.x);
}
f();  //返回字符串“window”，this指向window对象
f.call(window);  //返回字符串“window”，指向window对象
f.call(new a());  //返回字符a，this指向函数a的实例
f.call(new b());  //返回字符b，this指向函数b的实例
f.call(c);  //返回undefined，this指向函数c对象

다음은 5가지 일반적인 시나리오와 대처 전략을 통해 이번 성과를 간략하게 요약한 것입니다.

1. 일반 호출

다음 예에서는 함수 참조 및 함수 호출이 이에 미치는 영향을 보여줍니다.

var obj = {  //父对象
    name : "父对象obj",
    func : function () {
        return this;
    }
}
obj.sub_obj = {  //子对象
    name : "子对象sub_obj",
    func : obj.func
}
var who = obj.sub_obj.func();
console.log(who.name);  //返回“子对象sub_obj”，说明this代表sub_obj

하위 객체 sub_obj의 func를 함수 호출로 변경하면.

obj.sub_obj = {
    name : "子对象sub_obj",
    func : obj.func()  //调用父对象obj的方法func
}

그런 다음 함수의 this는 함수가 정의된 상위 개체 obj를 나타냅니다.

var who = obj.sub_obj.func;
console.log(who.name);  //返回“父对象obj”，说明this代表父对象obj

2. 인스턴스화

새 명령을 사용하여 함수를 호출할 때 이는 항상 인스턴스 개체를 참조합니다.

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window");
    else if (this.contructor == arguments.callee) console.log("this = 实例对象");
}
new obj.func;  //实例化

3. 동적 호출

call 및 Apply를 사용하여 매개변수 개체를 가리키도록 합니다.

function func () {
    //如果this的构造函数等于当前函数，则表示this为实例对象
    if (this.contructor == arguments.callee) console.log("this = 实例对象");
    //如果this等于window，则表示this为window对象
    else if (this == window) console.log("this = window对象");
    //如果this为其他对象，则表示this为其他对象
    else console.log("this == 其他对象 \n this.constructor =" + this.constructor);
}
func();  //this指向window对象
new func();  //this指向实例对象
cunc.call(1);  //this指向数值对象

위의 예에서 func()를 직접 호출하면 이는 window 객체를 나타냅니다. new 명령을 사용하여 함수를 호출하면 새 인스턴스 개체가 생성되고 이는 새로 생성된 인스턴스 개체를 가리킵니다.

call() 메소드를 사용하여 func() 함수를 실행할 때 call() 메소드의 매개변수 값이 숫자 1이므로 JavaScript 엔진은 강제로 숫자 1을 숫자 객체로 캡슐화합니다. 이 숫자 객체를 가리킬 것입니다.

4. 이벤트 처리

이벤트 처리 함수 요약에서 이는 항상 이벤트를 트리거한 개체를 가리킵니다.

<input type="button" value="测试按钮" />
<script>
    var button = document.getElementsByTagName("put")[0];
    var obj = {};
    obj.func = function () {
        if (this == obj) console.log("this = obj");
        if (this == window) console.log("this = window");
        if (this == button) console.log("this = button");
    }
    button.onclick = obj.func;
</script>

위 코드에서 func()에 포함된 this는 더 이상 객체 obj를 가리키지 않고 버튼 버튼을 가리킵니다. 왜냐하면 func()가 버튼의 이벤트 핸들러에 전달된 후 호출되고 실행되기 때문입니다.

DOM2 레벨 표준을 사용하여 이벤트 핸들러 기능을 등록하는 경우 절차는 다음과 같습니다.

if (window.attachEvent) {  //兼容IE模型
    button.attachEvent("onclick", obj.func);
} else {  //兼容DOM标准模型
    button.addEventListener("click", obj.func, true);
}

IE 브라우저에서는 window 객체와 버튼 객체를 가리키지만, DOM 표준 브라우저에서는 버튼 개체를 가리킵니다. IE 브라우저에서 attachmentEvent()는 창 개체의 메서드이기 때문에 이 메서드가 호출되면 이 메서드는 창 개체를 가리킵니다.

브라우저 호환성 문제를 해결하려면 call() 또는 apply() 메서드를 호출하여 func() 메서드가 객체 obj에서 실행되도록 하면 여러 브라우저가 이를 다르게 구문 분석하는 문제를 피할 수 있습니다.

if (window.attachEvent) {
    button.attachEvent("onclick", function () {  //用闭包封装call()方法强制执行func()
        obj.func.call(obj);
    });
} else {
    button.attachEventListener("onclick", function () {
        obj.func.call(obj);
    }, true);
}

다시 실행하면 func()에 포함된 this는 항상 객체 obj를 가리킵니다.

5. 타이머

타이머를 사용하여 함수를 호출하세요.

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window对象");
    else if (this.constructor == arguments.callee) console.log("this = 实例对象");
    else console.log("this == 其他对象 \n this.constructor =" + this.constructor);
}
setTimeOut(obj.func, 100);

IE에서는 window 객체와 버튼 객체를 가리킨다. 구체적인 이유는 위에서 설명한 attachmentEvent() 메소드와 같다. DOM 호환 브라우저에서 이는 버튼 객체가 아닌 창 객체를 가리킵니다.

setTimeOut() 메소드는 전역 범위에서 실행되므로 window 객체를 가리킵니다. 브라우저 호환성 문제를 해결하려면 호출 또는 적용 메서드를 사용할 수 있습니다.

setTimeOut (function () {
    obj.func.call(obj);
}, 100);

【추천 학습: javascript 고급 튜토리얼】

위 내용은 이것은 자바스크립트에서 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!