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 validate.js表单验证的基本用法入门
May 13 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
javascript实现考勤日历功能
Nov 29 Javascript
vue.config.js常用配置详解
Nov 14 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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python数据封装json格式数据
2018/03/04 Python
Django中create和save方法的不同
2019/08/13 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
医学专业应届生的自我评价
2014/02/28 职场文书
购房协议书
2014/04/11 职场文书
5s标语大全
2014/06/23 职场文书
车贷收入证明范本
2014/09/14 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
交通安全教育心得体会
2016/01/15 职场文书
初中历史教学反思
2016/02/19 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书