JavaScript中this关键字用法实例分析
更新时间：2018年08月24日 12:05:31 作者：u013063153
这篇文章主要介绍了JavaScript中this关键字用法,结合实例形式总结分析了javascript中this关键字在不同条件下的指向问题与相关操作技巧,需要的朋友可以参考下
本文实例总结了JavaScript中this关键字用法。分享给大家供大家参考，具体如下：
例1：
function a(){
var user = "yao";
console.log(this.user);//undefined
console.log(this);//window
}
a();
等价于：
function a(){
var user = "yao";
console.log(this.user);//undefined
console.log(this);//window
}
window.a();
this指向的是window。
例2：
var o = {
user:"yao",
fn:function () {
console.log(this.user);//yao
}
}
o.fn();
this指向的是o。
例3：
var o = {
user:"yao",
fn:function () {
console.log(this.user);//yao
}
}
window.o.fn();
this指向的是o。
var o = {
a:10,
b:{
a:12,
fn:function () {
console.log(this.a);//12
}
}
}
o.b.fn();
this指向的是b。
例4：
var o = {
a:10,
b:{
a:12,
fn:function () {
console.log(this.a);//undefined
console.log(this);//window
}
}
};
var j = o.b.fn;
j();
综上所述：
this的指向永远是最终调用它的对象。
当this遇上函数的return：
例5：
function fn(){
this.user = "yao";
return {};
}
var a = new fn;
console.log(a.user);//undefined
例6：
function fn(){
this.user = "yao";
return function(){};
}
var a = new fn;
console.log(a.user);//undefined
例7：
function fn(){
this.user = "yao";
return 1;
}
var a = new fn;
console.log(a.user);//yao
例8：
function fn(){
this.user = "yao";
return undefined;
}
var a = new fn;
console.log(a.user);//yao
this指向的是函数返回的那个对象。
function fn(){
this.user = "yao";
return null;
}
var a = new fn;
console.log(a.user);//yao
虽然：null是对象，但是此时this指向的仍然是函数的实例。
PS：
在"use strict"模式下，this默认的指向是undefined，而不是window。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这几天chatgpt可是非常火的,下面这篇文章主要给大家介绍了关于利用OpenAI ChatGPT进行编码尝试体验的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
本文给大家分享的是一则使用javascript完美实现兼容各大浏览器的@好友自动提示的特效，是根据百度贴吧的效果模仿来的，推荐给小伙伴们，希望大家能够喜欢。2015-03-03
这篇文章主要为大家详细介绍了js实现鼠标点击飘爱心效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器，这篇文章主要介绍了Json文件格式化方法,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Webpack中雪碧图插件使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
在微信小程序中,我们无法直接通过 bindtap="handleClick(1,2,3)" 的方式传递参数,而是通过自定义属性data- 的方式传递,并在事件回调函数中通过event.currentTarget.dataset获取这些参数,本文给大家介绍小程序 bindtap 事件多参数传递的实例代码,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要为大家详细介绍了微信小程序实现简单的select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
这篇文章主要介绍了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果,涉及javascript基于onscroll事件动态改变页面元素样式的相关技巧,需要的朋友可以参考下2016-08-08
在 JavaScript 中,有多种方法可以保留小数点后两位,本文给大家分享比较常用的方法,文末给大家介绍了实现数据格式化保留两位小数的多种方法,感兴趣的朋友一起看看吧2023-10-10
基于JS如何实现给字符加千分符(65，541，694，158)
JS如何实现给字符加千分符，本文给大家带来了基于js实现的代码，代码简单易懂，感兴趣的朋友一起学习吧2016-08-08
最新评论