浅谈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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
js完整倒计时代码分享
Sep 18 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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读取xml方法介绍
2013/01/12 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python中的itertools的使用详解
2020/01/13 Python
基于python实现对文件进行切分行
2020/04/26 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
英语文学专业学生的自我评价
2013/10/31 职场文书
高中班主任评语大全
2014/04/25 职场文书
软件售后服务方案
2014/05/29 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
redis中lua脚本使用教程
2021/11/01 Redis