JavaScript中this、apply()、call()的用法及解释示例

说到javascript中的this不得不提及javascript中函数调用的四种模式，即

函数调用模式

对象的方法调用模式

构造函数调用模式

上下文调用模式

因为不同的函数调用模式，this的指向时不同的。现在一一来看四种调用模式。

1.函数调用模式：

function test(){
console.log(this);//window
}
test();

这也是函数最通常的用法，属于全局性调用。*因此this指向window*

2.对象的方法调用模式

var age = 10;
var obj = {
age : 20,
test:function(){
console.log(this.age); //20
}
}
obj.test();

将函数作为对象的属性，这样就转化为对象的一个方法。通过对象调用这个方法时，this就指向调用这个方法的对象。

3.构造函数模式

function Person(age){
this.age = age;
this.sayAge = function() {
console.log(this.age);
}
}
var obj =new Person(18);
obj.sayAge();
var obj1 = new Person(20);
obj1.sayAge(); //20

.构造函数中的this指定的是new关键字创建出来的对象。

4.上下文调用模式

在讲这个之前，练习几道题目算是对函数调用模式，对象方法调用模式，构造函数模式的巩固。

讲道理，你知道下面分别输出什么吗？

var age = 10;
var obj = {
age : 18,
getAge : function(){
console.log(this.age);
}
};
var a = obj.getAge();
var getAge = obj.getAge;
getAge();

var age = 10;
var obj = {
age :18,
getAge : function(){
console.log(this.age);
function foo(){
console.log(this.age);
}
foo();
}
};
obj.getAge();

来个简单的吧

var age = 38;
var obj = {
age:18,
getAge: function() {
console.log(this.age);
}
};
var f = obj.getAge;
f();

来个难一点的

var length = 99;
function f(){
console.log(this.length);
}
var obj = {
length : 5,
method : function(f) {
f();
arguments[0]();
}
};
obj.method(f,1,2,3,4,5);
arguments是一个伪数组对象. 它表示在函数调用的过程中传入的所有参数的集合。在函数调用过程中不规定参数的个数与类型, 可以使得函数调用变得非常灵活性。
先来个截图看看arguments中存储的是什么吧！

Arguments[0]相当于f函数，Arguments[0]()相当于调用f函数。

好了，接下来看第4中模式，上下文模式

4上下文模式

在JavaScript中，所有的函数都是对象，因此函数也可以有自己的方法。所有的函数都有的两个方法，是apply(),call()。通过这两个方法可以修改this的值，也就是可以修改函数的调用方式。

apply()方法调用给一个函数，其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数

函数.apply(对象，函数需要的参数列表是一个数组)

fun.apply(thisArg,[argsArray])

参数

thisArg: 在fun函数运行时指定的this值。 需注意：指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null或undefined时会自动指向全局对象（浏览器中的window对象），同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。

argsArray 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给fun函数。如果该参数的值为null或undefined，则表示不需要传入任何参数。

call()方法的作用和apply()方法类似。区别是，call()方法接受的是若干个参数列表，而apply()方法接受的是一个包含多个参数的数组。

函数.call(对象,arg1,arg2,arg3…argn)

fun.call(thisArg,arg1,arg2,…)

简单总结一下

1.第一个参数都是要把this修改成的对象

2.当函数需要参数的时候，那么apply是用数组进行参数的传递

3.而call是使用单个的参数进行传递。

4.apply用于确定了函数形参有多少个的时候使用，apply用于函数的形参个数不确定的情况

示例1：

var nickname = "kong";
function sayNick(){
console.log(this.nickname);
}

var obj = {
nickname: "diligentkong"
}

sayNick.apply(obj); //diligentkong
sayNick.call(obj);//diligentkong

var obj1 = {
nickname :"qq"
}
sayNick.apply(obj1);//qq
sayNick.apply(null);//kong
sayNick.apply(undefined);//kong
sayNick.apply(window);//kong

function test(){
console.log(this);
}
test.apply(1); //Numner
test.apply("a"); //String
test.apply(true); //Boolean

// 如果想取值的话，把test()修改为
function test(){
console.log(this.valueOf());

}
test.apply(1); //1
test.apply("a"); //a
test.apply(true); //true

apply()的妙用，求一个数组中的最大值
var arr =[3,10,2,7,-4,56,88];
var Arrmax = Math.max.apply(null,arr);
console.log(Arrmax); //88

解释一下：

apply()和call()方法第一个参数为null时2，都表示为函数调用模式，也就是this指向window

apply()方法的第二个参数是一个数组，再调用的时候，会把数组中的每一个元素拿出来，挨个传递个函数

将传入的参数打印，参数之间用-相互连接
function fun(){
//var str = Array.prototype.join.apply(arguments,["-"]);
var str = [].join.apply(arguments,["-"]);
return str;
}
var str =fun("a","t",9,"c",6);
console.log(str);

还可以用apply和call 实现继承,这种继承的方法叫 借用构造函数

function Person() {
this.name ="kong";
this.age = 18;
}
function Student() {
Person.apply(this);
}
var stu = new Student();

console.log(stu);