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 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
Vue中computed及watch区别实例解析
Aug 01 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
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
理解javascript封装
2016/02/23 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
js实现图片360度旋转
2017/01/22 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python的常用模块之collections模块详解
2018/12/06 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
浅析Python中字符串的intern机制
2020/10/03 Python
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
大学生职业生涯规划书前言
2014/01/09 职场文书
学校端午节活动方案
2014/08/23 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
表扬信范文
2019/04/22 职场文书
八年级作文之友情
2019/11/25 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
python图片灰度化处理的几种方法
2021/06/23 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
Ruby处理YAML和json数据
2022/04/18 Ruby