400-650-7353

精品课程

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

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

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

 

课程好礼申请领取
您的姓名
您的电话
意向课程
 

中公优就业

官方QQ

扫描上方二维码或点击一键加群,免费领取价值599元网课,加群暗号:599。 一键加群

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

推荐阅读

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

1 您的年龄

2 您的学历

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

获取测试结果
 
课程资料,活动优惠 领取通道
 
 
Baidu