Js中call apply函数以及this用法-白红宇

Js中call apply函数以及this用法

阅读量：6209 次

发布时间：2019-06-21

本文共 3317 字，大约阅读时间需要 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();//1var 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调用原型中的方法：

// 写法1var arr1 = ["a1","b2","c3"];var value1 = arr1.shift();//shift把数组的第一个元素从其中删除，并返回第一个元素的值console.log(value1);　　//a1//写法2var 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模仿继承：

这里就是把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()

颠倒数组中元素的顺序