JavaScript中this关键字的深入分析说明

2020-06-16 11:34:00 2417 1 编辑:深圳网站设计 来源:互联网

this关键字的定义

this是Javascript语言的一个关键字。

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

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

全局作用域中的this

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

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

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

1、纯粹的函数直接调用

var x = 1;

function test(){

 this.x = 0;

}

test();

alert(x); //0

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

2、作为对象的方法调用

function test(){

 alert(this.x);

}

var o = {}; //声明一个对象

o.x = 1; //给对象添加一个属性

o.m = test; //给对象添加一个方法

o.m(); // 1 调用方法,结果为1

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

3、作为构造函数调用

var x = 2;

function test(){

 this.x = 1;

}

var o = new test();

alert(o.x); //1

alert(x); //2

var x = 2;

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

4、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。

网站建设动画.gif

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通