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

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

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

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

1. 기본 바인딩#🎜🎜 #

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

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

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

//隐式绑定
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"

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;
};

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

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

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

   로그인 후 복사

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)

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


2.nodejs

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

https:// www.zhihu.com/questio...func(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!