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中json对象和string对象之间相互转化
Dec 26 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
Angularjs中数据绑定的实例详解
Aug 25 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php防止用户重复提交表单
2015/11/02 PHP
详解php反序列化
2020/06/10 PHP
javascript 写类方式之五
2009/07/05 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
vue实现简易计算器功能
2021/01/20 Vue.js
Python中bisect的用法
2014/09/23 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
pyenv命令管理多个Python版本
2017/03/26 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
Python实现疫情地图可视化
2021/02/05 Python
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技