使用Javascript循环发送PHP数据到Modal

当调用不属于您所在对象原型的函数时，this关键字不再引用您所在的对象。每个函数都使用this关键字来设置其作用域。当你用new关键字调用函数时，函数应该返回要绑定到该函数this的对象。

function AObject(){  // if you use the new keyword convention is to Capitalist
    .. do stuff ...
    this.aValue = 1;
    // if called with the new keyword this function will return this
}
var aObj = new AObject(); // Creates an object and binds this to that new object
aObj.aValue === 1; //  is true

也可以写成

function bObject(){
    var obj = {}; // create an object
    obj.bValue = 1;
    return obj;  // return object referance
}
var bObj = bObject();
bObj.bValue === 1;  // is true

知道何时以及如何使用this关键字需要一点经验，但我发现，当有疑问时，使用Function对象的方法bind()将'this'关键字设置为所需的对象是非常有用的。

错了。

function MyObj(){
    this.anArray = [0,1,2,3,4,5];
    this.mag = 2;
    var sumMag = 0;
    this.anArray.forEach(function(item){
        sumMag += item * this.mag; // the code will create an error as 
                                   // this points to the global this
    });
    console.log(sumMag); // the code never get here
}

要正确地做到这一点(并使用最佳实践)

function MyObj(){  // Always capabilities a class type object
    // always loft functions to the top of the function block
    // Some environments will insist you do this if you use "strict mode"
    // 
    var myItteratorFunc = ( function(item){  // note the bracket
        sumMag += item * this.mag;  
    } ).bind(this); // binds the current this to the function
    // or you can
    /*
    var myItteratorFunc = function(item){  
        sumMag += item * this.mag;  
    };
    var boundItterator = myItterator.bind(this);
    */
    this.anArray = [0,1,2,3,4,5];
    this.mag = 2;
    var sumMag = 0;
    this.anArray.forEach(myItteratorFunc);  // best practice and looks better
    console.log(sumMag); // logs -> 30
}

Bind对于setIntervale和setTimeout非常方便，对于许多DOM事件也很方便，比如onload

SetInterval方法错误

function MyClass(){
    this.tick = 0;
    setInterval(function(){
            this.tick += 1;  // fails
        },
        1000
    );
}

Onload方式错误

function MyClass(){
    this.imageLoaded = false;
    var img = new Image();
    img.src = "URL";
    img.onload = function(){
         this.imageLoaded = true; // wrong "this" is pointing to the img object
                                  // and now img.imageLoaded === true
    };
}

setInterval正确方法

function MyClass(){
    var tickFunction = (function(){  // loft function to top
        this.tick += 1;
    }).bind(this);  // bind it to this object
    this.tick = 0;
    setInterval(tickFunction,1000); 
}

Onload正确的方式，如果你需要引用当前的这个，否则this将引用加载的图像。

function MyClass(){
    var imgLoadFunc = (function(){ // loft function
         this.imageLoaded = true;
    }).bind(this);  // bind it to this
    this.imageLoaded = false;
    var img = new Image();
    img.src = "URL";
    img.onload = imgLoadFunc;
}

Bind也可以用于静态对象

var aThing = {
    numberLegs:2,
    canWalk:true,
    talk:(function(){   // create a method for aThing
        var str = "I have "+this.numberLegs;  // get the number of legs
        if(this.canWalk){  // can it this walk
            str += " and can walk.";
        }else{
            str += " but can't walk.";
        }
        console.log(str);
    }).bind(aThing)    // bind it to the static reference of aThing
};
aThing.talk(); // logs -> I have 2 legs and can walk.

有关bind的更多信息，请参阅MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind