JavaScript中this关键字用法实例分析


Posted in Javascript onAugust 24, 2018

本文实例总结了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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 #Javascript
JavaScript原型链与继承操作实例总结
Aug 24 #Javascript
element-ui循环显示radio控件信息的方法
Aug 24 #Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 #Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 #Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 #Javascript
Vue源码解读之Component组件注册的实现
Aug 24 #Javascript
You might like
php5中类的学习
2008/03/28 PHP
php中计算时间差的几种方法
2009/12/31 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
javascript计时器详解
2015/02/28 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python获取url的返回信息方法
2018/12/17 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
如何使用PHP session
2015/04/21 面试题
幼儿园教师节活动方案
2014/02/02 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
办护照工作证明
2014/10/01 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
班主任2015新年寄语
2014/12/08 职场文书
写给医生的感谢信
2015/01/22 职场文书
技术员岗位职责
2015/02/04 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
python not运算符的实例用法
2021/06/30 Python