javascript 中的 this 关键字详解

1.javascript 中 什么是 this？
　　this 指的是当前行为执行的主体，或者是当前方法执行的主体
　　context:是当前行为或者方法执行的环境
　　实例：
　　xx 去北京饭店吃东西；上下文是“北京饭店”， this 是 xx

 

2. 那么如何判断一个函数在执行的时候，函数体内的 this 关键字是谁呢？主要有以下几条规律：

　　　　  1)一个函数体内的 this 关键字和这个函数的在哪里定义，哪里执行都没有关系;

      　　  2) 判断一个方法执行的时候，函数的执行主体是谁？主要看方法前面有没有点(.),如果函数执行的时候，函数前面有点 (.),点(.) 前面是谁,这个函数被执行的时候，函数体内的 this 关键字就是谁;

且看代码：

 函数执行的时候，前面没有点的情况：

function fn() {
    console.log(this.name);
}
window.name = 'windwo";
fn();

函数以 xx.fn的方式执行的时候：

person = {
   name:'alice',
}
function fn(){
    console.log(this.name);
}
//给person 对象添加一个方法
person.fn = fn;
person.fn();

 

      　　  3) 自执行函数执行的时候，函数体内的 this 关键字永远是 window 对象(和自执行函数在哪里执行没有任何关系);

window.name = 'window';
function fn(){
 console.log(this.name);
}
var person = {
   name: 'alice',
　　//匿名函数执行的时候， this 关键字指向 window
　　// 匿名函数的执行结果：person 对象的 sayName属性指向　fn
   sayName:(function(){
      console.log(this.name);
      return fn;
   })(),
   age:25
};
//执行结果：输出 window ,alice
person.sayName();

 

         4)给元素绑定的事件，事件触发的时候，被绑定到元素上的事件处理函数被执行的时候，函数的 this 关键字指向这个绑定事件的元素；

var oDiv = document.getElementsById("div1");
oDiv.onclick = fn;
function fn(){
    console.log(this.id);//输出结果是 div1
}

 

　　如果上面都理解了，下面来看这个例子，加深下映像，看看是否都真正理解了 this 关键字：

var number = 2;
var obj = {
number: 4,
fn1: (function() {
this.number *= 2;//window.number =4
number = number * 2;//undefined
var number = 3;//number =3
return function() {
this.number *= 2;
number *= 3;
alert(number)
}
})(),
db2: function() {
this.number *= 2;
}
}
var fn1 = obj.fn1;
alert(number);
fn1();
obj.fn1();
alert(window.number);
alert(obj.number);