This 指向问题

this指向问题

事件调用

谁触发事件，this指向谁

  let content = document.getElementById('content');
  let content1 = document.getElementById('content1');
  let move = function(){
    console.log(this)
  }
  content.onclick = move
  content1.onclick = move

全局环境

浏览器 :window
node环境：导出的对象（module.exports）

  console.log(this)
  //node
  console.log(this == module.exports)

函数内部

全局调用

全局环境调用 非严格模式 window，严格模式undefinde
如果想让指向window 使用 window.[函数名]

	function move1() {
       console.log(this);
     }
     move1();
     function move() {
       "use strict";

       console.log(this);
     }
     move();
     window.move();

对象内部调用

this 指向调用它的对象（谁调用指向谁,而不是定义时）
函数被多层对象所包含，如果函数被最外层调用，this 指向它上一层的对象

 var obj = {
        a: 1,
        b: function () {
          console.log(this);
        },
      };
      obj.b();
      window.obj.b();
      let c =obj.b
      c()

构造函数

构造函数中this： 没有返回值，指向的是构造出来的对象；有返回值，返回值为引用类型，this指向该返回值，基本类型(null,num…)返回构造出来的对象

	function Fn() {
	 this.num = 12;
	  console.log(this);
	}
	let obj = new Fn();
	console.log(obj)

分析

function Fn() {
 this.num = 10;
   console.log(this);
 }
 Fn.num = 20;
 Fn.prototype.num = 30;
 Fn.prototype.method = function () {
   console.log(this.num);
 };
 let prototype = Fn.prototype;
 let method = prototype.method;
 let obj = new Fn();
 obj.method();
 prototype.method();
 method()

箭头函数(不可以修改this的指向)

箭头函数没有自己的this和arguments，箭头函数中的this 实际指向的的定义时上层作用域的this。强调一下上一层作用域，对象不能形成单独的作用域

 var obj={
    fn:()=>{
      console.log(this)
    }
  }
  obj.fn()

call apply bind

this指向绑定的对象

var obj={
  fn(...res){
    console.log("res",res)
    console.log(this)
  }
}
obj.fn.call({name:1},2,3,4)
obj.fn.apply({name:1},[2,3,4])
obj.fn.bind({name:1})()