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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
js获取视频时长代码
Apr 10 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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
php中文字符截取防乱码
2008/03/28 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python numpy元素的区间查找方法
2018/11/14 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
HTML文本属性&颜色控制属性的实现
2019/12/17 HTML / CSS
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
高中自我鉴定范文
2013/11/03 职场文书
党员培训思想汇报
2014/01/07 职场文书
教师个人鉴定材料
2014/02/08 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
2014年度思想工作总结
2014/11/27 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript