浅谈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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
node.js实现爬虫教程
Aug 25 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
详解JS函数防抖
Jun 05 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 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
咖啡与水的关系
2021/03/03 冲泡冲煮
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Python如何绘制日历图和热力图
2020/08/07 Python
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
汽车检测与维修个人求职信
2013/09/24 职场文书
社区服务活动小结
2014/07/08 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书