this指向问题 php,js中的this指向问题

本文详细探讨JavaScript中this的关键特性,包括在方法、单独使用、函数、事件和箭头函数中的行为,以及如何通过call()和apply()改变this指向。重点讲解了不同上下文下的this指向,并举例说明。
摘要由CSDN通过智能技术生成

在JavaScript中,this不是固定不变的,它的指向取决于上下文环境,一般的,认为this指向使用它时所在的对象。主要有以下几类指向:

在方法中,this 表示该方法所属的对象。

如果单独使用,this 表示全局对象。

在函数中,this 表示全局对象。

在函数中,在严格模式下,this 是未定义的(undefined)。

在事件中,this 表示接收事件的元素。

类似 call() 和 apply() 方法可以将 this 引用到任何对象。

一、方法中的thisvar isObject = {

a: 'inner object',

innerFunction: function() {

return this.a;

}

}

console.log('方法里的this指向:', isObject.innerFunction());

//输出结果:方法里的this指向: inner object

由上面代码可以看出,因为对象调用了其内部方法innerFunction(),所以此时this指向使用它时所在的对象,即isObject对象。

如果我们此时在innerFunction()函数里return this,此时控制台打印出Object {a: "inner object", innerFunction: },表示this正好指向isObject对象。

二、单独使用thisvar x = this;

console.log("this指向:", x);

//输出结果:this指向: Window {postMessage: , blur: , focus: , close: , parent: Window, …}

可以看出,当单独使用this时,this指向window对象

三、函数中使用thisvar variable = 'test';

function outerFunction() {

var variable = 0;

return this.variable;

}

console.log('函数中this指向:', outerFunction());

//输出结果:函数中this指向:test

从上面代码看出,函数中的this指向window对象,所以打印出的结果是test而不是0。

如果我们此时在outerFunction()函数里return this,此时控制台打印出Window {postMessage: , blur: , focus: , close: , parent: Window, …},表示this指向window对象。

值的注意的一点是在严格模式中,函数并不能绑定到this上,所以这时候的this是undefined。

再来看一个例子:var a = 21;

var isObject = {

a: 'inner object',

innerFunction: function() {

return this.a;

}

}

var useObject = isObject.innerFunction;

console.log('结果:', useObject());

//输出结果:结果:21

可能有人会问,为什么输出的不是inner object,而是21,注意,this指向的是使用它时所在的对象,因为isObject.innerFunction将自身赋给全局变量useObject,所以此时useObject保存的是innerFunction()方法,this指向全局。

四、事件中的this

点我我就消失

很显然,在HTML事件句柄中,this指向了接收事件的HTML元素。

五、箭头函数中的this

需要注意的是,箭头函数内部并没有绑定this的机制,所以this的指向是固定的,即指向当前定义时所在的对象(注意,一般情况下,上下文环境不做变化,this为全局对象,即this定义在顶层环境)。也可以说,内部的this就是外层代码块的this。var isObject = {

a: 'hhh',

functions: () => {

console.log("对象:",this);

}

}

isObject.functions();

//输出结果:对象:Window {postMessage: , blur: , focus: , close: , parent: Window, …}

可以看到,同样是对象方法,箭头函数里的this指向的是window对象。

再来看一个例子:var isObject = {

a: 'hhh',

functions: () => {

this.a = 0

console.log("结果:",this.a);

}

}

isObject.functions();

//输出结果:结果:0

此时,在isObject对象functions方法内部定义了一个属性a,它属于this全局对象,所以输出结果为0。

难道this只能指向window了吗?答案是否定的,再来看一个例子:function myFunction() {

var innerfunction = () => {

console.log('x:', this.x);

}

return innerfunction;

}

var test = myFunction.call({x: 1});

test();

//输出结果:1

从上面代码可以看出,this此时指向myFunction里的对象{x:1},所以打印出的结果为1。注意,因为箭头函数本身并不能绑定this,所以它不能使用apply,call,bind方法来改变上下文环境。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值