JavaScript 逐点突破系列 – 变幻莫测的this指向

this指向

事件调用环境

谁触发事件，函数里面的this指向就是谁

let button = document.getElemetById('button')
button.onclick = function () {
console.log(this)		//button对象
}

全局环境
浏览器环境下

console.log(this) // window

node环境下

console.log(this) // module.exports

函数内部

this最终指向的是调用的对象，和声明没有直接关系

var object = {
name: 'object',
getName: function() {
console.log(this)
    }
}
var bar = object.getName // 只是函数声明并未调用
object.getName()    // object对象
window.object.getName()    // object对象
/* 函数被多层对象所包含，如果函数被最外层对象调用，this指向
的也只是它上一级的对象。*/
bar()  // window对象

构造函数

构造函数中的this指向的是实例对象

let fn = function(){
this.id = 'xiaoMing'	
console.log(this.id)
}
let fn1 = new fn()		//this指向fn1对象

new 的内部原理

【1】创建一个空对象 obj；
【2】把 child 的__proto__ 指向构造函数 parent 的原型对象 prototype，此时便建立了 obj 对象的原型链：child ->parent.prototype->Object.prototype->null
【3】在 child 对象的执行环境调用 parent 函数并传递参数。
【4】考察第 3 步的返回值，如果无返回值 或者 返回一个非对象值，则将 child 作为新对象返回；否则会将 result 作为新对象返回。this绑定的是返回的对象。

function fn(){
this.num = 10;
}
fn.num = 20;
fn.prototype.num = 30;
fn.prototype.method = function() {
console.log(this.num);
}
var prototype = fn.prototype
var method = prototype.method
new fn().method() // 10
prototype.method() // 30
method() // undefined

箭头函数

箭头函数本身没有this和arguments，箭头函数继承上下文的this关键字，也就是说指向上一层作用域的this。
注意点

1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

上面代码之中，只有一个this，就是函数foo的this，所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this。

除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。

由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

修改this指向

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])
func.bind(this, arg1, arg2)()

apply、call的区别

call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

bind和其他两种方法的区别

bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

原文链接：https://blog.csdn.net/weixin_45495667/article/details/108801000