了解this 怒推面试官一波

kk_miles 发布于2019-08-23 11:35 / 2568人阅读

摘要：基本知识在中属于经常使用的一个对象。下面将描述一些案例，带领大家了解。这里并没有发生你们预想的而是这个例子表明了，的绑定只受到最近的成员影响。需要正常的执行，才能运行。函数绑定运算符是并排的两个冒号这个提案，现在暂时只有支持。

基本知识

this在JavaScript中属于经常使用的一个对象。在定义中，在Javascript中this总是指向调用它所在方法的对象，谁发起了调用,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支持。

参考资料

https://developer.mozilla.org...

GPU云服务器云服务器面试官反问面试官 java面试官宝典这一波

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97159.html

百度大搜和度秘面经

摘要：百度大搜和度秘面经百度内推投了俩部门前前后后总计面了六轮来写写面经攒攒人品大搜是十几号面的度秘今天面完下面记录一些我认为比较有价值的问题没写全问的问题太多而且有些也记不清了心累我是分割线下面讲正经的大搜大搜在百度现场面三小时面完三轮荒郊野外百度大搜和度秘面经百度内推投了俩部门,前前后后总计面了六轮,来写写面经,攒攒人品.大搜是十几号面的,度秘今天面完.下面记录一些我认为比较有价值...

Carbs 2019-08-01 17:31 评论0 收藏0
百度大搜和度秘面经

摘要：百度大搜和度秘面经百度内推投了俩部门前前后后总计面了六轮来写写面经攒攒人品大搜是十几号面的度秘今天面完下面记录一些我认为比较有价值的问题没写全问的问题太多而且有些也记不清了心累我是分割线下面讲正经的大搜大搜在百度现场面三小时面完三轮荒郊野外百度大搜和度秘面经百度内推投了俩部门,前前后后总计面了六轮,来写写面经,攒攒人品.大搜是十几号面的,度秘今天面完.下面记录一些我认为比较有价值...

piglei 2019-08-20 19:01 评论0 收藏0
百度大搜和度秘面经

摘要：百度大搜和度秘面经百度内推投了俩部门前前后后总计面了六轮来写写面经攒攒人品大搜是十几号面的度秘今天面完下面记录一些我认为比较有价值的问题没写全问的问题太多而且有些也记不清了心累我是分割线下面讲正经的大搜大搜在百度现场面三小时面完三轮荒郊野外百度大搜和度秘面经百度内推投了俩部门,前前后后总计面了六轮,来写写面经,攒攒人品.大搜是十几号面的,度秘今天面完.下面记录一些我认为比较有价值...

gecko23 2019-08-29 13:18 评论0 收藏0
记录一下自己的春招，唯品会、360、京东offer已收、腾讯offer_call已达！！！

摘要：春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品会电商前端研发部大数据与威胁分析事业部京东精锐暑假实习生的腾讯的是早上打过来的。春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品...

freewolf 2019-08-22 16:57 评论0 收藏1