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 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
brook javascript框架介绍
Oct 10 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 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
PHP脚本的10个技巧(2)
2006/10/09 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
php集成开发环境详解
2019/09/24 PHP
sina的lightbox效果。
2007/01/09 Javascript
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
python 合并文件的具体实例
2013/08/08 Python
python脚本实现查找webshell的方法
2014/07/31 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python 多个参数不为空校验方法
2019/02/14 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
python属于解释语言吗
2020/06/11 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
Linux Interview Questions For software testers
2012/06/02 面试题
服装店营销方案
2014/03/10 职场文书
学生退学证明
2015/06/23 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android