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 相关文章推荐
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
在Express中提供静态文件的实现方法
Oct 17 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
PHP4之COOKIE支持详解
2006/10/09 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
JS不完全国际化&本地化手册 之 理论篇
2016/09/27 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
如何提高数据访问速度
2016/12/26 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
利用python如何处理nc数据详解
2018/05/23 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
2014高中生入党思想汇报范文
2014/09/13 职场文书
个人违纪检讨书
2014/09/15 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
个人德育工作总结
2015/03/05 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL