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 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
js特殊字符转义介绍
Nov 05 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
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新手上路(五)
2006/10/09 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP Class&Object -- 解析PHP实现二叉树
2013/06/25 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
夜班门卫岗位职责
2013/12/09 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
期末学生评语大全
2014/04/24 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
家装业务员岗位职责
2015/04/03 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis