如何判断this指向问题以及普通函数和箭头函数的this区别

如何判断this指向问题以及普通函数和箭头函数的this区别

this是前端面试中必考的基础知识点。但其实this不难理解。

判断this指向时,记住以下几点:
如何判断this指向问题以及普通函数和箭头函数的this区别_第1张图片

1.首先判断函数类型

  1. 如果是箭头函数,则为第一个包裹箭头函数的普通函数的this指向。
  2. 如果不是箭头函数,但是使用了bind,call,apply等改变this的方法,this被重新绑定为bind/call/apply函数的第一个参数。
  3. 如果是普通函数,并且没有绑定this
    1) 如果是new的方式调用,this被绑定到实例上。
    2) 如果被调用,谁调用便指向谁。
    3) 如果直接执行,this指向window。

2.bind、call、apply的区别

bind, call,apply 都可以改变普通函数的this指向。

不同之处在于:

1.参数不同

call(this,arg1,arg2…),apply(this,[arg1,arg2,…]),bind(this,[arg1,arg2,..])

2.函数执行不同

call,apply方法之后调用后,函数立即执行。

bind方法调用后,返回了一个改变this后的函数,不会立即执行。

被bind绑定过this的函数,this不会再被改变。

3.bind.call,apply的常见应用

1.判断数据类型
Object.prototype.toString.call(null) //[object Null ]

2.获取函数最大值和最小值
Math.max.apply(Math,[1,2,3]) //3

3.伪数组转真数组

Array.prototype.slice.call(arguments)

总结全:

1. 箭头函数没有prototype(原型),所以箭头函数本身没有this。
2. 箭头函数的this在定义的时候继承自外层第一个普通函数的this;如果箭头函数外层没有普通函数,严格模式和非严格模式下它的this都会指向window(全局对象)。
3. 箭头函数本身的this指向不能改变,但可以修改它要继承的对象的this。
4. 箭头函数的this指向全局,使用arguments会报未声明的错误。箭头函数的this指向普通函数时,它的argumens继承于该普通函数。
5. 使用new调用箭头函数会报错,因为箭头函数没有constructor 箭头函数不支持new.target。
6. 箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名。
7. 箭头函数相对于普通函数语法更简洁优雅。
8. 箭头函数不能当做Generator函数,不能使用yield关键字。

你可能感兴趣的:(ES6,js,bind,es6,javascript,前端)