Javascript 中的this

Javascrip也是一门面像对象的编程语言,那么this在Javascript是如何生效的呢?考虑下面一段程序:

栗子1:

var b = {
  a:10,
  fun:function(){
      console.log(this.a);
  }  
}
b.fun();   // 10
var f = b.fun;
f();     // undefined

上面一段代码中为什么会有不同的结果呢?
原因在Javascript中对于this这个关键字的处理是在运行时根据当前上下文动态进行绑定的,b.fun() 中的context是对象b,就把this跟对象b进行绑定,这样this.a 也就相当于是b.a;而 fun() 的运行上下文是 全局window对象,所以this.a === window.a === undefined.

总结: this会绑定到最近的上下文对象。

栗子2:

var b = {
  a:10,
  fun:function(){
      console.log(this.a);
  },
  c:{
    a: 11,
    fun:function(){
      console.log(this.a);
    }
  }
}
b.c.fun();       // 11
b.fun();         //10
var f = b.fun;
f();                // undefined 相当于window.f();
var f = b.c.fun;
var a = 100;
f();                // 100 相当于window.f();

如何改变this的指向?

  • applycall
    栗子3:
var fun = function(){
  console.log(this);
}
fun();        // this === window
var b= {};
fun.call(b) ; // this === b
fun.apply(b); // this === b

applycall 的区别在于第二个参数的类型不同,apply接受一个数组作为参数传递给原函数,apply则是接受一个参数列表arg1,arg2,arg3,...的形式。
-bind
栗子4:

var fun = function(){
  console.log(this);
}
var c = {}
var b = fun.bind(c);
fun();  // this === window
b();    //this===c

bind则是返回一个全新的函数,javascript在这个全新的函数里面将this指向了我们传入的参数。不同于applycall的时候,bind并不会立即执行,而是在需要的时候在明确调用执行。

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

推荐阅读更多精彩内容