function(){} 和 () => {} 中this指向的问题

普通函数中this

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是绑定的对象

注意：普通函数中，内层函数不能从外层函数中继承this的值，在内层函数中，this会是window或者undefined，临时变量self用来将外部的this值导入到内部函数中（另外的方式是在内部函数执行.bind(this)）

es6箭头函数

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。

===========================================================================

当在函数中使用一个变量的时候,首先在本函数内部查找该变量,如果找不到则找其父级函数,

最后直到window,全局变量默认挂载在window对象下

下面几个例子

1、普通函数中内层函数

function fun(){
    var self = this;
    setTimeout(function(){
        console.log(this);// window
        console.log(self);// {id: 001}
        console.log('id: ', self.id);// id:001
    },500);
}
fun.call({id:001});

2、普通函数中内层函数.bind(this)

function fun(){
    var self = this;
    setTimeout(function(){
        console.log(this); //{id: 1}
        console.log(self); //{id: 1}
        console.log('id: ', self.id); //id: 1
    }.bind(this),500);
}
fun.call({id:001});

3、

function fun(){
    /*setTimeout(() =>{
        console.log("args:",arguments); //args:[2,2,3,4]
    },500);*/
    setTimeout(function(){
        console.log("args:",arguments); //
    },500);
}
fun(2,2,3,4);

4、

var obj = {
   say: function () {
     setTimeout(() => {
       console.log(this)
     });
   }
 }
 obj.say(); // obj

5、

var obj = {
say: function () {
  var f1 = () => {
    console.log(this); // obj
    setTimeout(() => {
      console.log(this); // obj
    })
  }
  f1();
  }
}
obj.say()

6、

var obj = {
say: function () {
  var f1 = function () {
    console.log(this); // window, f1调用时,没有宿主对象,默认是window
    setTimeout(() => {
      console.log(this); // window
    })
  };
  f1();
  }
}
obj.say()

7、

var obj = {
say: function () {
  'use strict';
  var f1 = function () {
  console.log(this); // undefined
  setTimeout(() => {
    console.log(this); // undefined
  })
  };
  f1();
 }
}
obj.say()

function(){} 和 () => {} 中this指向的问题

猜你喜欢