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中eval函数的使用方法与示例
Apr 09 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JavaScript File分段上传
Mar 10 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
JS实现简易留言板增删功能
Feb 08 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
学习php开源项目的源码指南
2014/12/21 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
浅析Python中的多进程与多线程的使用
2015/04/07 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python3 replace()函数使用方法
2018/03/19 Python
python基础教程项目二之画幅好画
2018/04/02 Python
python如何爬取个性签名
2018/06/19 Python
python构建指数平滑预测模型示例
2019/11/21 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
法国在线药房:DoctiPharma
2020/10/21 全球购物
应用服务器有那些
2012/01/19 面试题
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
颁奖典礼主持词
2014/03/25 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB