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

最近小弟在网上看到一道面试题，题目虽然简单，但包含的知识点较多，有利于对 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 关键字

二、改变 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()
复制代码

相关文章

搭建一个vue-cli的移动端H5开发模板

封装一个toast和dialog组件并发布到npm

从零开始构建一个webpack项目

总结几个webpack打包优化的方法

一文读尽前端路由、后端路由、单页面应用、多页面应用

关于几个移动端软键盘的坑及其解决方案

浅谈JavaScript的防抖与节流

总结几种数组去重的方法

浅谈JavaScript的 深拷贝和浅拷贝