JavaScript中的this指向问题

js中的this指向记住一个原则:一般情况下(箭头函数除外)this是在执行时才能确认,定义时没有办法确认。
下面这段代码会是输出什么呢?

var name = 'zhangsan';
var obj = {
    name: 'lisi',
    getName: function () {
        console.log(this.name)
    }
};
obj.getName();
obj.getName.call({name:'lili'})
var fn1 = obj.getName;
fn();

结果lisi lili zhangsan
由上我们可以看出this是在定义的时候才能确认,当然这是在一般情况下,稍后我们说在箭头函数中的情况。
1. 普通函数中

	function fn(){
		console.log(this)  //window
	}

我们可以理解成在全局作用域中执行的函数,window.fn也是返回的fn函数

2. 在定义的对象中

var obj = {
    name: 'lisi',
    getName: function () {
        console.log(this.name)
    }
};
obj.getName();

这个答案其实上面也已经给出了,此时的this指向被调用的对象obj,因此答案是lisi

3. 在call和apply中
call和apply作用是一样的,只是用法稍微不同,这里用call来举例子,call和apply强制性的改变了this的指向,传入的参数是谁,那么this就指向谁。

var obj = {
    name: 'lisi',
    getName: function () {
        console.log(this.name)
    }
};
var b = {
    name: 'xiaoxia'
};
obj.getName.call(b); 

so,答案是xiaoxia
4.在箭头函数中,this是指向定义时函数外部的对象。

function GetThis() {
    this.name = 'wuha'
    setTimeout(() => {
        console.log(this.name);

    } , 1000)
}
var a = new GetThis(); //wuha

如果是不用箭头函数,setInterval和setTimeout都是属于window对象上的方法,那么this就是指向window了,我们把上面的代码改改,在来举个例子?。

function GetThis() {
    this.name = 'wuha'
    setTimeout(function () {
        console.log(this);

    } , 1000)
}
var a = new GetThis(); //window

so,我们开头说在一般情况下,this是在执行时定义的,在箭头函数中,this是继承来至上下文的。

参考文献:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
参考文献:https://blog.csdn.net/xu4321083/article/details/79753800

购物商城项目采用PHP+mysql有以及html+css jq以及layer.js datatables bootstorap等插件等开发,采用了MVC模式,建立一个完善的电商系统,通过不同用户的不同需求,进行相应的调配和处理,提高对购买用户进行配置….zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计,皆可应用在项目、毕业设计、课程设计、期末/期/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值