脚本宝典收集整理的这篇文章主要介绍了了解this 怒推面试官一波,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_126_1@基本知识
this
在JavaScript中属于经常使用的一个对象。在定义中,在Javascript中this
总是指向调用它所在方法的对象,谁发起了调用,this将指向谁。
全局情况下的this
function test () {
console.LOG(this)
}
test()
直接输出了window
对象,因为JS在查找的时候,发现this
的指向是undefined
,那么在JS会将this
指向到window
上。
"use strict"
function test () {
console.log(this)
}
test()
严格模式下,JS是不会将this
指向到window
上,所以输出是undefined
。
调用情况下的this
VAR obj = {
name:'hero'
}
function test () {
console.log(this)
}
obj.test = test
obj.test()
这个代码很好的展示了,由谁调用,this
就会被指向调用方所在对象。
现在我们来思考一下,这种情况。
var obj = {
name:'hero',
Proxy:{
name:'PRoxy hero'
}
}
function test () {
console.log(this)
}
obj.proxy.test = test
console.log('obj.proxy.test')
obj.proxy.test()
var _p = obj.proxy
console.log('_p.test')
_p.test()
这里并没有发生你们预想的
obj.proxy.test
{name: "hero", proxy: {name: "proxy hero", test: ƒ}}
_p.test
{name: "proxy hero", test: ƒ}
而是
obj.proxy.test
{name: "proxy hero", test: ƒ}
_p.test
{name: "proxy hero", test: ƒ}
这个例子表明了,this
的绑定只受到最近的成员影响。所以,此时的this
被绑定在proxy
上。
call,apply,bind的this
var obj = {
name:'hero',
test (postString) {
console.log(this,postString)
}
}
var obj2 = {name:'suPEr hero'}
obj.test.call(obj2,'call')
obj.test.apply(obj2,['apply'])
call,apply的机制是一样的,都是直接修改了内部this
的指向。唯一的区别是call传入参数是挨个传入,apply是传入一整个参数数组。
var obj = {
name:'hero',
test (postString) {
console.log(this,postString)
}
}
var obj2 = {name:'super hero'}
obj.test.bind(obj2)('bind')
bind的机制与其他两个是不一样的,通俗的来说,就是bind设置之后,是蓄势待发。需要正常的执行,才能运行。这在react
中经常使用。
在ES6提案中,你还可以使用这种方式进行bind。
// 函数绑定运算符是并排的两个冒号(::)
var k = obj2::obj.test
k('::bind')
这个提案,现在暂时只有babel
支持。
@H_653_360@参考资料
以上是脚本宝典为你收集整理的了解this 怒推面试官一波全部内容,希望文章能够帮你解决了解this 怒推面试官一波所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。