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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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 什么是PEAR?(第二篇)
2009/03/19 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
json数据的列循环示例
2013/09/06 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
JS中表单的使用小结
2014/01/11 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python实现字典依据value排序
2016/02/24 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python实现公司年会抽奖程序
2019/01/22 Python
python实现爬山算法的思路详解
2019/04/09 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python super用法及原理详解
2020/01/20 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
教师反腐倡廉演讲稿
2014/09/03 职场文书
手机被没收的检讨书
2014/10/04 职场文书
机动车交通事故协议书
2015/01/29 职场文书
指导教师推荐意见
2015/06/05 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电