ECMA Javascript(예제 포함)에서 이에 대한 심층적인 이해

이 기사는 ECMA Javascript에서 이에 대한 심층적인 이해를 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이것은 실제로 함수가 호출될 때 발생하는 바인딩입니다. 그것이 가리키는 것은 전적으로 함수가 호출되는 위치(즉, 함수가 호출되는 방식)에 따라 다릅니다.

네 가지 규칙: (JS를 모름)

1. 기본 바인딩#🎜🎜 #

function foo() {
    console.log( this.a );
}
var a = 2;
foo(); // 2

엄격 모드인지 아닌지에 관계없이 전역 실행 컨텍스트(함수 본문 외부)에서는 전역 개체를 참조합니다. (MDN)

엄격 모드에서는 실행 컨텍스트에 들어갈 때 해당 값을 유지합니다. 실행 컨텍스트에 의해 정의되지 않은 경우 정의되지 않은 상태로 유지됩니다. (MDN)

function foo() {
    "use strict";
    console.log( this.a );
}
var a = 2;
foo(); // TypeError: this is undefined

2. 암시적 바인딩/손실

함수가 객체에서 메서드로 호출되는 경우 해당 객체는 함수를 호출하는 객체이며 바인딩에만 영향을 미칩니다. 가장 가까운 멤버 참조로. (MDN)

//隐式绑定
function foo() {
    console.log( this.a );
}
var obj2 = {
    a: 42,
    foo: foo
};
var obj1 = {
    a: 2,
    obj2: obj2
};
obj1.obj2.foo(); // 42

//隐式丢失
function foo() {
    console.log( this.a );
}
function doFoo(fn) {
    // fn 其实引用的是 foo
    fn(); // <-- 调用位置！
}
var obj = {
    a: 2,
    foo: foo
};
var a = "oops, global"; // a 是全局对象的属性
doFoo( obj.foo ); // "oops, global"

3. 디스플레이 바인딩

이 값을 한 컨텍스트에서 다른 컨텍스트로 전달하려면 호출 또는 적용 메소드를 사용해야 합니다. (MDN)

f.bind(someObject)를 호출하면 f와 동일한 함수 본문 및 범위를 가진 함수가 생성되지만, 이 새 함수에서는 이것이 어떻게 실행되었는지에 관계없이 바인딩의 첫 번째 매개변수에 영구적으로 바인딩됩니다. 함수가 호출됩니다.

var obj = {
    count: 0,
    cool: function coolFn() {
    if (this.count < 1) {
        setTimeout( function timer(){
            this.count++; // this 是安全的
                            // 因为 bind(..)
            console.log( "more awesome" );
            }.bind( this ), 100 ); // look, bind()!
        }
    }
};
obj.cool(); // 更酷了。

하드 바인딩

모든 매개변수를 전달하고 수신된 모든 값을 반환하는 래퍼 함수를 ​​만듭니다.

하드 바인딩을 사용하면 함수의 유연성이 크게 감소하므로 이를 수정하기 위해 암시적 바인딩이나 명시적 바인딩을 사용할 수 없습니다.

// 简单的辅助绑定函数
function bind(fn, obj) {
    return function() {
        return fn.apply( obj, arguments );
    };
}

소프트 바인딩

기본 바인딩에 전역 개체와 정의되지 않은 값을 지정하면 암시적 기능을 유지하면서 하드 바인딩과 동일한 효과를 얻을 수 있습니다. 이를 수정하려면 바인딩하거나 명시적으로 바인딩해야 합니다.

Function.prototype.softBind = function(obj) {
    var fn = this;
    var curried = [].slice.call( arguments, 1 );// 捕获所有 curried 参数
    var bound = function() {
        return fn.apply(
            (!this || this === (window || global))?obj : this
            curried.concat.apply( curried, arguments )
        );
    };
    bound.prototype = Object.create( fn.prototype );
    return bound;
};

4. 새 바인딩

함수가 생성자로 사용되는 경우(new 키워드 사용) 해당 this는 생성되는 새 객체에 바인딩됩니다. (MDN)

new를 사용하여 함수를 호출하거나 생성자 호출이 발생하면 자동으로 다음 작업이 수행됩니다(JS는 모르실 겁니다)

#🎜 🎜# 새 개체를 생성(또는 구성)합니다.
이 새 개체는 [[ 프로토타입 ]] 연결로 실행됩니다.
이 새 개체는 함수 호출의 this에 바인딩됩니다.
함수가 다른 개체를 반환하지 않으면 새 표현식의 함수 호출이 자동으로 이 새 개체를 반환합니다.

4. function foo(a) {
       this.a = a;
   }
   var bar = new foo(2);
   console.log( bar.a ); // 2

4가지 규칙 우선순위

new 바인딩> 암시적 바인딩> #

new(새 바인딩)에서 호출되는 함수인가요? 그렇다면 새로 생성된 객체에 바인딩됩니다.

 var bar = new foo()

1. 함수는 call , Apply(명시적 바인딩) 또는 하드 바인딩을 통해 호출됩니까? 그렇다면 지정된 개체에 바인딩됩니다.
2. 추가:

   null 또는 정의되지 않음을 바인딩하는 경우 기본 바인딩 규칙이 실제로 적용됩니다.
   

    var bar = foo.call(obj2)

   함수가 컨텍스트 객체에서 호출됩니까(암시적으로 바인딩됨)? 그렇다면 이는 해당 컨텍스트 개체에 바인딩됩니다.

 var bar = obj1.foo()

3. 둘 다 아니라면 기본 바인딩을 사용하세요. 엄격 모드에 있는 경우 undefound에 바인딩되고, 그렇지 않으면 전역 개체에 바인딩됩니다.

 var bar = foo()

4. 그 중:

   간접 참조 함수는 기본 바인딩 규칙을 적용합니다

   function foo() {
       console.log( this.a );
   }
   var a = 2;
   var o = { a: 3, foo: foo };
   var p = { a: 4 };
   o.foo(); // 3
   (p.foo = o.foo)(); // 2

예외

1. 화살표 함수

화살표 함수는 이 네 가지 표준 규칙을 사용하지 않지만 외부(함수 또는 전역) 범위를 사용하여 이를 결정합니다. 화살표 함수에서 이는 주변 어휘 컨텍스트의 this와 일치합니다. (MDN)

Arrow 함수는 외부 함수 호출의 바인딩을 상속합니다(바인딩 대상에 관계 없음). 이것은 실제로 self = this와 동일한 메커니즘입니다.

화살표 기능 바인딩은 수정할 수 없습니다.


2.nodejs

setTimeout(function() { 
    console.log(this) 
    //浏览器中：window 
    //nodejs中：Timeout实例
}, 0)

기타 설명

https:// www.zhihu.com/questio...func(p1, p2)는

func.call(undefine, p1, p2)

obj.child.method와 동일합니다. (p1, p2)는
obj.child.method.call(obj.child, p1, p2)

과 동일합니다. 전달한 컨텍스트가 null이거나 정의되지 않은 경우 창 개체는 is 기본 컨텍스트(엄격 모드의 기본 컨텍스트는 정의되지 않음)

Example

    var number = 50;
    var obj = {
        number: 60,
        getNum: function () {
        var number = 70;
        return this.number;
    }
    }; 

    alert(obj.getNum());
    alert(obj.getNum.call());
    alert(obj.getNum.call({number:20}));

위 내용은 ECMA Javascript(예제 포함)에서 이에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!