This的指向总的来说分为四点:
1.作为对象的方法调用。
//1.作为对象的方法调用 var obj={ a:1, getA:function(){ alert(this===obj);//输出:ture alert(this.a);//输出:1 } };//即当函数作为对象的方法被调用时,this指向该对象 obj.getA();
2.作为普通函数调用。
//2.作为普通函数调用 window.name1="globalName1"; var getName1=function(){ return this.name1; }; console.log(getName1());//输出:globalName
或者
//或者这样 window.name2 = 'globalName2'; var myObject = { name: 'sven', getName2: function(){ return this.name2; } };//当函数不作为对象的调用时,也就是我们常说的普通函数方式,此时的this总是指全局对象,在浏览器的JavaScript里,这个全局对象时window对象。 var getName2= myObject.getName2; console.log( getName2() );//输出globalName
3.构造器调用。
//3.构造器调用 var MyClass = function(){ this.name = 'sven'; }; var obj = new MyClass(); alert ( obj.name ); //输出:sven //当使用new调用函数,该函数会返回一个对象,构造器里的this指向返回的对象,如上。
但用new构造器时要注意,要是构造器显式的返回一个object类型的对象,那么此次最终会返回那个显式的对象
var MyClass = function(){ this.name = 'sven'; return { //显式的返回一个对象 name: 'anne' } }; var obj = new MyClass(); alert ( obj.name ); //输出:anne //但用new构造器时要注意,要是构造器显式的返回一个object类型的对象,那么此次最终会返回那个显式的对象,如上。
不过当构造器不显式的返回任何数据,或者返回的是非object类型,则不会造成上述问题
var MyClass = function(){ this.name = 'sven'; return 'anne'; //返回字符串string类型 }; var obj = new MyClass(); alert ( obj.name ); // 输出:sven //不过当构造器不显式的返回任何数据,或者返回的是非object类型,则不会造成上述问题,如上。
4.Function.prototype.call或Function.prototype.apply调用
var obj1 = { name: 'sven', getName: function(){ return this.name; } }; var obj2 = { name: 'anne' }; console.log( obj1.getName() ); //输出: sven console.log( obj1.getName.call( obj2 ) ); //输出:anne //跟普通函数相比,Function.prototype.call或Function.prototype.apply能动态改变传入函数的this,如上。
除此之外:this指向在运行中决定,不在代码中决定
this在全局指向window对象
this放在函数内,在运行时,函数是谁调用的,this就指向谁
函数的两种调用方式:1.点式调用时,点前面是谁就调用谁指向谁如xx.f()。2.window.f()等价于f(),this指向window
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1">我是一个div</div> </body> <script> window.id = 'window'; document.getElementById( 'div1' ).onclick = function(){ alert ( this.id ); //输出:div1 var callback = function(){ alert ( this.id ); //输出:window。但其实有时我们希望他指向该div节点 };//其实当在ECMAScript5的strict模式下,上面这种情况下的this已经被规定为不会指向全局对象,而是undefined。 callback(); }; //鉴于此,我们可以可以用一个变量保存div节点的引用,如下。 window.id = 'window'; document.getElementById( 'div1' ).onclick = function(){ var that = this; //保存div的引用 var callback = function(){ alert ( that.id ); //输出:div1 }; callback(); }; //其实当在ECMAScript5的strict模式下,上面这种情况下的this已经被规定为不会指向全局对象,而是undefined,如下。 function func(){ "use strict"; alert ( this ); //输出:undefined } func(); </script> </html>