在我的上一篇博客中有写到javascript中this关键字方面的知识,我在里面提到过一句话:谁调用了我,我就是谁的对象。谁最后调用了我,我就是谁的对象。
其实这个this指向的对象也是可以改变的,那怎样才能改变这个this指向的对象呢?相信接触过javacrript一段时间的朋友对call()方法以及apply()方法都不会陌生吧。接下来就一起来看看这两个方法的具体用法吧。
1.apply()、call()这两个方法都是属于函数的,即每个函数都默认有这两个方法,只能被函数所调用
2.这两个方法的作用都是一样的,都是为了改变this指向的作用域,只是用法稍有不同而已
3.这两个方法都接收两个参数,第一个参数都是要指向的对象,apply方法的第二个参数是一个用来接收参数列表的数组,而call方法的第二个参数是直接一个参数列表,用逗号分隔开
接下来就让我们来看代码解释吧。
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue' };
function changeColor(){
console.log(this.color);
}
changeColor.call(); //red (默认传递参数)
changeColor.call(window); //red
changeColor.call(document); //yellow
changeColor.call(this); //red
changeColor.call(s1); //blue
在上面的例子中分别在window,document以及s1这三个对象上定义了一个变量color,我们知道如果直接调用changeColor()方法的话,因为changeColor是挂载在window对象上面的全局函数,所以是被window对象调用,因此会打印出"red"字符串。可能大家会有疑问开始不是说apply,call方法都接收两个参数的吗,为啥在例子中有出现无参和一个参数的情况。如果不传递参数的话则默认指向对象为window,如果传递一个参数的话,则表示把this指向的对象变为参数一的对象。
接下来看看apply()方法代码例子(与上雷同)
window.number = 'one';
document.number = 'two';
var s1 = {number: 'three' };
function changeColor(){
console.log(this.number);
}
changeColor.apply(); //one (默认传参)
changeColor.apply(window); //one
changeColor.apply(document); //two
changeColor.apply(this); //one
changeColor.apply(s1); //three
这两个例子中因为都是传递的一个参数因此看不出来这两个方法的区别在哪里,接下来我会再提供一个实例来给大家看看
window.firstName = "Cynthia";
window.lastName = "_xie";
var myObject = {firstName:'my', lastName:'Object'};
function getName(){
console.log(this.firstName + this.lastName);
}
function getMessage(sex,age){
console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );
}
getName.call(window); // Cynthia_xie
getName.call(myObject); // myObject
getName.apply(window); // Cynthia_xie
getName.apply(myObject);// myObject
getMessage.call(window,"女",21); //Cynthia_xie 性别: 女 age: 21
getMessage.apply(window,["女",21]); // Cynthia_xie 性别: 女 age: 21
getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22
getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22