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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
javascript实现下雨效果
Mar 27 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 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
239军机修复记
2021/03/02 无线电
BBS(php & mysql)完整版(三)
2006/10/09 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
angular中使用Socket.io实例代码
2017/06/03 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Django框架中编写Context处理器的方法
2015/07/20 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
pandas 对group进行聚合的例子
2019/12/27 Python
在python3中实现更新界面
2020/02/21 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
保密工作实施方案
2014/02/24 职场文书
家庭困难证明
2014/10/12 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL