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的AJAX实现文件下载的小例子
May 15 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
收集前端面试题之url、href、src
Mar 22 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
详解javascript对数组和json数组的操作
Apr 15 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
Web程序工作原理详解
2014/12/25 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
大学班长的职责
2014/01/27 职场文书
环保宣传语大全
2015/07/13 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
升职自荐书
2019/05/09 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS