js中this对象用法分析


Posted in Javascript onJanuary 05, 2018

this对象是在函数运行时,基于函数的执行环境绑定的。

其实这句话的本质就是,谁调用了函数,this就指向谁

具体的来说,通常有以下几种情况:

全局函数

在全局环境中,this指向Window

//例子1
 function A() {
 console.log(this)
 }
 A();//Window

上面的例子很简单,函数A在全局环境中执行,也就是全局对象Window调用了函数。此时this指向Window

对象方法

作为对象方法调用时,this指向调用该方法的对象

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

到这里我们举的例子都比较简单易懂,接下来来一个有意思的:

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

这个例子和前一个例子不一样,运行c.getFunc()时,首先返回的是一个匿名函数,我们将这个函数赋值给cFun,接着在全局环境中调用了cFun(),所以此时this指向的还是Window。

如果我们一定要让这里返回的是c对象呢?在开头我们说过,this对象是在函数执行时确定的,在例子3中,执行c.getFunc()时,this对象指向的还是c,所以我们只要保持住这个this就好了,对上面的代码稍微改动:

//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

这也就是我们经常可以在一些代码中看到var self = this或者var that = this之类的原因了。

call和apply

此时this对象通常指向函数中指定的this值(注意这里的通常2字,考试要考的)

call和apply算是老生常谈,但还是稍微介绍下,怕新同学可能没接触过(其实是为了凑点字数),拿call来说,语法是这样的

fun.call(thisArg, arg1, arg2, ...)

这个方法怎么用呢,看下面的例子:

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

在这里我们就可以看出call函数的意思了:指定一个对象o1去调用其他对象o2的方法,此时this对象指向o1

好了,那为什么前面我们说通常呢?因为,这里的thisArg是可以指定为null和undefined的。请看:

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

此时的this指向全局对象Window

箭头函数

es6中的箭头函数现在也用的比较频繁,但是有个需要注意的点是:

函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

其实出现这种情况的根本原因是:箭头函数没有this对象,所以箭头函数的this就是外层代码的this

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

这个例子和前面例子2是基本一样的,只是把普通函数改写成箭头函数,但是此时的this对象已经指向了外层的Window。

考虑到这一点可能不好理解,我们再看几个例子:

//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

这个例子里,g的getThis写法就和之前的例子3一样,由于函数在全局环境中运行,所以此时this指向Window;h的getThis使用了箭头函数,所以this指向了外层代码块的this所以,此时this指向的是h。

总结

一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向Window

在call和apply函数中this指向指定的对象,如果指定的对为undefined或者null,那么this对象指向Window

在箭头函数中,this对象等同于外层代码块的this

然后依然是每次都一样的结尾,如果内容有错误的地方欢迎指出;如果对你有帮助,欢迎点赞和收藏,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
理解javascript闭包
Dec 15 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
微信小程序 video组件详解
Oct 25 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
Node中使用ES6语法的基础教程
Jan 05 #Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 #Javascript
vue脚手架中配置Sass的方法
Jan 04 #Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 #Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 #Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 #Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 #Javascript
You might like
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
开工庆典邀请函范文
2014/01/16 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
天鹅湖观后感
2015/06/09 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android