JavaScriptの初探査this

3142 ワード

最近ずっと《あなたの知らないjavascript》を見ています.とても感触があります.本の中のいくつかの観点と現実のいくつかの例を結び付けて、皆さんと私の体験を分かち合いたいです.
導入する
demo 1:
function foo(num){
  console.log(`foo:${num}`);
  this.count++;
  //console.log(this.count)
}

foo.count = 0;

var i;

for(i=0;i<10;i++){
  if(i>5){
   foo(i)
 }}

console.log(foo.count);
//foo:6
//foo:7
//foo:8
//foo:9
//0
demo 2:
debugger //debugger       
function foo(){
    var a = 2;
    this.bar();
}


function bar(){
    console.log(this.a)
}

foo()
バインディング規則
  • デフォルトバインディング
  • デフォルトのバインディングは全体を指します.修飾なしの関数参照で呼び出すのは標準バインディングです.
  • 暗黙的バインディング
  • あるオブジェクトによって所有されているか、または含まれているかどうかは、関数参照のコンテキスト参照関数(setTimeoutで呼び出されたような)に、暗黙的なバインディングが失われ、デフォルトのバインディングになります.
  • 明示バインディング
  • var a= {
    name: 'hello',
    test:function(x,y){
    console.log(this.a+""+x+""+y);
    }
    }
    var b = a.test()
    b()//undefined

    >3.1 call 
    >```
     b.call(a,x,y) // b this  a,     
    

    3.2 apply

     b.apply(a,[x,y]) // b this  a,     
    

    ps:call/apply this null , window
    3.3 bind

    var c=b.bind(a,x,y) // b this  a,                
    c(); 
    
    1. new

    new ,
    4.1
    4.2 [[ ]]
    4.3 this
    4.4 , new
    eg:

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

    ---
    
    ###     
    
                       。
    

    function Foo() {
    getName = function () { alert (1); };
    return this;
    }
    Foo.getName = function () { alert (2);};
    Foo.prototype.getName = function () { alert (3);};
    var getName = function () { alert (4);};
    function getName() { alert (5);}

    // :
    Foo.getName();//2
    getName();//4
    Foo().getName();//1
    getName();//1
    new Foo.getName();//2
    new Foo().getName();//3
    new new Foo().getName();//3

    
    1. Foo.getName():     Foo.getName = function () { alert (2);};
    
    2. getName():             ,                ;                    ;        
    
        ```
        var getName;
        function getName() { alert (5);}
        getName=function () { alert (4);};
        
        ```
    
    3. Foo().getName();     
    

    function Foo() {
    getName = function () { alert (1); };
    return this;
    } // getName 1

    4. getName()  // 1
    
    5. new Foo.getName() // new       .      new (Foo.getName)()
    
    6. new Foo().getName() // () > . > new ,   (new Foo()).getName() //new Foo   
     foo  ,     getName    this,     new    ,         
    
    7. new new Foo().getName() //    3