Blog

Blog

PHODAL

关于Javascript的this的一些知识

Javascript应该是现在最流行的跨平台语言之一,一直在玩前端的一些有意思的东西,发现竟然没有掌握好这门语言。有点舍本逐末,于是想趁着现在这有空的时候好好补充一点遗漏的东西。

this的隐性绑定

一开始这是我很迷惑的东西,刚开始看到的时候,不理解。而后,在相似的情况下,又能用类似的方法解决同样的问题。便试着理清这其中的知识,方便于查找。

这是一个Javascript语言上设计的错误,但是似乎这个错误是不可避免的,函数是对象,数组是对象等等。引用《Javascript: The Good Parts》中的例子

 function add (a,b) {return a+b}
 var sum = add (3,4);
 console.log(sum); //sum = 7

此时sum的结果是7。

 > typeof add
 > 'number'

在这里可以看到,add的类型是数值。

以此模式调用函数时,this被绑定到全局变量。

也就是在现在的环境下,我们可以这样调用this

 this.add(3,4)

这就是this的隐性绑定,而this会以不同的方式被绑定。

var hello = function (){
    return "Hello, " + this.name;
};
name = 'this';
console.log(hello());

这时我们就会得到Hello,this。而当

var hello = function (){
    return "Hello, " + this.name;
};
var user = {
    hello : hello,
    name : 'phodal',

};
console.log(user.hello());

这时user中的hello便指向了hello函数,而这在我们的理解中,这怎么可能,所以是个Bug。

如果我们在这个方法中定义一个变量并给它赋值this,那么内部函数就可以通过那个变量访问到this。

var that = this

于是当情况稍微复杂一点的时候我们就需要用到:

 vat that = this;

tips:

  • this变量的作用域总是由其最近的封闭函数所确定。
  • 使用一个局部变量(如me,self,that)让this绑定对于内部是可用的。

一个简单的例子:

var M = function(){
    this.name = "M";
};

var MM = function(){
    z = new M();
    this.name = "MM";

    z.printName = function(){
        console.log(this.name);
    };
    return z.printName();
};

var mm = new MM;

这时的this指向的是M函数,而由MM自身。如果我们将M中的this去掉,那么返回的就是一个undefined。 于是我们就创建一个当前this作用域的别名,如that或者self等等:

var MM = function(){
    z = new M();
    this.name = "MM";
    var self = this;
    z.printName = function(){
        console.log(self.name);
    };
    return z.printName();
};

这样就能返回一个MM了。除此之外,在ES5中可以用回调函数的bind方法。

var MM = function(){
    z = new M();
    this.name = "MM";
    z.printName = function(){
        console.log(this.name);
    }.bind(this);
    return z.printName();
};

bind可以将方法绑定到接收者。

其他

又一个hello,world

在一次偶然的机会中遇到print('Hello')('World'),然后输出了'Hello, World'。

所谓的高阶函数,看上去似乎很有用,有兴趣可以看看下一篇。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签