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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 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
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Element Input组件分析小结
2018/10/11 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python简单日志处理类分享
2015/02/14 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
python退出循环的方法
2020/06/18 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
How TDD works
2012/09/30 面试题
思想政治自我鉴定
2013/10/06 职场文书
大学生毕业的自我鉴定
2013/11/13 职场文书
晚宴邀请函范文
2014/01/15 职场文书
护士自我评价范文
2014/01/25 职场文书
安全生产标语大全
2014/10/06 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
毕业感言怎么写
2015/07/31 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技