js的this绑定

JS学习：this指向方式

this绑定有四种方式：默认绑定，隐式绑定，隐式丢失(显示绑定)，new绑定

默认绑定

this指向：如果实在严格模式下（use strict），this指向undefined

use strict：bable ES6转ES5时 会默认开启严格模式

'use strict'//严格模式
function test(){
  // 'use strict'//严格模式，也可以在此处
  console.log(this)
}
test()//默认绑定
// 输出结果：undefined

隐式绑定：

// 隐式绑定
const obj={
  name:'zs',
  // fn(){
  //   console.log(this)
  // }
  fn:function(){
    console.log(this)
  }
}
obj.fn()//--隐式绑定
// 输出结果：

如何区分函数和方法？

方法：一般指的是 一个对象中包含一个属性，而属性值是一个函数时，那么这个属性称为方法

函数：一般是指在全局环境中直接定义的function 称之为函数

隐式丢失（显示绑定）：

obj.fn.call({}) //一般绑定了call，apply和bind就是隐式丢失(显示绑定)

const obj={
  name:'zs'
}
test.apply(obj)//call bind--显示绑定
// 通过`call()`、`apply()`、`bind()`方法把对象绑定到`this`上，叫做显式绑定

new绑定：

什么是构造函数：使用new关键字调用的函数，一般构造函数首字母大写

// 例：new Vue()

function Person(name,age){
  // this指向了由构造函数创建的实例对象，(在此处，this指向了zs)---new绑定
  this.name=name
  this.age=age
  this.fn=function(){
    console.log('我叫：',this.name)
  }
}
const zs=new Person('张三',18)
// const lisi=new Person('李四',18)//这个在放出来之后，返回的就是李四了
// zs.name='zs'
// zs.age=18//动态绑定，不推荐
console.log(zs)

new操作符具体做了哪些事情？

创建一个空对象，并且'this'变量引用该对象

该对象的隐式原型属性指向该函数的原型对象(同时还继承了该函数的原型)

属性和方法被加入到‘this’引用的对象中

新创建的对象由‘this’所引用，并且最后隐式的返回‘this’

// 模拟构造函数内部发生的事情：(~代表自己看不的代码到但是执行)
~this={}
~this.__proto__=函数.prototype
// 接下来就开始执行自己写的代码
this.name=name
  this.age=age
  this.fn=function(){
    console.log('我叫：',this.name)
  }
// 执行完用户写的代码后，
~return this

四种绑定的优先级：

new绑定 <- 显示绑定 <-隐式绑定 <-默认绑定（new的优先级最高）

const fn=new obj.fn() //this指向fn
obj.fn.apply('abc') //this指向abc