从一道面试题中总结JS作用域,this 指向和箭头函数

3,648 阅读3分钟

最近小弟在网上看到一道面试题,题目虽然简单,但包含的知识点较多,有利于对 JavaScript 作用域,this 指向,call/apply,箭头函数的理解。在这里跟大家分享总结一下。 题目先睹为快

var a = 10
var obj = {
  a: 20,
  say: function() {
    console.log(this.a)
  }
}
obj.say()

很明显答案是输出 20,这里的 this 指向的是 obj。obj.a=20。

但是如何才能打印出 10 呢?有如下方法

1.箭头函数

箭头函数不绑定 this,会捕获其所在的上下文的 this 值,作为自己的 this 值。我们可以利用这一点进行修改。这样 this 的指向就是 window。

var a = 10
var obj = {
  a: 20,
  say: () => {
    console.log(this.a)
  }
}
obj.say() // -> 10

下面说下箭头函数和普通函数的区别

  • 箭头函数是匿名函数,不能作为构造函数,不能使用 new
  • 箭头函数不绑定 arguments,取而代之用 rest 参数…解决
  • 箭头函数不绑定 this,会捕获其所在的上下文的 this 值,作为自己的 this 值
  • 箭头函数通过 call() 或 apply() 方法调用一个函数时,只传入了一个参数,对 this 并没有影响。
  • 箭头函数没有原型属性
  • 箭头函数不能当做 Generator 函数,不能使用 yield 关键字

2、改变 this 的指向

在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。下面使用 call 改变 this 指向的方法

var a = 10
var obj = {
  a: 20,
  say: function() {
    console.log(this.a)
  }
}
obj.say.call(this) // 此处显示绑定this为全局window对象

下面说一下 call,apply 的区别 对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。call 接受的是一个字符串,而 apply 接受的是一个数组

func.call(this, arg1, arg2)
func.apply(this, [arg1, arg2])

常见应用

// 获取数组中的最大值和最小值
var  numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers),   //458
var maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

// 数组追加
var array1 = [12 , "foo" , {name:"Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
// array1 值为  [12 , "foo" , {name:"Joe"} , -2458 , "Doe" , 555 , 100]

// 验证是否是数组
functionisArray(obj){
  return Object.prototype.toString.call(obj) === '[object Array]'
}

3.创建临时变量存放函数

var a = 10
var obj = {
  a: 20,
  say: function() {
    console.log(this.a)
  }
}

var say = obj.say // 此处先创建一个临时变量存放函数定义,然后单独调用
say()

相关文章