在JavaScript中我们经常要使用到this关键字,但是有时候this的指向总是让我们搞不明白,理不清楚。总之刚开始接触的时候直接是一头雾水,当然this指向都没法搞清楚,那么就很难判断出很多代码输出的结果。比如以下代码中,大家可以猜一猜this指向的是谁?
1 | function getUrl(){ |
2 | console.log(this) |
3 | } |
4 | getUrl() |
以上代码中很简单的一个例子,其实我们打印出来后this指向的是window对象
然而这并没有什么卵用,最多就是我们知道了this的指向。由此JavaScript中就出现了call、apply方法,这两个方法主要是用于动态改变this指向的,他们的使用方法一样,只不过是传递的参数不一样罢了。
使用方法:
如果call或apply的第一参数是null的话, this指向window
1 | obj.myFunc(); |
2 | myFunc.call(obj,arg);//以参数的方式进行传递 |
3 | myFunc.apply(obj,[arg1,arg2..]);//以数组的方式进行传递 |
动态改变this指向
1 | function changeStyle(attr, value){ |
2 | this.style[attr] = value; |
3 | } |
4 | var box = document.getElementById('box'); |
5 | window.changeStyle.call(box,"height","200px") |
6 | window.changeStyle.apply(box,['height','200px']) |
以上代码都是直接将this指向了box对象
使用call以及apply实现继承
1 | var pepole = function(){ |
2 | this.name = 'jack'; |
3 | this.sex = 'M' |
4 | } |
5 | var man = {} |
6 | pepole.call(man) |
7 | console.log(man) //{name: "jack", sex: "M"} |
man继承了pepole对象的属性