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选中select控件 无法设置selected的解决方法
Sep 01 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
js检测用户输入密码强度
Oct 22 Javascript
Javascript之Date对象详解
Jun 07 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 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原生模板引擎 最简单的模板引擎
2012/04/25 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
javascript基本类型详解
2014/11/28 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
军训鉴定表自我鉴定
2014/02/13 职场文书
给校长的建议书
2014/03/12 职场文书
男女朋友协议书
2014/04/23 职场文书
校园绿化美化方案
2014/06/08 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python