Js中call apply函数以及this用法

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()

颠倒数组中元素的顺序

shift()

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

slice()

从某个已有的数组返回选定的元素slice(start,end)：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()

sort()

对数组的元素进行排序

splice()

删除元素，并向数组添加新元素:array.splice(index,howmany,item1,.....,itemX)

arr.splice(2,0,"William")

index : 整数，规定添加/删除项目的位置（从0开始），使用负数可从数组结尾处规定位置。

howmany : 要删除的项目数量，如果设置为 0，则不会删除项目插入，1替换。

item1, ..., itemX : 可选，向数组添加的新项目。

toString()

把数组转换为字符串，并返回结果

unshift()

arrayObject.unshift(newelement1,newelement2,....,newelementX)：向数组的开头添加一个或更多元素，并返回新的长度

valueOf()

返回数组对象的原始值

巴特西

Js中call apply函数以及this用法

最新文章

热门文章