JavaScript this关键字指向常用情况解析


Posted in Javascript onSeptember 02, 2020

在之前写代码的经历中,常常试过写着写着this就莫名其妙的不知道指向到哪里去了。今天看了曾探的javascript设计模式,里面特别谈到了this在不同情况下指代的对象,非常有意思。

this指代的情况

this有以下4种情况:

1、对象.函数的形式调用:object.function();

2、普通函数的形式调用:function();

3、构造器调用;

4、Function.prototype.call或Function.prototype.apply调用;

1、对象.函数的形式调用

对象.函数方式调用时,指代该对象。

var obj = {
  num:1,
  getNum:function(){
    alert(this.num);//输出1
  }
}
obj.getNum();

2、普通函数形式调用

普通函数的方式被调用时,this指向全局对象。

window.num = 2;
var obj = {
  num:1,
  getNum:function(){
    alert(this.num);
  }
}
obj.getNum();//弹出1
var fun1 = obj.getNum;
fun1();  //弹出2

太神奇了,直接调用函数 fun(); 与通过对象调用函数 xxx.fun(); this指代的对象不同。

3、构造器调用

为了能够用上new关键字,javascript的创建对象可以这样定义。

var person = function(){
this.name = '刘备';
}

在这种情况下,this指代这个正在创建中的对象。

var p = new person();
alert(p.name);//弹出刘备

4、Function.prototype.call或Function.prototype.apply调用

var obj1 = {
  name:'关羽',
  getName:function(){
    return this.name;
  }
}
var obj2 = {
  name:'刘备'
}
alert(obj1.getName());  //关羽
alert(obj1.getName.call(obj2));  //刘备

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
JavaScript arguments.callee作用及替换方案详解
Sep 02 #Javascript
JavaScript Array.flat()函数用法解析
Sep 02 #Javascript
通过实例解析JavaScript常用排序算法
Sep 02 #Javascript
手把手教你实现 Promise的使用方法
Sep 02 #Javascript
如何基于jQuery实现五角星评分
Sep 02 #jQuery
在vscode 中设置 vue模板内容的方法
Sep 02 #Javascript
JavaScript array常用方法代码实例详解
Sep 02 #Javascript
You might like
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
模拟select的代码
2011/10/19 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
美国创意之家:BulbHead
2017/07/12 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
个人简历的自荐信
2013/10/23 职场文书
小学教育毕业生自荐信
2013/11/18 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
人民检察院起诉书
2015/05/20 职场文书
课改心得体会范文
2016/01/25 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang