javascript-this,call,apply,bind简述1

　　　　最近在系统的学习面向对象方面的知识，遇到的最大拦路虎就数this的指向,call,apply,bind函数的使用，单独抽出一天时间把这几个烦人的家伙搞定，去学习更深入的内容。

　　　　首先介绍一下this的一些东西，this和call还有莫大的关系，在第一节先不讨论这两在一起的情况。先看看this的应用场景（快餐选手可以直接跳过看后边的总结，一下这些代码只是我学习总结的过程）

　　　　1.全局作用域和一般函数

 this===window    //true

 function fn(){

      return this;

 }

 fn()===window    //true

可以看到，全局作用域中的this和一般函数里边的this指向都是指向window的。

　　　　2.函数作为对象的一个属性

函数作为对象的一个属性，并且作为对象的一个属性被调用时，函数中的this指向该对象，如下代码this指向了作用域所在的对象obj。。

 var obj={

      age:30,

      fn:function(){

          return this.age

     }

 }

 obj.fn()    //

那函数不作为对象的属性调用呢，看代码：

 var obj={

      age:30,

      fn:function(){

         return this    //此时this指向window

         return this.age

      }

  }

 var f=obj.fn;

  f.fn()    //undefind

该函数的调用是作为定义的全局对象f来执行的，和上边的一般函数的调用实质上是一样的，所以this也会指向window

　　　　3.构造器中的this

 function Class(){

       this.age=30

 }

 var man=new Class()    //man.age=30

 function Class2(){

       this.age=30

       return {age:38}

 }

 var man2=new Class2()    //man2.age=38

这里的this代表new出来的那个对象。new会返回一个对象，如果这个对象未定义，则默认return出this对象，在Class2这个构造函数中，如果返回值只有一个age，其他属性是不能调用的，这就可以解释为什么this是new出来的对象，可以自己试一下。

　　　　4.对象原型链上的this

a.构造函数的prototype

 function Fn(name,age){

        this.name=name;

        this.age=age

 }

 Fn.prototype.getName=function(){

        console.log(this.name)

 }

 var f1=new Fn("Lebro",30);

 f1.getName()    //Lebro

b.在整个原型链继承上的this

 var  obj={

       fn:function(){

           return this.a+this.b

       }

 }

 var p=Object.creat(obj);    //对象p继承了obj的fn函数

 p.a=1;p.b=2;

 p.fn()        //

由此可见，不管是构造函数的prototype，即便是在整个原型链继承中，this代表的也都是当前对象。

　　　　5.call()/apply()上的this

 var obj={

      a:10

 }

 var fn=function(){

      console.log(this)

 }

 fn.call(obj);    //{a:10}

当一个函数被call和apply调用时，this的值就取传入的对象的值。我也觉得有点拗口，下节把这几个兄弟再仔细解析一下他们的用法。

总结：this的取值是在函数调用时确定的，在函数声明阶段无法确定（说了一句废话，this设计出来就是为了复用，如果声明阶段就确定了那复用就无从谈起）。

　　　this总是指向调用this所在函数的那个对象或者作用域。

　　　　　这句话其实也是符合call函数的，定义：调用一个对象的一个方法，以另一个对象替换当前对象，在上述例子中其实就是用对象obj替代window来调用fn函数，因此fn里的this就指向调用fn的那个对象obj。this大概有点眉目了吧，下一步就解决三巨头的问题。。。

javascript-this,call,apply,bind简述2 http://www.cnblogs.com/wangxiaosan/p/5513302.html

巴特西

javascript-this,call,apply,bind简述1

最新文章

热门文章