JavaScript中的this原理及6种常见使用场景详解


Posted in Javascript onFebruary 14, 2020

JavaScript中的this原理及6种常见使用场景详解

一、this原理

this是JavaScript的一个关键字,函数调用时才会出现;
因为函数是在一定的环境中运行的,调用函数时肯定需要知道是[谁调用的]?就用到了this进行指向;
那么this到底指向的是什么?
this 既不指向函数自身,也不指函数的词法作用域,而是调用函数时的对象!

二、使用场景

(一)普通函数的调用,this指向的是Window

var name = '卡卡';
function cat(){
  var name = '有鱼';
  console.log(this.name);//卡卡
  console.log(this);//Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
}
cat();

这里大家可能有疑问,不是说this指向的是调用函数的对象吗?cat()并没有对象出现啊,这个是因为在全局作用域中,window是根目录,一般可以省略,例如:alert()其实是 window.alert();

(二)对象的方法,this指的是该对象

1、一层作用域链时,this指的该对象

var name = '卡卡';
var cat = {
  name:'有鱼',
  eat:function(){
    console.log(this.name);//有鱼
  }
}
cat.eat();

因为函数eat是由cat对象调用的,所以this指向的是cat本身,所以cat.name=有鱼;

2、多层作用域链时,this指的是距离方法最近的一层对象

var name = '卡卡';
var cat = {
  name:'有鱼',
  eat1:{
    name:'年年',
    eat2:function(){
      console.log(this.name);//年年
    }
  }
}
cat.eat1.eat2();

eat2方法包含在两个对象cat、eat1中,但是紧挨着的eat1对象,所以this.name指的是eat1的属性name,即[年年]

这里需要注意一个情况,如果cat.eat1.eat2这个结果赋值给一个变量eat3,则eat3()的值是多少呢?

var eat3 = cat.eat1.eat2;
eat3(); // 卡卡

答案是[卡卡],这个是因为经过赋值操作时,并未发起函数调用,eat3()这个才是真正的调用,而发起这个调用的是根对象window,所以this指的就是window,this.name=卡卡

JavaScript中的this原理及6种常见使用场景详解

(三)构造函数的调用,this指的是实例化的新对象

var name = '卡卡';
function Cat(){
  this.name = '有鱼';
  this.type = '英短蓝猫';
}
var cat1 = new Cat();
console.log(cat1);// 实例化新对象 Cat {name: "有鱼", type: "英短蓝猫"}
console.log(cat1.name);// 有鱼

(四)apply和call调用时,this指向参数中的对象

var name = '有鱼';
function eat(){
  console.log(this.name);
}
var cat = {
  name:'年年',
}
var dog = {
  name:'高飞',
}

eat.call(cat);// 年年
eat.call(dog);// 高飞

apply方法和call方法相当于改变了显式的修改了prototype原型

JavaScript中的this原理及6种常见使用场景详解

(五)匿名函数调用,指向的是全局对象

var name = '卡卡';
var cat = {
  name:'有鱼',
  eat:(function(){
    console.log(this.name);//卡卡
  })()
}
cat.eat;

这里提一下匿名函数调用方式,常用的有三种方法:

//①先用()包起来,然后再后面跟 (参数) 
(function(data){
  console.log(data);
})("222");

//②先后面跟(参数),然后再()包起来
(function(data){
  console.log(data);
}("333"));

//③正常函数格式,前面加 !
!function(data){
  console.log(data);
}("444");

(六)定时器中调用,指向的是全局变量
常用的定时器有setInterval和setTimeout,拿setInterval举例子:

var name = '卡卡';
var cat = setInterval(function(){
  var name = '有鱼';
  console.log(this.name);// 卡卡
  clearInterval(cat);
},500);

其实定时器的本质,也是一种匿名函数的形式。

总结:
①普通函数的调用,this指向的是window
②对象方法的调用,this指的是该对象,且是最近的对象
③构造函数的调用,this指的是实例化的新对象
④apply和call调用,this指向参数中的对象
⑤匿名函数的调用,this指向的是全局对象window
⑥定时器中的调用,this指向的是全局变量window

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
JavaScript错误处理
Feb 03 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
利用js实现简单开关灯代码
Nov 23 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 #Javascript
Angular之jwt令牌身份验证的实现
Feb 14 #Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 #Javascript
JS实现简易计算器
Feb 14 #Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 #Javascript
node.js中npm包管理工具用法分析
Feb 14 #Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 #Javascript
You might like
yii操作cookie实例简介
2014/07/09 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
重定向实现代码
2006/11/20 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JavaScript运算符小结
2015/06/03 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
建筑工程专业毕业生自荐信
2013/10/19 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
校园活动策划书范文
2014/01/10 职场文书
协议书模板
2014/04/23 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
Nginx进程调度问题详解
2021/09/25 Servers