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 相关文章推荐
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
alert和confirm功能介绍
May 21 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
浅谈node.js中间件有哪些类型
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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php实现图片缩略图的方法
2016/03/29 PHP
Javascript 布尔型分析
2008/12/22 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Zabbix实现微信报警功能
2016/10/09 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
计算机专业毕业生自荐信范文
2014/03/06 职场文书
庆祝儿童节标语
2014/10/09 职场文书
五四青年节活动总结
2015/02/10 职场文书
个人党性分析总结
2015/03/05 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书