JavaScript核心概念输出——this指向

this指向在js中的意义

在js中，this是为函数服务的。 每个函数都有其自己的this指向，如果将this指向绑定方式的话，可以分为以下这几种类型：

1. 显式绑定
2. 隐式绑定
3. 默认绑定
4. new关键字绑定
5. 箭头函数绑定

接下来让我们一一细分这些绑定规则

显式绑定

显式绑定即通过调用函数原型链上的bind、call、apply这三种方法中的其中一种方法，将一个函数与一个调用者(即这个函数的this指向)进行显式绑定，示例如下：

function xianshi(){
    console.log(this.name);
}
const caller = {
    name:'yx'
}
xianshi.call(caller); // expect output: 'yx'

隐式绑定

隐式绑定就是咱们常说的谁调用函数，this就指向谁，具体例子如下：

const caller = {
    name: 'yx',
    sayName(){
        console.log(this.name);
    }
}

caller.sayName(); //expect output: 'yx'

默认绑定

当一个函数直接调用时，他的this指向全局对象，在浏览器和Nodejs环境中不相同，示例如下：

function sayName(){
    console.log(this);
}

sayName(); //expect output: window || {}

new关键字绑定

当我们使用构造函数创建实例对象的时候会进行内部的绑定操作：，示例如下：

class MyClass {
    constructor(){
        console.log(this);
    }
}
const inter = new MyClass() // expect output: MyClass{}

new MyClass的时候实际上是做了以下操作：

1. Object.create一个新的对象
2. 将新对象的__proto__指向MyClass的prototype
3. 执行构造函数将this指向新对象
4. 返回新对象

箭头函数this绑定

箭头函数默认寻找最近外层非箭头函数的this将其视作自身this指向

function foo(){
    const arrowFoo = ()=>{
        console.log(this.name)
    }
    arrowFoo();
}

const obj = {
    name: 'yx'
}

foo.call(obj) // excepet output: 'yx'