【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. (function (){
  6. console.log(this);//->window
  7. })();

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

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

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

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

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

  1. //定义一个函数
  2. function world(){
  3. console.log(this);
  4. }
  5. //定义一个对象
  6. Var obj = {name:”哈哈”};
  7. //将obj变为这个方法行为执行的主体
  8. World.call(obj);//this->obj
  9. //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');

THE END  

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

领取零基础自学IT资源

涉及方向有Java、Web前端、UI设计、软件测试、python等科目,内容包含学习路线、视频、源码等

点击申请领取资料

点击查看资料详情 

收起 


 相关推荐

问题解答专区
返回顶部