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 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
玩转方法:call和apply
May 08 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
js表单登陆验证示例
Oct 19 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
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数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
accesskey 提交
2006/06/26 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python FFT合成波形的实例
2019/12/04 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
诉讼授权委托书
2014/10/15 职场文书
安全先进个人材料
2014/12/29 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
个人催款函范文
2015/06/24 职场文书
中秋节随笔
2015/08/15 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
golang的文件创建及读写操作
2022/04/14 Golang