浅谈js中的this问题


Posted in Javascript onAugust 31, 2017

this

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上

this的最终指向的是那个调用它的对象(这里其实并不完全对,this的指向有时候会很微妙,得靠自己去慢慢体会)

只有方法在对象上,对象调用当前方法,指向当前对象

function fnThis(){
 let user='js';
 console.log(this.user)//undefined
 console.log(this)//global(window)
}

fnThis();

这里为什么会输出一个全局的对象?因为我们申明的函数,在全局里,现在执行这个函数

实际上是全局在调用

let obj={
 user:'js',
 fn:function(){
 console.log(this.user)
 }
obj.fn();

这里是obj在调用,所以指向我们的obj,这并不能说明,我们一开始就说的this最终调用他的那个

对象

let obj={
 user:'js',
 objTwo:{
 user:'css',
 fn:function(){
  console.log(this.user)
 }
 }
}

obj.objTwo.fn();

这里只是指向了obj2,而并没有指向最终调用它的obj.

来个料咋们看看this这家伙

<button id="myBtn" value="按钮">按钮</button>
<script>

let myBtn=document.querySelector("#myBtn")
let fn=function(){
console.log(this);
}
myBtn.onclick=function(){

fn();//输出的全局

console.log(this);//输出的是这个button
}
</script>

这里从表面看,会认为第一个输出的是这个btn按钮,不是说谁调用指向谁么,但是咋们仔细看这个是btn在调用么???

其实是这个点击事件的匿名函数在调用,而这fn()本身是全局上下文的函数,它的this指向的是全局,它是作为这个匿名函数的普通函数,自然指向的全局

我们如果这样写

myBtn.onclick=fn;//btn点击的时候就指向这个btn了,这时候输出结果为这个button,

总结

1. 全局上下文,或者普通函数上下文里面的this,包括函数里面的普通函数,都是指向全局
2. 在对象方法里面的this指向该对象
3. 在事件方法里面的this指向发生事件的这个对象

特殊情况

let obj={
 user:'js',
 objTwo:{
 user:'css',
 fn:function(){
  console.log(this.user)
  console.log(this)
 }
 }
}

let objThre=obj.objTwo.fn;

objThree();

把函数赋值给了objThree,而objThree是在全局上,所以输出的是全局

补充

let chinesePeople=function(){
 this.name='张飞';
 return obj
 }

如果返回的是对象,this就指向返回的那个对象,否则就指向实例对象

改变的几种方式

let obj={a:80}
let objTwo={
 a:70,
 fn:function(){
  console.log(this.a);
 }
}

objTwo.fn.call(obj);
调用一个方法,并改变其this指向

objTwo.fn.apply(obj);
调用一个方法,并改变其this指向

前2者区别,在于后面的参数,一个是顺序,一个是数组

objTwo.fn.bind(obj)();

bind()方法会创建一个新函数,在绑定后,我们可以加括号立即执行,也可以等需要执行再执行

第一个参数对象,以后的顺序传参

new方法,其实是隐藏的调用了一个call的方法

以上这篇浅谈js中的this问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的作用域scope介绍
Dec 28 Javascript
jQuery.each()用法分享
Jul 31 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
js实现图片放大展示效果
Aug 30 #Javascript
详解js几个绕不开的事件兼容写法
Aug 30 #Javascript
JavaScript实现滑动导航栏效果
Aug 30 #Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 #Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 #Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 #Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 #Javascript
You might like
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
简单实现python画圆功能
2018/01/25 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python subprocess库的使用详解
2018/10/26 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python版百度语音识别功能
2019/07/09 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
Python定义一个Actor任务
2020/07/29 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
推荐信模板
2014/05/09 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
劳动模范获奖感言
2015/07/31 职场文书
考研经验交流会策划书
2015/11/02 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android