javascript中的this、 call() 和 apply()

1:this

   javascript中的this总是指向一个对象的，至于是指向哪一个对象，是运行时基于函数的执行环境的动态绑定的，尔非函数被声明时的环境；

  this的指向可以分为四类：

•   作为对象的方法调用
•   作为普通函数调用
•   构造器调用
•   Function.prototype.call()和Function.prototype.apply()

   1.1:作为对象的方法调用：

   当函数作为对象的方法被调用时，this指向该对象

//obj对象
  var obj={
   name:name;
   getName:function(){
   concole.log(this===obj);  //输出true
  console.log(this.name);     //输出name
  }
};
obj.getName();

   1.2作为普通函数调用：

     当函数不作为对象的属性被调用时，也就是以普通函数方式，this指向全局对象，在浏览器的javascript中，全局对象指的是winows对象

window.name=‘globalName’;   //声明全局对象name的属性

var getName=function(){
   return this.name;
}

console.log(getName());        //输出globalName;



window.name='globalName';   //声明全局对象name的属性

var obj={
    name:'myObjName',
    getName:function(){
    return this.name;
},
}

var myobj=obj.getName;
console.log(myobj());             //输出globalName；

 1.3构造器调用：

             javascript没有类，可以从构造器中创建对象，也提供了new运算符调用构造器。大部分javascript函数都可以当做构造器使用，构造器的外表和普通函数并没有什么两样，区别就是被调用的方式，即使用new运算符创建对象时，就是将函数当做构造器调用。当用new运算符调用函数时，该函数总会返回一个对象，此时，构造器里的this指向返回的这个对象。

var myClass=function(){
   this.name='classname';
};

var obj=new myClass();
console.log(obj.name);    //输出classname

             但，如果构造器显式地返回了一个object类型的对象，那么此函数将返回这个object类型的对象，而不是函数本身所定义的对象，例如：

var myClass=function(){
 
 this.name='classname';
   return{
    name:'lihe'
    };
};

var obj=new myClass();
console.log(obj.name);        //输出lihe

            而，如果构造器不显式地返回任何数据，或返回一个非对象类型的数据，就不会造成上述情形。

var myClass=function(){

this.name='classname';
return 'lihe';
};

var obj=new myClass();
console.log(obj.name);      //输出classname

1.4.Function.prototype.call 或 Function.prototype.apply调用

           跟普通函数调用相比，用 Function.prototype.call 或 Function.prototype.apply 可以动态地改变传入函数的this。

var A={
name:'classnameA',
getName:function(){
   return this.name;
},
};


var B={
name:'classnameB',
};

console.log(A.getName());                //classnameA
console.log(A.getName.call(B));     //classnameB 

       丢失的this：

            当this的指向，与我们期待的不同时，就会出现undefined情况

var  obj={
  name:'classname',
  getName:function(){
   return this.name
},
};

//作为对象的方法引用，指向obj对象
console.log(obj.getName());   //输出classname

//作为普通函数调用，指向全局对象window，name属性还没定义
var getName2=obj.getName;
console.log(obj.getName2);      //输出undefined

   2   call和apply

---

Function原型的两个方法Function.prototype.call()  Function.prototype.apply()

call和apply区别：作用一样，传入参数形式不同

apply接受两个参数，第一个参数制定了函数体内this对象的指向，第二个函数为一个带下标的集合，这个集合可以是数组，也可以是类数组。apply方法把这个集合中的元素作为参数传递给被调用的函数。

var func = function(a, b, c){
  console.log([a, b, c]);  
};

func.apply(null, [1, 2, 3]);

call传入的参数数量不固定，第一个参数也是代表了函数体内的this指向，从第二个参数开始往后，每个参数依次被传入函数：

var func = function(a, b, c){
  console.log([a, b, c]); 
};

func.call(null, 1, 2, 3);

当使用call或apply的时候，如果我们传入的第一个参数为null，函数体内的this会指向默认的宿主对象，在浏览器中则是window：

var func = function(a, b, c){
  console.log(this);
};

func.apply(null, [1, 2, 3]);  //输出：window对象
func.call(null, 1, 2, 3);        //输出：window对象

3.call()  和apply()用途

• 改变this指向

• Function.prototype.bind

• 借用其他对象的方法

3.1改变this指向：改变函数内部this的指向

var A = {
  name: 'nameA',
};

var B = {
  name: 'nameB',
};

window.name = 'nameWindow';

var getName = function(){
  console.log(this.name);
};

getName();             // 以普通函数调用，指向了window对象，输出nameWindow
getName.call(A);      // 改变了this的指向，指向了传入的对象，输出：nameA
getName.call(B);      // 改变了this的指向，指向了传入的对象，输出：nameB

3.2Function.prototype.bind

大部分高级浏览器都实现了内置的Function.prototype.bind，用来指定函数内部的this指向。若没有原生的Function.prototype.bind实现，可以通过模拟一个：

Function.prototype.bind = function(context){
  var self = this;  // 保存原函数
  return function(){  // 返回一个新的函数
      return self.apply(context, arguments);  // 执行新函数的时候，会把之前传入的context当作新函数体内的this
  }
};

var obj = {
 name: "objName"
};

var func = function(){
  console.log(this.name);  
}.bind(obj);

func();                     // 输出：objName

3.3借用其他对象的方法

•     类数组对象的操作

想把arguments转成真正的数组的时候，可以借用Array.prototype.slice方法；

想往arguments中添加一个新的元素，可以借用Array.prototype.push：

想截去arguments列表中的头一个元素时，可以借用Array.prototype.shift方法。

(function(){
  Array.prototype.push.call(arguments, 3);
  console.log(arguments); // 输出：[1,2,3]
})(1, 2);

•    借用构造函数，可以实现类似继承

var A = function(name){
 this.name = name;
};

var B = function(){  // 借用A的构造函数
  A.apply(this, arguments); 
};

B.prototype.getName = function(){
  return this.name;
};

var b = new B('baby');
console.log(b.getName());  // 输出：baby