么是this

  this示意以后行为执行的主体,在javaScript中this不是函数独有的,然而咱们次要钻研的是函数中的this,为了不便大家了解咱们举个例子。

  小明明天我的项目胜利上线了,提前上班,不必加班了,处分本人去肯德基吃一个汉堡,对于这句话咱们简略的剖析下:

  在哪里吃:肯德基

  谁吃:小明

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

  //全局作用域下

  Var myBody = document.body;

  //window是能够省略的 以后body元素的宽度都会被输入

  console.log(window.getComputedStyle(myBody).width;);//726px

  console.log(getComputedStyle(myBody).width;);//726px

  //咱们在这里输入this ->window

  console.log(this);//window

  ES5中this的几种状况

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

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

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

  在javaScript中咱们次要钻研的是函数中的this,自执行函数中的this永远是window,因为函数就是一个办法,一种行为,这个行为是间接执行的,那么执行的主体就是window。

  //这里咱们写两个自执行函数

  ~function(){

  console.log(this); //->window

  }();

  (function (){

  console.log(this);//->window

  })();

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

  还是一样的情理,.后面就示意以后行为执行的主体。如果没有仍然以后行为执行的主体是window.

  //定义一个函数

  function hello(){

  console.log(this);

  }

  hello();//this->window

  //定义一个对象设置属性为hello值是对应的那个函数

  Var obj = {hello:hello};

  //咱们再去调用的时候 发现是obj这个对象调用的这个函数 那么obj就是以后行为执行的主体 和这个函数在哪里定义是没有关系的。

  Obj.hello(); //this->obj

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

  首先call,apply,bind这三个办法都是用来扭转this的指向,其实实质就是扭转以后行为执行的主体。因为这个三个办法第一个参数传递都是以后行为执行的主体。所以就看第一个参数即可。

  //定义一个函数

  function world(){

  console.log(this);

  }

  //定义一个对象

  Var obj = {name:”哈哈”};

  //将obj变为这个办法行为执行的主体

  World.call(obj);//this->obj

  //apply和bind同理只是传递参数和应用形式略有不同

  ES6中this的几种状况

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

  let fn = () => {

  console.log(this);

  }

  fn();//this->window

  let obj = {

  name: "obj",

  sum: function () {

  fn(); //在widnow下定义的,所以它的宿主环境是widnow而不是sum

  }

  };

  2. ES6类结构器中的this是以后这个实例,而原型上的函数中的thiswww.diuxie.com指向调用者。

  //类中的this

  class Btn {

  constructor(tagName) {

  this.btn = document.querySelector(id);

  thisthis.btn.>

  console.log(this); //this->这个类的实例

  }

  click() {

  // 办法里的this指向调用者

  console.log(this); //this->btn这个元素

  }

  }

  var btn = new Btn('input');

  心愿以上的分享能帮到大家!