浅谈JavaScript中的this

154 阅读2分钟

在看过阮一峰和jspang对JavaScript中this的解析,来谈谈我对这一方面的理解,也算是为了对即将到来的面试笔试巩固下基础。

在谈this之前,不可避免的我们先要了解作用域这个概念

   var a = 1;//全局变量
    function foo(){
        var b = 2;//局部变量
           c = 3;//全局变量
    }

没有用var声明的变量是全局变量

而this所绑定的对象,就取决于函数在执行过程中的调用位置,分为以下4种

1默认绑定

我喜欢叫它全局绑定更容易记

   function foo(){
        var a = 2;
        console.log(this.a);
    }
    var a = 1;
    foo();//1

我么可以看到,在foo()函数是独立调用,即不是由其他对象所引用,所以此时他指向全局但是如果在严格模式下,则会this绑定undefine

 "use strict"
    function foo(){
       
        console.log(this.a);
    }
    var a = 1;
    foo();//undefine

2隐式绑定

如果调用位置存在上下文对象,则this指向调用的上一层

      var a = 3;
     function foo(){
         var a = 2;
         console.log(this.a);
     }
     var obj = {
         a:1,
         foo:foo
     };
     obj.foo();//1

3显示绑定

我的理解是强制绑定,最常见的就是call()方法

      var a = 3;
     function foo(){
        
         console.log(this.a);
     }
     var obj = {
         a:1,
         foo:foo
     };
     foo();//3
     foo.call(obj);//1

call()方法可以在调用foo时强制把this绑定到指定的参数上

4new绑定

用new来调用函数,会自动执行以下操作

1.创建一个全新的对象

2.这个新的对象被执行【【prototype】】链接

3.新的对象绑定到this

4.如果函数没有返回其他对象,那么new表达式中函数调用自动返回这个新的对象

     function foo (a){
         
         this.a = a;
     }
     var bar = new foo(2);
     console.log(bar.a);//2

用new来调用函数时,我们会构造一个新的对象绑定到函数调用的this上