0

0

js中this对象用法实例详解

小云云

小云云

发布时间:2018-01-08 09:06:30

|

1564人浏览过

|

来源于php中文网

原创

this对象是在函数运行时,基于函数的执行环境绑定的。本文主要介绍了js中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的。请看:

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载


//例子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

相关推荐:

js中this和event 的区别实例详解

JS中this引发bug分析

JavaScript 中的 this 全面解析

相关专题

更多
Java 项目构建与依赖管理(Maven / Gradle)
Java 项目构建与依赖管理(Maven / Gradle)

本专题系统讲解 Java 项目构建与依赖管理的完整体系,重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例,帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程,提升在实际团队开发中的工程能力与协作效率。

11

2026.01.12

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

106

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

64

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

139

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

19

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

93

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

480

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

52

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.1万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号