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

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

  • 发布: 优就业it培训
  • 来源:优就业
  • 2021-03-22 16:34:27
  • 阅读()
  • 分享
  • 手机端入口

今天,我们学习一下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.      

 

文章“【Web前端基础知识】ES5及ES6this详解”已帮助

>>本文地址:https://www.ujiuye.com/zhuanye/2021/68023.html

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

1 您的年龄

2 您的学历

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

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 

快速通道fast track

近期开班时间TIME