javascript学习笔记（2）————this

 1 //简单的学习JavaScript中this关键词
 2 //this在于我简单的理解就是谁调用了当前方法（函数），this就指向谁
 3 
 4 var a = 20;
 5 function fn1(){
 6     this.a = 10;
 7 }
 8 
 9 fn1();                 //其实这里隐含了window对象 window.fn1() === fn1()
10 alert(this.a);         //10;
11 alert(window.a);    //10;
12 
13 alert(fn1.a);        //undefined 
14                     //这里出现undefined，是因为fn1函数并没有自己调用a.
15 var fn1 = new fn1();
16 alert(fn1.a);         //10; 使用new关键字 js内部大概经历： 1）建立一个空对象 2）this关键字指向空对象 3）空对象赋值给fn1
17                     //所以出现this就指向fn1的情况
18 
19 //初学的时候很容易犯这样的错误
20 
21 var oBox = document.getElementById('bob');
22 oBox.onclick = function(){
23     this.style.backgroundColor = 'red'; //这里this指向oBox
24     function abc(){
25         this.style.display = 'block';    //这里this暂时不清楚指向谁，因为还没有被调用
26     }
27     abc();//刚开始的很容易犯迷糊，以为这里oBox的模型是块模型
28           //其实这里发生的window.style.display = 'block';
29           //因为其实window调用的。其实有个很简单的方式，因为 abc()前面就没有oBox.而是隐藏的window
30 }
31 
32 
33 //下面在对象下的调用
34 var color = 'black';
35 
36 var obj = {
37     color :'blue'，
38     saycolor : sayColor
39 }
40 
41 var obj2 = {
42     color :'red',
43     saycolor : sayColor
44 }
45 
46 function sayColor(){
47     console.log(this.color);
48 }
49 
50 sayColor(); //'black';
51 obj.saycolor();//'blue';
52 obj2.saycolor();//'red'