this的运用

this的迷之指向

var obj = {

foo:function(){console.log(this)

}

}var bar = obj.foo

obj.foo()// 打印出的 this 是 objbar()// 打印出的 this 是 window请解释最后两行函数的值为什么不一样。

//ES5函数调用的3种形式

func(p1, p2)

obj.child.method(p1, p2)

func.call(context, p1, p2)

//语法糖

func(p1, p2) 等价于

func.call(undefined, p1, p2)

obj.child.method(p1, p2) 等价于

obj.child.method.call(obj.child, p1, p2)

//第三种func.call(context, p1, p2)//this,就是上面代码中的 context。

functionfunc(){

console.log(this)

}func()//等价于functionfunc(){

console.log(this)

}func.call(undefined)// 可以简写为 func.call()//上面是打印出来是什么?

按理说打印出来的 this 应该就是 undefined 了吧,但浏览器里有一条规则: 如果你传的 context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined) 因此上面的打印结果是 window。

//如果你希望这里的 this 不是 window,很简单:func.call(obj)// 那么里面的 this 就是 obj 对象了

obj.child.method(p1, p2) 的 this 如何确定varobj = {

foo: function(){

console.log(this)

}

}

obj.foo()

按照「转换代码」,我们将 obj.foo() 转换为

obj.foo.call(obj)

好了,this 就是 obj。搞定。

回到题目varobj = {

foo:function(){console.log(this)

}

}varbar = obj.foo

obj.foo()// 转换为 obj.foo.call(obj),this 就是 objbar()// 转换为 bar.call()// 由于没有传 context// 所以 this 就是 undefined// 最后浏览器给你一个默认的 this —— window 对象

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目标:js中this的指向? 问题的引出 指出this指向什么 js中函数的三种调用形式 func(p1, p2)...
    放风筝的小小马阅读 1,560评论 0 0
  • this对象是在运行函数时基于函数的运行环境绑定的;全局环境中,this对象就是window,而当函数被作为某个对...
    章丸丸阅读 910评论 0 0
  • Javascript 中的 this,有时候让人迷惑,所以总结了一下关于this指向的问题。 在函数中 this ...
    lxt410725阅读 3,258评论 0 1
  • 1.apply、call 有什么作用,什么区别 函数调用有三种形式:func(p1,p2)obj.children...
    泰格_R阅读 2,312评论 0 0
  • 与其他语言相比,函数的this关键字在JavaScript中的表现略有不同,此外,在严格模式和非严格模式之间也会有...
    codingC阅读 3,635评论 0 0