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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
原生js实现验证码功能
Mar 16 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
JS Canvas接口和动画效果大全
Apr 29 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
php数组添加元素方法小结
2014/12/20 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python制作刷网页流量工具
2017/04/23 Python
python实现网页自动签到功能
2019/01/21 Python
详解python中sort排序使用
2019/03/23 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python之变量类型和if判断方式
2020/05/05 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
乌鸦喝水教学反思
2014/02/07 职场文书
医院搬迁方案
2014/06/14 职场文书
社区服务活动小结
2014/07/08 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
停车场管理协议书范本
2014/10/08 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
小孩不笨观后感
2015/06/03 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书