js中的this的指向问题详解


Posted in Javascript onAugust 29, 2019

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的

普通函数中的this指向:

情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象

构造函数中的this指向:

function Fn(){
  this.title= "你好";
}
var a = new Fn();
console.log(a.title); //你好

首先new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。

当构造函数的this碰到return时:

如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

如果返回值是null, null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。

以上就是本次介绍的全部知识点内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
js操作iframe父子窗体示例
May 22 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 #Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 #Javascript
微信小程序实现购物车代码实例详解
Aug 29 #Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 #Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 #Javascript
Angular8路由守卫原理和使用方法
Aug 29 #Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 #Javascript
You might like
短波问题解答
2021/02/28 无线电
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python Pillow图像处理方法汇总
2019/10/16 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Pycharm Git 设置方法
2020/09/15 Python
Python排序函数的使用方法详解
2020/12/11 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
Java如何支持I18N?
2016/10/31 面试题
小学节能减排倡议书
2014/05/15 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技