【前端】JS(javascript)中this的几种用法实例详解

简介: this 是 JavaScript 语言的一个关键字,this 的指向其实是非常灵活的,它会根据调用function的对象不同,导致了 this 的指向不同。当在全局作用域下调用函数时,this 指向window。总的来说,this 就是函数运行时所在的环境对象。

本文主要介绍了javascript(以下简称js)中 this 用法,结合具体实例详细分析一下js中 this 的含义及使用方法,需要的朋友可以参考下。


this 是 JavaScript 语言的一个关键字,this 的指向其实是非常灵活的,它会根据调用function的对象不同,导致了 this 的指向不同。当在全局作用域下调用函数时,this 指向window。总的来说,this 就是函数运行时所在的环境对象。有四种情况,下面详细讨论 this 的用法。


用法1:函数的调用

在一般函数方法中使用 this 指代全局对象,这是函数的最通常用法,属于全局性调用,因此 this 就代表全局对象。


functiontest(){
this.name=zs;
alert(this.name);
  }
test(); // zs

用法2:对象方法调用

作为对象方法调用,函数还可以作为某个对象的方法调用,这时的 **this** 就指这个上级对象。


functiontest(){
alert(this.name);
}
varperson= {};
person.name=lisi;
person.nickname=test;
person.nickname (); // lisi

用法3:构造函数调用

作为构造函数调用,**this** 指代new 出的对象,在**js**中自己创建构造函数时可以利用 **this** 来指向新创建的对象上。这样就可以避免函数中的 **this** 指向全局了。例如:


functiontest(){
this.name=wangwu;
}
varnickname=newtest();
alert(nickname.name); // wangwu// 运行结果为wangwu// 为了表明这时的this不是全局对象,下面给代码做一点改变,可以看看效果varname=maliu;
functiontest() {
this.name=zhaoqi;
}
varnickname=newtest();
alert(name); // 这时结果为maliu

用法4:apply或call调用

apply()是函数的一个方法,作用是改变函数的调用对象,此方法的第一个参数为改变后调用这个函数的对象,因此,这时 **this** 指的就是这第一个参数。


varname=zhangsan;
functiontest() {
alert(this.name);
}
varperson= {};
person.name=lisi;
person.nickname=test;
//apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为zhangsna,证明this指的是全局对象。person.nickname.apply(); // 结果为zhangsan//如果把最后一行代码修改为person.nickname.apply(person); // 此时结果为lisi

到这里本文就结束了,希望对大家有帮助;

 

想要查看JS的简单介绍,可以点击查看

 

请看点击查询基本语法章节

请看点击查询基本对象章节

请看点击查询BOM对象章节

请看点击查询DOM对象章节

 

如果感觉写的好,确实帮助了你,那就麻烦帮忙点个赞,多谢!


**本文首发于CSDN,为博主原创文章,如果需要转载,请注明出处,谢谢!**


完结!

相关文章
|
JavaScript 前端开发 API
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
778 24
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
234 13
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
507 8
|
JavaScript 前端开发
|
存储 JavaScript 前端开发
|
移动开发 JavaScript 前端开发
|
存储 JavaScript 前端开发
|
JavaScript 前端开发

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1083
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    476
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    363
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    350
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    470
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    636
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1035
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    250
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    874
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    435