IT培训网更多 收回

IT培训
关注我们
微信公众号 回复"大礼包"享福利 学习交流群 分享IT知识
|

IT在线学习更多 收回

热门课程 更多 >
  • Java开发
  • Web前端
  • Python+人工智能
  • 全链路UI/UE设计
  • VR/AR游戏开发
  • 大数据
  • 室内设计
  • PMP认证
  • 互联网营销
  • 全域电商运营
  • 新媒体与短视频运营
  • 软件测试
  • Linux云计算
  • Office
  • 计算机二级
  • 计算机软考
OAO训练营
不离岗 不离校 学门IT技术
优学VIP
16大类IT课程 提升职场竞争力
关注我们
下载【IT优学】 缓存视频随时随地学 微信扫码关注 回复“大礼包”享福利
| 初高中软件培训| 中公企商培训| 中公联合办学| 优校邦| 中公PMP| 中公软考| 计算机二级培训| 趣码AI
登录 | 注册
400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】ES5及ES6this详解

【Web前端基础知识】ES5及ES6this详解

  • 发布: 优就业it培训
  • 来源:优就业
  • 2021-03-22 16:34:27
  • 阅读()
  • 分享
  • 手机端入口
  • 活动 5天IT课程 申请试学
  • 活动 申请免费基地参观
  • 活动 申请中公购书补助

今天,我们学习一下JavaScript中的this。我们从什么是this,ES5及ES6中this的几种情况进行学习。让this变的so easy,我们这里说的都是非严格模式下。

什么是this

this表示当前行为执行的主体,在javaScript中this不是函数独有的,但是我们主要研究的是函数中的this,为了方便大家理解我们举个例子。

小明今天项目成功上线了,提前下班,不用加班了,奖励自己去肯德基吃一个汉堡,对于这句话我们简单的分析下:

在哪里吃:肯德基

谁吃:小明

在这里肯德基是吃的环境,小明是当前吃这个行为的主体。

  1. //全局作用域下 
  2. Var myBody = document.body; 
  3. //window是可以省略的  当前body元素的宽度都会被输出 
  4. console.log(window.getComputedStyle(myBody).width;);//726px 
  5. console.log(getComputedStyle(myBody).width;);//726px 
  6. //我们在这里输出this  ->window 
  7. console.log(this);//window   

ES5中this的几种情况

1.全局作用域下的this是window

前边的我们说过this代表当前行为执行的主体,在全局作用域下所有的属性和方法都是window的属性和方法,并且window是可以省略的。那么也就是说我们去调用一个方法在全局作用域下,谁调用的也就是window调用,那么window就是当前行为执行的主体,和去肯德基吃汉堡是一样的谁吃小明,那么小明就是当前行为执行的主体。

2.自执行函数中的this是window

在javaScript中我们主要研究的是函数中的this,自执行函数中的this永远是window,因为函数就是一个方法,一种行为,这个行为是直接执行的,那么执行的主体就是window。

  1. //这里我们写两个自执行函数 
  2. ~function(){ 
  3. console.log(this);  //->window 
  4. }(); 
  5.  
  6. (function (){ 
  7. console.log(this);//->window 
  8. })(); 

3.当前函数执行就看前面有没有点(.),点前面是谁this就是谁,和当前函数在哪里定义的及在哪里执行的没有关系,没有点就是window.

还是一样的道理,.前面就表示当前行为执行的主体。如果没有依然当前行为执行的主体是window.

  1. //定义一个函数 
  2. function hello(){ 
  3. console.log(this); 
  4. hello();//this->window 
  5. //定义一个对象设置属性为hello值是对应的那个函数 
  6. Var obj = {hello:hello}; 
  7. //我们再去调用的时候  发现是obj这个对象调用的这个函数  那么obj就是当前行为执行的主体  和这个函数在哪里定义是没有关系的。 
  8. Obj.hello(); //this->obj 

4.call,apply,bind改变this指向问题就看方法中的第一个参数是谁this就是谁。

首先call,apply,bind这三个方法都是用来改变this的指向,其实本质就是改变当前行为执行的主体。由于这个三个方法第一个参数传递都是当前行为执行的主体。所以就看第一个参数即可。

  1. //定义一个函数 
  2. function world(){ 
  3.    console.log(this); 
  4. //定义一个对象 
  5. Var obj = {name:”哈哈”}; 
  6. //将obj变为这个方法行为执行的主体 
  7. World.call(obj);//this->obj 
  8. //apply和bind同理只是传递参数和使用方式略有不同 

ES6中this的几种情况

1.箭头函数是没有自己this的,this是继承它的宿主环境(上级作用域) 宿主环境不是执行的环境,而是定义的环境。

  1. let fn = () => { 
  2.     console.log(this); 
  3.  
  4. fn();//this->window 
  5.  let obj = { 
  6.   name: "obj", 
  7.   sum: function () { 
  8.    fn(); //在widnow下定义的,所以它的宿主环境是widnow而不是sum 
  9.    } 
  10.  }; 

2. ES6类构造器中的this是当前这个实例,而原型上的函数中的this指向调用者。

  1. //类中的this 
  2.         class Btn { 
  3.             constructor(tagName) { 
  4.                 this.btn = document.querySelector(id); 
  5.                 thisthis.btn.onclick = this.click; 
  6.                 console.log(this); //this->这个类的实例 
  7.             } 
  8.             click() { 
  9.                 // 方法里的this指向调用者 
  10.                 console.log(this); //this->btn这个元素 
  11.             } 
  12.         } 
  13.         var btn = new Btn('input'); 
  14.      

 

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道
 
 
  • 申请试听
  • 干货资料
  • 网课咨询
  • 学习交流群
  • 返回顶部