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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
javascript date格式化示例
Sep 25 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 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
SMARTY学习手记
2007/01/04 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python字符串替换的2种方法
2014/11/30 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
深入理解Python中的*重复运算符
2017/10/28 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
车间主管岗位职责
2013/11/14 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
2015年仓库工作总结
2015/04/09 职场文书
新学期感想
2015/08/10 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python