JavaScript的this,你真的懂了吗

this关键字的定义数组

普通定义:当前发生事件的对象。浏览器

通俗定义:当前的方法属于谁。app

全局做用域中的this

console.log(this); // Window全局对象

在浏览器中执行,将会获得一个全局的Window对象。函数

在浏览器中执行,将会获得一个全局的Window对象。

一、纯粹的函数直接调用

var x = 1;
function test(){
 this.x = 0;
}
test();
alert(x); //0

this做为全局对象Global调用,属于全局通用性。this

二、做为对象的方法调用

function test(){
 alert(this.x);
}
var o = {}; //声明一个对象
o.x = 1; //给对象添加一个属性
o.m = test; //给对象添加一个方法
o.m(); // 1 调用方法,结果为1

当函数做为对象的方法被调用时,this指向当前调用该方法的对象。spa

三、做为构造函数调用

var x = 2;
function test(){
 this.x = 1;
}
var o = new test();
alert(o.x); //1
alert(x); //2

全局对象中的属性x并无被改变,此时this指向该构造函数建立的对象。code

四、apply、call、bind调用

var x = 0;
function test(){
 alert(this.x);
}
var o = {}; //声明一个对象
o.x = 1; //给对象添加一个属性
o.m = test; //给对象添加一个方法
o.m.apply(); //0
o.m.apply(o); //1

o.m.call(); //0
o.m.call(o); //1

call和apply都是Function对象的方法,均可以用来动态改变this的指向,达成函数复用的目的。对象

两个方法的第一个参数就是this,不传参数默认为全局对象,传入参数表示当前传入的对象。事件

注意:两种调用方式产生的结果彻底相同。若是你已经有一个数组,使用apply方法,只有一个单独的变量,则用call方法。作用域

嵌套函数做用域中的this

var a = 1;
function test(){
 console.log(this.a); // 2
 var self = this;
 function test2(){
  console.log(self.a); // 2
 }
 test2();
}
var o = {}; //声明一个对象
o.a = 2; //给对象添加一个属性
o.m = test; //给对象添加一个方法
o.m();

嵌套函数中,为了防止this做用域的混乱使用,一般自定义一个变量用于存储this,而后在嵌套函数内部使用这个变量,如代码中的self。

相关文章
相关标签/搜索