メモ1(this)

3227 ワード

var a=1;
function fn1(){
console.log(a)      // 1
 var b=2
console.log(this.b)}   // b b, , undefined

fn1()    // return , undefined

関数ネストによって生成された内部関数のthisは親関数ではなく、グローバル変数です.
function fn0(){
    function fn(){
          console.log(this)
     }
     fn()
}

fn0();

settimeout、setIntervalの2つの関数が実行する関数thisもグローバルオブジェクトです
document.addEventListener('click',function(e){
     console.log(this);
     setTimeout(function(){
           console.log(this)
     },200)
},false)
document.addEventListener('click',function(e){
     console.log(this);
     var _this=this;
     setTimeout(function(){
           console.log(_this)  // this document
     },200)
},false)

コンストラクション関数として呼び出すオブジェクトメソッド呼び出し関数もオブジェクトであるため、関数はオブジェクトの属性として使用でき、このときこの関数はオブジェクトのメソッドと呼ばれ、この呼び出し方式を使用するとthisは自然にオブジェクトにバインドされます.
var obj1={
    name: 'Byron',     // , 
    fn:function(){
        console.log(this)
    }
 }
obj1.fn();  // Object {name: "Byron"}

var fn2=obj1.fn;
fn2();        // , window.fn2(), window

var obj2={
    name: 'Byron',     
    obj3:{
        fn:function(){
            console.log(this)
        }      
    }
 }
obj2.obj3.fn();   // Object{}, 

Domオブジェクトバインドイベントのthisは、イベントソースのDOMオブジェクトを表します(低バージョンIEにはBUGがあり、windowを指します)
任意の関数にはbindメソッドbindがあり、新しい関数を返し、関数内部のthisを入力された最初のパラメータにします.
var obj1={
    name: 'Byron',     
    fn:function(){
        console.log(this)
    }
 }

var obj3={a:3}
var fn3=obj1.fn.bind(obj3)
fn3();    // Object {a: 3}, obj1 fn obj3 ,this obj3

では、次の例について説明します.
document.addEventListener('click',function(e){
     console.log(this);
     setTimeout(function(){
           console.log(this)
     }.bind(this),200)     //this document
},false)

callとapplyを使用してthis call applyを設定し、関数を呼び出し、関数実行コンテキストとパラメータを入力します.
 :
fn.call(context, param1, param2...)

fn.apply(context, paramArray)

 this , call , apply 

例:
var value=100;
var obj4={
   value: 200
}
function fn4(a,b){
   console.log(this.value+a+b)
}
fn4(3,4)   // 107     this window( )
fn4.call(obj4,3,4)   // 207   this obj4, obj4 fn4 
fn4.apply(obj4,[3,4])  // apply call ,apply 

だから私たちはこの方法を持っています.Math.max.apply(null,arr)はMathのapplyメソッドを借りたものに相当するが,this値は変わらない
function joinStr(){
    console.log(Array.prototype.join.call(arguments))
    console.log(Array.prototype.join.call(arguments,'-'))// 
}
joinStr('a','b','c')
 :
function joinStr(){
  var join=Array.prototype.join.bind(arguments)
  console.log(join('-'))
}
joinStr('a','b','c')


3つの変数インスタンス変数静的変数プライベート変数
function ClassA(){
    var a = 1; // , 
    this.b = 2; // , 
}

ClassA.c = 3; //  , , 

console.log(a); // error
console.log(ClassA.b) // undefined
console.log(ClassA.c) //3

var classa = new ClassA();
console.log(classa.a);//undefined
console.log(classa.b);// 2
console.log(classa.c);//undefined