JavaScript This指向问题详解


Posted in Javascript onNovember 25, 2019

这篇文章主要介绍了JavaScript This指向问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方。

1.基本概念

MDN的官方解释:与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。

简而言之:

1.this指向的对象称为函数的上下文对象context;

2.this的指向取决于函数被调用方式

不管函数怎么调用的天花乱坠,我们只要记住这几点即可清晰的找出this的指向。

2.小试牛刀

function foo(){
 console.log(this);
}

面试官问你this指向哪里,当然大声回答不知道,原因:谁调用指向谁,函数都没被调用,确实不知道指向。

JavaScript This指向问题详解

小结:直接通过函数名来调用函数,this指向全局变量window;通过对象.函数名调用函数,this指向该对象。

3.DOM对象调用函数时this的指向问题

1.通过选择器选择元素加事件属性来绑定事件,this指向该DOM对象,例子如下:

document.getElementById('btn').onclick=function(){
  console.log('click'); //click
  console.log(this); //<button id="btn">button</button>
 }

2.直接在DOM标签中写事件,this指向window,我们可以通过吧this作为参数传入方法中再使用,例子如下

html:
<button onclick="modify()">add</button>
<span id="count">0</span>
<button onclick="modify()">reduce</button>

script:
// 操作方法
 function modify(){
  console.log(this); //window
 }

因为这个时候是直接调用方法的,所以this指向全局window对象,那么问题来了,我们想判断我们点击的是哪一个按钮,应该怎么做呢,我们可以把this的值作为参数传入方法中再使用,例子如下。

html:
<button onclick="modify(this)">add</button>
<span id="count">0</span>
<button onclick="modify(this)">reduce</button>

script:
// 操作方法
 function modify(_this){
  console.log(_this); 
// <button onclick="modify(this)">add</button>
// <button onclick="modify(this)">reduce</button>
 }

4.对象中this的指向问题

先看一个简单的例子:

var a=1;
function printA(){
 console.log(this.a);
}
var obj={
 a:2,
 foo:printA,
 bar:function(){
  printA();
 }
}
obj.foo(); //2
obj.bar(); //1var foo=obj.foo;foo(); //1

我们定义了一个全局变量a和一个打印a的全局变量方法,之后又定义了一个obj对象,其中包含a属性和foo,bar两个方法。当我们调用obj.foo()打印了2,调用obj.bar()打印了1.

分析:

不管printA在哪里定义的,我们this的指向只取决于被谁调用的。在obj.foo(),foo的属性值为printA,被obj直接调用,所以this指向obj,this.a就是obj.a=2了;

当我们调用obj.bar()时,bar的属性值为function(){printA()},没有明确哪个对象来调用printA方法,this默认指向全局对象window,所以this.a=window.a=1;

第三种情况我们把obj.foo值赋予了foo变量,在调用的时候就相当于是window.foo()了,打印1。

小结:this的指向不是函数声明是绑定的,而是在函数运行过程中动态绑定的。

5.改变this的指向方法:applay call bind

话不多话:写了一个例子,大家先看,万一比喻不恰当,大家能理解其中意思即可

var liLei={
 name:'liLei',
 money:10,
 buyPen:function(){
  this.money=this.money-1;
  console.log(this.name+" have money:"+this.money)
 }
}

var hanMeiMei={
 name:'hanMeiMei',
 money:20,
 buyPan:function(){
  this.money=this.money-2;
  console.log(this.name+" have money:"+this.money)
 }
}

liLei.buyPen(); // liLei have money:9
hanMeiMei.buyPan(); //hanMeiMei have money:18

例子很好理解,输出的结果相信大家也能看得明白,哪天,韩梅梅想买一个盆,她买不了,因为她还没有这个方法,她一想:我没有这个方法,但是李雷有啊,我打电话给李雷把钱他让他帮我买啊;后来李雷想买一个盘,实现方法也是如此。那么,在代码中如何实现呢?

JavaScript有好几个方法可以实现:call,apply,bind。

call方法:

语法:call(thisObj,Object)

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

liLei.buyPen.call(hanMeiMei); //hanMeiMei have money:19
hanMeiMei.buyPan.call(liLei); //liLei have money:8

apply方法:

语法:apply(thisObj,[argArray])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

liLei.buyPen.apply(hanMeiMei); //hanMeiMei have money:19
hanMeiMei.buyPan.apply(liLei); //liLei have money:8

bind方法:

liLei.buyPen.bind(hanMeiMei)(); //hanMeiMei have money:19
hanMeiMei.buyPan.apply(liLei)(); //liLei have money:8

小结:三种方法的相同指出是:可以改变this的指向,不同之处是:apply接受的参数为一个数组,call接收的参数为一个个独立的值;apply,call会直接调用方法,bind改变this的指向返回一个方法不调用。

注:有些低版本的浏览器不支持函数使用bind方法,我们在做浏览器兼容时可以加以判断,具体实现方法暂不赘述。

以上就是个人对于this的指向问题的理解,我们只需记住一点:this指向-谁调用,指向谁。不得不说JavaScript真是个奇妙的世界,文中有纰漏不足的地方,欢迎指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
Vue实现双向数据绑定
May 03 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
简单了解JavaScript sort方法
Nov 25 #Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 #Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 #Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 #Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 #Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 #Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php上传文件常见问题总结
2015/02/03 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
详解vue-cli3使用
2018/08/14 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python实现文件快照加密保护的方法
2015/06/30 Python
python——全排列数的生成方式
2020/02/26 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
大学学年自我鉴定
2013/10/28 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
协议书格式
2014/04/23 职场文书
农村门前三包责任书
2014/07/25 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
学习保证书100字
2015/02/26 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle