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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python 获取et和excel的版本号
2009/04/09 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
windows下python安装pip图文教程
2018/05/25 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python中退出多层循环的方法
2018/11/27 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
记账会计岗位职责
2014/06/16 职场文书
普通话宣传标语
2014/06/26 职场文书
员工离职感谢信
2015/01/22 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
JavaScript执行机制详细介绍
2021/12/06 Javascript