源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5下载 > 资讯报道 > 编程开发 > 网站开发 > 简单谈谈javascript中this的隐式绑定

简单谈谈javascript中this的隐式绑定

作者:fang来源:a5源码浏览:时间:2016-02-23 11:41我要评论
在JavaScript中,this 的概念比较复杂。除了在面向对象编程中,this 还是随处可用的。这篇文章介绍了this的隐式绑定,希望大家能够喜欢。

我们先来看一个例子

function foo() {

console.log( this.a );

}

var obj = {

a: 2,

foo: foo

};

obj.foo(); // 2

this指向了obj,因为foo执行时的call-site(可以理解为调用时所在作用域)在obj上面。注意是运行的时候,和在哪里声明的没有关系。

call-site and call-stack

call-site姑且理解为调用域,call-stack为调用栈。如下代码可以辅助我们理解

function baz() {

// call-stack is: `baz`

// so, our call-site is in the global scope

console.log( "baz" );

bar(); // <-- call-site for `bar`

}

在baz()中调用bar(),所以bar的调用域是baz,此时bar的调用栈只有baz;而baz本身暴露在全局作用域中,所以它的调用域则也在全局作用域中。

function bar() {

// call-stack is: `baz` -> `bar`

// so, our call-site is in `baz`

console.log( "bar" );

foo(); // <-- call-site for `foo`

}

function foo() {

// call-stack is: `baz` -> `bar` -> `foo`

// so, our call-site is in `bar`

console.log( "foo" );

}

baz(); // <-- call-site for `baz`

理解之后再回头看开头的例子,是不是感觉清晰了很多。其实this只是指向了它的call-site

还有如下玩法:

function foo() {

console.log( this.a );

}

var obj2 = {

a: 42,

foo: foo

};

var obj1 = {

a: 2,

obj2: obj2

};

obj1.obj2.foo(); // 42

Implicitly Lost(隐式丢失)

function foo() {

console.log( this.a );

}

var obj = {

a: 2,

foo: foo

};

var bar = obj.foo; // function reference/alias!

var a = "oops, global"; // `a` also property on global object

bar(); // "oops, global"

虽然bar引用了obj上的foo,但实际上相当于是直接对foo引用而已,所以会默认绑定到全局。

function foo() {

console.log( this.a );

}

function doFoo(fn) {

// `fn` is just another reference to `foo`

fn(); // <-- call-site!

}

var obj = {

a: 2,

foo: foo

};

var a = "oops, global"; // `a` also property on global object

doFoo( obj.foo ); // "oops, global"

以上就是本文章的内容,希望对大家有所帮助

相关文章
评论暂时关闭
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话