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