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 相关文章推荐
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
Vue异步加载about组件
Oct 31 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
10分钟学会js处理json的常用方法
Dec 06 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
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
javascript 动态创建表格
2015/01/08 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python读写LMDB文件的方法
2018/07/02 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python实现图片转字符画的完整代码
2021/02/21 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
演讲稿开场白
2014/01/13 职场文书
现金出纳岗位职责
2014/03/15 职场文书
化工工艺设计求职信
2014/06/25 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
土建施工员岗位职责
2014/07/16 职场文书
2014小学年度工作总结
2014/12/20 职场文书
给老婆的道歉信
2015/01/20 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python