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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
js获取url传值的方法
Dec 18 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
学生励志演讲稿
2014/01/06 职场文书
安全生产检讨书
2014/01/21 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书