谈一谈JS中this指向问题

this的指向存在以下几种场景：

1-1 new 绑定

• 构造函数被new调用

class A {
  constructor(a,b) {
    this.a = a;
    this.b = b
  }
  func1() {
    console.log(this.a) // 1
  }
}

const bar = new A(1,2) // 输出： bar实例，这里的this就是bar

1-2 显示绑定

• 作为对象的方法使用,使用call， apply，bind改变this指向；

function attribute(name, height) {
    this.name = name
    this.height = height
}

function Person(name, height, occupation) {
    attribute.call(this, name, height)       // call 方式调用
    // attribute.bind(this, name, height)       // bind 方式调用
    // attribute.apply(this, [name, height])    // apply 方式调用，跟一个数组
    this.occupation = occupation
}

new Person('tiger', 178, '前端开发')

• 顺便理一下bind的实现原理

Function.prototype.bind = (context) => {
 let self = this;
 const args = Array.prototype.alice.call(arguments, 1);
 const Temp = function() {}
 const Bind = function() {
   let args2 = Array.prototype.alice.call(arguments);
   // 当 bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效，但传入的参数依然生效
   return self.apply(this instanceof temp ? this : context, args.concat(args2));
 }
 Temp.prototype = this.prototype; // 修改返回函数的prototype为绑定函数的prototype，实例就可以继承函数绑定中的值，其实是Bind.prototpe = self.prototype, 但若是直接修改Bind的原型，会直接修改绑定函数的prototype，所以接触中转函数Temp来实现
 Bind.prototype = new Temp();
 return Bind
}

1-3 隐式绑定

• 函数在某个上下文中调用，this绑定的就是当前的上下文

let a = 'javascript';
const obj = {
  a: 'css',
  func: function() {
    console.log(this.a) 
  }
}

obj.func() // css

var a = 'javascript'

var obj = {
    a: 'css',
    b:{
        a:'html',
        func: function() {
            console.log(this.a)
        }
    }
}

obj.b.foo()      // 浏览器中输出: "html"，这里的this指向 b

1-4 默认绑定

• 在不使用任何修饰的函数进行调用（即不包括以上三种情况）； 非严格模式下this 绑定到全局对象（浏览器下是 winodw，node 环境是 global），严格模式下 this 绑定到 undefined （因为严格模式不允许 this 指向全局对象）。

let a = 'javascript';
function func1() {
  let a = 'css'；
  console.log(this.a)； 
}

func() // javascript, 这里的this就是默认绑定，指向window

• this指向当前函数执行的上下文（理解这句话很重要）

2.this绑定的优先级

！注意，箭头函数没有自己的this；箭头函数的 this 绑定是无法通过 call、apply、bind 被修改的，且因为箭头函数没有构造函数 constructor，所以也不可以使用 new 调用，即不能作为构造函数，否则会报错。