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定时关闭窗口的实例
May 22 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
js 小数取整的函数
2010/05/10 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
详解Python time库的使用
2019/10/10 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
群众路线自我剖析及整改措施
2014/11/04 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
2016年离婚协议书范文
2016/03/18 职场文书