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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
部署vue+Springboot前后端分离项目的步骤实现
May 31 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
全文搜索和替换
2006/10/09 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Python列表切片常用操作实例解析
2020/03/10 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
历史学专业推荐信
2013/11/06 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
法制宣传日活动总结
2014/04/29 职场文书
结对共建协议书
2014/08/20 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
安全学习心得体会范文
2016/01/18 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
python中对列表的删除和添加方法详解
2022/02/24 Python