如何理解JavaScript中的this

var person = {
    firstName   :"Penelope",
    lastName    :"Barrymore",
    //因为下方的showFullName方法使用了“this”关键词而且该方法是在person对象里定义的，
    //那么“this”就会储存着person对象的值，因为该对象会调用showFullName()方法
    showFullName:function () {
    console.log (this.firstName + " " + this.lastName);
    }
    }
    person.showFullName (); // Penelope Barrymore

$("button").click (function (event) {
    //$(this)会储存按钮对象($("button"))的值
    //因为click()方法是由该按钮对象调用的
    console.log ($ (this).prop ("name"));
});

var firstName = "Peter",
lastName = "Ally";
​
function showFullName () {
    //这个函数里的"this"会储存window对象的值
    //因为与变量firstName和lastName一样，showFullName()函数是在全局作用域里定义的
    console.log (this.firstName + " " + this.lastName);
 }
​
var person = {
    firstName   :"Penelope",
    lastName    :"Barrymore",
    showFullName:function () {
    //这行的"this"指代person对象，因为showFullName函数会被person对象调用
        console.log (this.firstName + " " + this.lastName);
    }
}
​
showFullName (); // Peter Ally​
​
//因为所有全局变量和函数都是在window对象里定义的，所以：
window.showFullName (); // Peter Ally​
​
//showFullName()方法定义于person对象里，它里面的"this"依旧指代person对象，所以：
person.showFullName (); // Penelope Barrymore

var person = {
    firstName   :"Penelope",
    lastName    :"Barrymore",
    showFullName:function () {
        // “上下文环境”
        console.log (this.firstName + " " + this.lastName);
    }
}
​
//当调用在person对象上定义的showFullName方法时，其“上下文环境”就是person对象
//showFullName()方法里的this储存着person对象的值
person.showFullName (); // Penelope Barrymore​
​
//如果用其他对象来调用showFullName()方法：
​var anotherPerson = {
    firstName   :"Rohit",
    lastName    :"Khan"​
};
​
//可以使用apply方法将this的设为特定的值 - 稍微会继续讨论apply()方法
//无论哪个对象调用了this，this都会获取该对象的值，所以：
person.showFullName.apply (anotherPerson); // Rohit Khan​
​
//所以上下文环境现在就是anotherPerson对象，因为是它通过使用apply()方法调用了person.showFullName ()这个方法

var user = {
    data:[
        {name:"T. Woods", age:37},
        {name:"P. Mickelson", age:43}
    ],
    clickHandler:function (event) {
        var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // 0到1之间的随机整数
        //这行代码从data数组里随机获取名字（person's nam）和年龄（age）并输入
        console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
    }
}

$("button").click (user.clickHandler);

$("button").click (user.clickHandler.bind (user)); // P. Mickelson 43

var user = {
    tournament:"The Masters",
    data:[
        {name:"T. Woods", age:37},
        {name:"P. Mickelson", age:43}
    ],
    clickHandler:function () {
        //在这里使用this.data是没问题的，因为“this”指代的是user对象而data是user对象的属性
        this.data.forEach (function (person) {
            //但在这个匿名函数（作为forEach方法的参数）里，“this”不再指代user对象
            //这个内部函数无法访问外部函数里的“this”
            console.log ("What is This referring to? " + this); //[object Window]​

            console.log (person.name + " is playing at " + this.tournament);
            // T. Woods is playing at undefined​
            // P. Mickelson is playing at undefined​
        })
    }
​
}
​
user.clickHandler(); // What is "this" referring to? [object Window]

var user = {
    tournament:"The Masters",
    data:[
        {name:"T. Woods", age:37},
        {name:"P. Mickelson", age:43}
    ],
    clickHandler:function (event) {
        //要在“this”指代user对象时获取到它的值，我们必须将其值传给其他变量：将“this”的值传给theUserObj变量，以待后面使用
        var theUserObj = this;
        this.data.forEach (function (person) {
            //不用this.tournament，而用theUserObj.tournament​
            console.log (person.name + " is playing at " + theUserObj.tournament);
        })
    }
}
​
user.clickHandler();
// T. Woods is playing at The Masters​
//  P. Mickelson is playing at The Masters

// 程序员的常用手法
var that = this;

//此处的data是全局变量
var data = [
    {name:"Samantha", age:12},
    {name:"Alexis", age:14}
];
​
var user = {
    //此处的data是user对象的属性
    data:[
        {name:"T. Woods", age:37},
        {name:"P. Mickelson", age:43}
    ],
    showData:function (event) {
        var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // 0到1之间的随机整数
    ​
        //这行代码由data数组里产生一个随机的person数据加到text字段里
        console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
    }
}
​
//将user.showData赋值给变量
var showUserData = user.showData;
​
//当执行showUserData()函数时，控制台输出的值来自全局的data数组，而不是user对象的data数组
showUserData (); // Samantha 12 (来自全局的data数组)​

//将showData方法绑定到user对象上
var showUserData = user.showData.bind (user);
​
//因为this关键词绑定到了user对象上，现在得到的是user对象的值
showUserData (); // P. Mickelson 43

//这里有两个对象，一个有叫avg()的方法而另外一个没有
//所以我们会让另外一个对象借用一下该方法
var gameController = {
    scores  :[20, 34, 55, 46, 77],
    avgScore:null,
    players :[
        {name:"Tommy", playerID:987, age:23},
        {name:"Pau", playerID:87, age:33}
    ]
}
​
var appController = {
    scores:[900, 845, 809, 950],
    avgScore:null,
    avg:function () {
        var sumOfScores = this.scores.reduce (function (prev, cur, index, array) {
            return prev + cur;
    });
    ​
        this.avgScore = sumOfScores / this.scores.length;
    }
}
​
//如果运行下方代码，gameController.avgScore属性就会被设置为由appController对象"scores"数组得出的平均分数

//别运行下面这行代码，它只作展示用。让appController.avgScore的值为null
gameController.avgScore = appController.avg();

//注意使用的是apply()方法，所以第二个参数必须是数组-这些参数最后都会被传给appController.avg()方法
appController.avg.apply (gameController, gameController.scores);
​
//gameController对象上的avgScore属性成功设置，尽管avg()方法是从appController对象借过来的
console.log (gameController.avgScore); // 46.4​
​
//appController.avgScore依然未null，其值没有被更新，只有gameController.avgScore的值被更新了
console.log (appController.avgScore); // null

var m1 = {
    message: 'This is A'
} 
var m2 = {
    message: 'This is B'
}  
 
function showMsg() {
    alert(this.message)
}
 
showMsg() // undefined
showMsg.call(m1) // 'This is A'
showMsg.call(m2) // 'This is B'