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 相关文章推荐
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
原生js实现弹出层效果
Jan 20 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
vue.js 实现输入框动态添加功能
Jun 25 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
python检测lvs real server状态
2014/01/22 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
银行优秀员工事迹
2014/02/06 职场文书
大学生新学期计划书
2014/04/28 职场文书
个人欠款担保书
2014/05/20 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
银行员工考核评语
2014/12/31 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
java实现对Hadoop的操作
2021/07/01 Java/Android