浅谈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 复制数组实现代码
Nov 26 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
javascrit中undefined和null的区别详解
Apr 07 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
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php实现的生成排列算法示例
2019/07/25 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
javascript操作数组详解
2014/12/17 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
python相对企业语言优势在哪
2020/06/12 Python
Python如何实现线程间通信
2020/07/30 Python
python跨文件使用全局变量的实现
2020/11/17 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
分布式数据库需要考虑哪些问题
2013/12/08 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
单位证明范文
2015/06/18 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL