JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<button id="btn">Get API Result</button>
<div id='div1'>

</div>

<div id='div2'>

</div>

<div id='div3'>

</div>

JavaScript

let outVar = 'outside';

$('#btn').click(  getApiResult );


function getApiResult(){

	let obj = {
    i: 10,
    b: () => console.log('obj箭头函数方法，它的this: ', this),
    c: function() {
      console.log('obj函数方法', this);
    }
  }
 
  obj.b(); // prints undefined, Window {...}
  obj.c()
  
  
	let url = 'https://jsonplaceholder.typicode.com/todos';
  let outVar = 'inside';
  
	$.get(
    url,
    (data) => {     
      console.log('ajax 回调函数为 箭头函数时，它的this: ', this);
    },
    'json'
  );
  
   
	$.get(
    url,
    function() {     
      console.log('ajax 回调函数为 普通函数时，它的this: ', this);
    },
    'json'
  );
}

let user = {
  firstName: "Ilya",
  sayHi :  () => {
    let arrow = () => console.log('箭头方法作为普通对象方法，执行箭头函数的this：', this);
    arrow();
  },
   obj_method :  function() {
    let arrow = () => console.log('普通对象方法，执行箭头函数的this：', this);
    arrow();
  }
};

user.sayHi(); // Ilya
user.obj_method();