this问题一次搞定

this指向问题分为两方面,一个是普通函数的this指向,还有一个就是es6中的箭头函数this指向

1 普通函数this指向

    1. this是在调用的时候绑定到某个对象上的,与函数定义没有关系
    2. 指向window的情况:立即执行函数,定时器
    3. 一个原则:谁调用,this指向谁(隐式绑定规则);
    4. 通过call,apply,bind (显示绑定规则);
    5. new 关键字绑定,指向实例化之后的接收对象;
    6. new 》 显示绑定 》隐式绑定 》默认绑定;

拓展:call,apply,bind有什么区别

1:三者都第一个参数都是this要指向的对象

2:apply第二个参数接收一个数组作为方法调用传递的参数;

3:call第二个参数接收一个参数列表 Array.

4:call和apply会立即执行,bind会返回一个新的函数,传参方式类似call;

再拓展:call,apply bind的实现原理

call、apply、bind实现原理 - 掘金;(原理)

面试官为啥总是让我们手撕call、apply、bind? - 掘金(分析过程不错)

2 箭头函数this指向

箭头函数没有自己的this指向,申明的时候就指定了,他只能指向上一级作用域(其所在上下文)的this;

举个例子:react中定义一个防抖函数,传入一个用箭头函数定义的类组件的方法,this指向类组件的实力对象;

箭头函数的局限性:

箭头函数不能作为构造函数(this指向问题)

箭头函数不能使用 arguments;但是可以使用[...rest]解构

拓展:arguments

MDN链接:Arguments 对象 - JavaScript | MDN

官方推荐使用es6解构赋值,而不是使用arguments

你可能感兴趣的:(js基础,javascript,前端,开发语言)