JavaScript中this的四種情況（非嚴格模式） 1、當this所在函數是事件處理函數時，this指向事件源。2、當this所在函數是構造函數時，this指向new出來的對象。3、this所在函數的所屬對象是誰，this指向函數所屬對象。4、當this所在函數沒有所屬對象，this指向wind ...
JavaScript中this的四種情況（非嚴格模式）
1、當this所在函數是事件處理函數時，this指向事件源。
2、當this所在函數是構造函數時，this指向new出來的對象。
3、this所在函數的所屬對象是誰，this指向函數所屬對象。
4、當this所在函數沒有所屬對象，this指向window對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="box" class="box" style="height: 100px; width:100px; background:#f3f3f3;"></div>
</body>
</html>
<script type="text/javascript">
//this
//1、當this所在函數是事件處理函數時，this是事件源。
document.getElementById("box").onclick = function(){
console.log(this); //this就是div.box
}
//2、當this所在函數是構造函數時，this是new出來的對象。
function Person(name){
this.name = name;//this就是new出來的對象zhaosi
console.log(this.name)
this.eat = function(){
console.log(this.name+"is eatting");
}
}
var zhaosi = new Person("趙四");
// 3、this所在函數的所屬對象是誰，this就是誰。
function Person(name){
this.name = name;//就是new出來的對象liuneng
this.eat = function(){
console.log(this.name+"is eatting");;//這個this是誰，誰調用eat，或者說調用eat時，前面的對象是誰，this就是誰
}
}
var liuneng = new Person("劉能");
liuneng.eat();//這句話執行時，eat函數內部的this就是p1
var laoqi = new Person("老七");
laoqi.eat();//這句話執行時，eat函數內部的this就是p2
//4、當this所在函數沒有所屬對象，this是window對象。全局變數都是window對象的屬性。
function test(){
console.log(this);//這個this就是window
}
test();//window對象可以省略，所以，這句話就等價於window.test();
//全局變數是window對象的屬性
var t = "大腳";
console.log(window.t);
var obj = {
name:"李四"
}
console.log(window.obj.name);
//this轉移是經常碰到的問題
//1)、註意區分this所在函數調用時的隸屬對象
//2)、如果不希望被this折磨可以選用ES6中的箭頭函數。
</script>
