Notes for a front-end developer, esyou.net

0%

老生常谈系列之THIS、CALL、APPLY

在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对象的属性