目录
1、普通函数的this指向。
2、构造函数的this指向。
3、强势转换this指向。
作为一个写代码的,经常坐在办公室,时间久了就容易脖子酸痛,我们都喜欢去按摸店找小红做一下服务,我就以按摸来写一篇js的this指向问题。
假如你常去的怡红院的高级技师叫小红,而你老婆的名字也叫小红,那我们找小红按摩的时候必须找对小红,毕竟这是性命攸关的事。所以this就是帮我们找对指向的办法。
例子1: 调用对象是window对象,window是js的全局对象。
var xiaoHong = "你tm敢让老娘帮你按摩?活腻了"; function anMo() { var xiaoHong = "大爷,小红帮您按摩吧!"; console.log(this.xiaoHong); } anMo(); // 你tm敢让老娘帮你按摩?活腻了本来想让小红帮忙按摸一下,于是执行了anMo方法,但此时是在家里(window),anMo()相当于window.anMo()。那怎么样才能让怡红院里温柔可爱的小红为我们服务呢?我们需要改一下调用对象(怡红院)。
var xiaoHong = "你tm敢让老娘帮你按摩?活腻了"; var yiHongYuan = { xiaoHong: "大爷,小红帮您按摩吧!", anMo() { console.log(this.xiaoHong); }, }; yiHongYuan.anMo(); // 大爷,小红帮您按摩吧!我们找到了yiHongYuan这个对象,通过yiHongYuan调用anMo(),this就是指向怡红院的小红了,成功躲过老婆小红的追杀。
本次按摩结束了,但是舍不得温柔可爱的小红,于是向怡红院购买了服务,我们想把yiHongYuan.anMo带回家享受,可以吗?毕竟调用对象是yiHongYuan嘛。
var xiaoHong = "你tm敢让老娘帮你按摩?活腻了"; var yiHongYuan = { xiaoHong: "大爷,小红帮您按摩吧!", anMo() { console.log(this.xiaoHong); }, }; var jiaLi = yiHongYuan.anMo; // 也就是这一句 jiaLi(); // 你tm敢让老娘帮你按摩?活腻了但是事实很残酷,jiaLi()的输出结果还是老婆小红?为什么呢?我已经让yiHongYuan调用anMo了。原因是yiHongYuan.anMo是赋值给jiaLi的,但是调用jiaLi的还是window,所以this指向window,当然找到的就是家里的小红了。。。。。所以同志们千万别把按摩带回家!
爱情是会淡的,你不再喜欢怡红院的小红,你决定换一个人为你服务。这个选择的过程就是一个this指向的问题。
function selectGirl(girl) { this.girlName = girl; } var girl = new selectGirl("翠翠"); console.log(girl.girlName); // 翠翠之所以girl能找到selectGirl中的this.girlName,是因为new关键字能把this指向new出来的对象girl,我们就能随便指定一个小姐姐帮我们按摸。比如:
function selectGirl(girl) { this.girlName = girl; } var girl = new selectGirl("翠翠"); console.log(girl.girlName); // 翠翠 var girl = new selectGirl("小花儿"); console.log(girl.girlName); // 小花儿但是有一种特殊情况,我们选择了翠翠,但是翠翠的亲戚小姨妈来看她了,于是她给我返回了一个空对象,我就找不到她了。
function selectGirl(girl) { this.girlName = girl; return {}; // 返回空对象 、 或者()=>{},return具体的对象不出现undefined的情况,例如1,undefined,null } var girl = new selectGirl("翠翠"); console.log(girl.girlName); // undefined爱情这种事不能强人所难,于是我找到了小花儿的信息,打电话给小花。
xiaoHua = { girlName: "小花儿", }; function selectGirl() { console.log(this.girlName); } selectGirl.call(xiaoHua); // 小花儿call()可以切换函数执行的上下文环境,即改变this的指向,除call外,还有apply。
一场愉快的按摸服务就这样愉快的结束了。
参考链接:
彻底理解js中this的指向,不必硬背。
JavaScript的this关键字 - Web前端工程师面试题讲解