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:

  1.this变量的作用域总是由其最近的封闭函数所确定。

  2.使用一个局部变量(如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'。

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