js---this、箭头函数

一、this

深入理解this：深入理解JavaScript this-前端开发博客

作用域、词法作用域：https://www.jianshu.com/p/60ca27e185ec

JS-箭头函数中的this的指向：JS-箭头函数中的this的指向_箭头函数this指向问题阮一峰_zhq2005095的博客-CSDN博客

1.在标签中使用，this代表的是标签本身；

2.在事件函数中使用，this代表的是标签本身；

作用域：全局作用域和局部作用域（function内部）

每一个用function声明的函数在调用时都会在函数内创建自己的this。this一般是函数所操作的对象。

1. 如果没有操作的对象，普通函数中，this指向window对象（非严格，严格模式下this是 undefined）；一般的定义函数跟我们的理解是一样的，执行的时候决定this的指向；
2. 函数作为对象的方法，函数中的this指向调用函数的对象；
3. 在构造函数中。此时this指向构造函数的实例对象；
4. 在call、apply和bind中，this指向第一个参数，即被扩展的作用域对象，但bind()返回的是函数；

通过call\apply\bind来指定

都可以改变this指向，区别就是call\apply  改变的同时执行函数，bind不执行，而是返回这个函数

call\apply 第一个参数就是要改变的this的值，区别就是call传入的是参数列表，apply传入的是参数数组

    // 1.在函数中直接使用
    function get(content) {
        console.log(content);
    }
    get("Hello");  // 等价于  // window.get.call(window);

    // 2.函数作为对象的方法被调用（谁调用我，我就指向谁）
    var person = {
        name: 'zhangsan',
        run: function(time) {
            console.log(`${this.name} 在跑步最多${time} min就不行了`);
        }
    }
    person.run(30);
    // person.run.call(person, '30');

    var name = 222;
    var a = {
        name: 111,
        say: function() {
            console.log(this.name);
        }
    }

    var fun = a.say;
    fun(); // window.fun.call(window); 222
    a.say(); // a.say.call(a); 111

    var b = {
        name: 333,
        say: function(fn) {
            fn(); //  window.fn.call(window)
        }
    }
    b.say(a.say); // 222
    b.say = a.say;
    b.say(); // b.say.call(b); 333

    var x = 11;
    var obj = {
        x: 22,
        say: () => {
            console.log(this.x);
        }
    }
    obj.say(); // obj.say.call(window); 11

为什么箭头函数中this会如此不同？

箭头函数this的定义：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定，所以this指向定义时所在的作用域的this（它只会从自己的作用域链的上一层沿用thi s）。

箭头函数中的this引用的是最近作用域中的this；即向外层作用域中，一层层的查找直到this的定义。

箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this是它从自己的作用域链的上一层沿用this。正是因为它没有this，所以也就不能用作构造函数。

箭头函数特点：

1. 箭头函数不能作为构造函数使用，不能用 new
2. 箭头函数没有arguments伪数组，只能使用 ... 动态获取实参（真数组）
3. 箭头函数不能用 call、apply、bind 去改变this的指向
4. 箭头函数没有原型属性
5. 箭头函数的this是定义时绑定的
6. this指向外层最近作用域中的this
7. 箭头函数不能当做Generator函数，不能使用yield关键字

深入理解ES6箭头函数中的this：深入理解ES6箭头函数中的this_小小小小小亮的博客-CSDN博客

1. 为什么需要箭头函数？

为了消除函数的二义性（1.指令序列；2.构造器）

1、指令序列

function fun(){...}

fun()

2、构造器

new Fun()

二、什么时候不能使用箭头函数？

1. 对象方法中，不适用箭头函数

const obj = {
    name: '张三',
    getName() {
        return this.name
    },
    getName1: () => {
        return this.name
    }
}

console.log('普通函数',obj.getName())
console.log('箭头函数',obj.getName1())

为什么对象方法中，箭头函数的this指向不是这个对象？

1. this 永远指向函数的调用者

2. 在箭头函数中，this 指向的是定义时所在的对象，而不是使用时所在的对象。换句话说，箭头函数没有自己的 this，而是继承父作用域中的 this。

2. 原型方法中，不适用箭头函数 

const obj = {
    name: '张三',
}
obj.__proto__.getName = function() {
    return this.name
}
obj.__proto__.getName1 = () => {
    return this.name
}

console.log(obj.getName())
console.log(obj.getName1())

为什么？

出现问题的原因是this指向window对象，这和使用箭头函数在对象中定义方法十分类似。

3. 构造函数也不行！

function Foo (name, sex) {
    this.name = name
    this.sex = sex
}
const Foo1 = (name, sex) => {
    this.name = name
    this.sex = sex
}
console.log('普通的构造函数：', new Foo('张三', '男'))
console.log('箭头函数：', new Foo1('张三', '男'))

构造函数是通过 new 关键字来生成对象实例，生成对象实例的过程也是通过构造函数给实例绑定 this 的过程，而箭头函数没有自己的 this。因此不能使用箭头作为构造函数，也就不能通过 new 操作符来调用箭头函数。 

4. 动态上下文中的回调函数 

const btn1 = document.getElementById('btn1')
btn1.addEventListener('click', () => {
    this.innerHTML = 'clicked'
})

为什么呢？

箭头函数的 this 指向的是他的父作用域（这里就指向了 window），而不是指向这个button。这时候我们需要使用普通函数才可以。

5. Vue 生命周期和 method 中也不能使用箭头函数（Vue2）

为什么不行呢？

Vue 本质上是一个对象，我们说过对象方法中，不适用箭头函数。他的本质上的和对象方法中，不适用箭头函数是一样的。

那么我有一个问题：Vue不行，作为大热框架之一的 react 行吗？

回答是：react 行

因为 Vue组件本质上是一个 JS 对象；React 组件（非Hooks）他本质上是一个 ES6 的 class

不信的话我们测试一下就知道了

class Man {
    constructor(name, city) {
        this.name = name
        this.city = city
    }
    getName = () => {
        return this.name
    }
}
const f = new Man('李四','上海')
console.log(f.getName())

6. 为什么class中的方法可以使用箭头函数

class是ES6中的新语法，本质上并不是功能，只是对象原型的语法糖。让对象原型的写法更接近传统的面向对象语言（比如Java）

1. class中的方法如果是普通函数方法，该方法会绑定在构造函数的原型上；
2. 如果方法是箭头函数方法，该方法会绑定在构造函数上；
3. 通过上述方式调用class中的方法，无论是箭头函数方法还是普通函数方法，方法中的this都指向实例对象。

三、补充知识：

关于箭头功能

// 会看到muzidigbig被打印出来了
const fn = () => 'muzidigbig'
console.log(fn()) // muzidigbig


// 这段代码会输出什么？
const fn = () => {}
console.log(fn()) // ?
'{}'是最终结果吗？这不是想象的那样。未定义的是最后的赢家。
因为'{}'是fn函数的一个包含块，所以它等价于下面的代码。
const fn = () => {
}

console.log(fn()) // undefined