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 相关文章推荐
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 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 模拟$_PUT实现代码
2010/03/15 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
python数据处理实战(必看篇)
2017/06/11 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Python ini文件常用操作方法解析
2020/04/26 Python
python 两种方法删除空文件夹
2020/09/29 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
Python截图并保存的具体实例
2021/01/14 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
华三通信H3C面试题
2015/05/15 面试题
校长竞聘演讲稿
2014/05/16 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
小学生教师节广播稿
2015/08/19 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers