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 ui dialog里调用datepicker的问题
Aug 06 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
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
如何选购合适的收音机
2021/03/01 无线电
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php筛选不存在的图片资源
2015/04/28 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
Python使用turtule画五角星的方法
2015/07/09 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
通过cmd进入python的步骤
2020/06/16 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
给女朋友的道歉信
2014/01/10 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
大学生社会实践感想
2015/08/11 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
Python WSGI 规范简介
2021/04/11 Python
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL
nginx之queue的具体使用
2022/06/28 Servers