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实现div拖拽宽度示例代码
Jul 31 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
JS前端笔试题分析
Dec 19 Javascript
javaScript基础详解
Jan 19 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php去掉文件前几行的方法
2015/07/29 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
自我管理的活动方案
2014/08/25 职场文书
生活小常识广播稿
2014/09/16 职场文书
企业法人代表证明书
2014/09/27 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书