javascript中的this到底是指什么(二)?

在我的上一篇博客中有写到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
 

 

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值