Js中call apply函数以及this用法

浏览数：26 / 时间：2015年06月11日

this介绍：

C#里this关键字的意义比较确定的。JavaScript的this关键字，随着函数使用场合不同，this的值会发生变化，感觉用法比较混乱，所以，现在是有必要整理一下的时刻了！

总结一个原则：在js里面，this指针代表的是执行当前代码的对象的所有者。

1、和c#类似的纯粹函数调用：

function test() {
  this.x = 1;
  alert(x);
}
test();//1

其实这里的this就是全局变量。看下面的例子就能很好的理解这里的this就是全局对象Global。

var x = 1;
function test() {
     alert(this.x);
}
test();//1

var x = 1;
function test() {
    this.x = 0;//修改了全局变量，this就是全局对象Global
}
test();
alert(x);//0

2、作为方法调用，那么this就是指它的上级对象。

function test() {
  alert(this.x);//this是指它的上级对象，这里的上级是调用该函数的对象p；
}
var p = {};
p.x = 1;
p.m = test;
p.m(); //1 ；这里m是test方法，p是this，输出的是p.x;

3、作为构造函数调用:所谓构造函数，就是用new生成一个新的对象。这时，这个this就是指这个对象。

function test() {
   this.x = 1;
}
var p = new test();
alert(p.x);//1；这里也可以理解为其上级对象是一个构造函数p；

4、apply调用this指向的是apply中的第一个参数。

var x = 0;
function test() {
   alert(this.x);
}
var p = {};//定义一个对象
p.x = 1;
p.m = test;
p.m.apply(); //0;当apply没有参数时，表示为全局对象。所以值为var x = 0；
p.m.apply(p);//1;p继承了test，但是this还是指向其上级对象p；

Call()与apply()两个方法介绍：

它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数方式有所区别：

call方法: call(thisObj，[arg1,arg2…] )
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法： apply(thisObj,argArray)
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作thisObj，并且无法被传递任何参数。

ECMAScript规范给所有函数都定义了Call()与apply()两个方法，call与apply的第一个参数都是需要调用的函数对象，在函数体内这个参数就是this的值，剩余的参数是需要传递给函数的值。二者区别在第二个参数上，call后面除了第一个参数是用来改变函数的this作用域之外，后面加几个参数，则函数就有几个参数，而apply总共就2个参数，第一个参数与call一样，第二个参数是一个数组，里面有几个值，则在执行函数时的参数就有几个，例子如下:

var fun = function(param1,param2){};

fun.call(window,1,2);

fun.apply(window,[1,2]);//这两个是等价的！

下面，我们看看二者都怎么用：

1.带参数和不带参数的区别

function main(){
    var str = "hello";
    console.log(str);
}
main.call();//hello；当call/apply没有参数时，表示为全局对象。所以值为hello；

2.利用call调用原型中的方法：

// 写法1
var arr1 = ["a1","b2","c3"];
var value1 = arr1.shift();//shift把数组的第一个元素从其中删除，并返回第一个元素的值
console.log(value1);　　//a1

//写法2
var arr2 = ["a1","b2","c3"];
var value2 = Array.prototype.shift.call(arr2);  //a1；调用原型prototype中的shift方法 console.log(value2);

console.log是一个打印js数组和对像的函数，大家用的最多查看js输出是alert，但是alert只能弹string或者是int，console.log可以在浏览器的控制台输出结果！很好的调试工具！

3.利用call模仿继承：

<script>
function fun1() {
    this.a = 123;
    this.add = function () {alert(this.a );}
}
function fun2() {
    this.a = 456;
}
var f1=new fun1()
var f2=new fun2()
var a = f1.add.call(f2); // a输出的是456，在函数体内参数f2就是this的值,像f2继承f1
</script>

这里就是把f1的方法拿给f2来使用，f2便可以使用f1中所有的方法，这就像高级语言中继承的概念（感觉像f2继承f1）。

4.使用多个call实现多继承：

function fun1() {
    this.add = function () { return this.a }
}
function fun2() {
    this.sub = function () { return this.a-this.b }
}
function fun3() {
    this.a = 10;
    this.b = 2;
    fun1.call(this);//this是当前对象fun3，它继承了fun1和fun2
    fun2.call(this);//作用是把fun1和fun2的方法“继承”给fun3
 }
 var f3 = new fun3()
 alert(f3.add());
 alert(f3.sub());//如此，想要继承谁就可以继承谁

上面用到一些数组的方法，这里整理一下：

Array 对象方法：

concat()

连接两个或更多的数组，并返回结果

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔(,)

pop()

删除并返回数组的最后一个元素

push()

向数组的末尾添加一个或更多元素，并返回新的长度

reverse()

颠倒数组中元素的顺序