881次阅读
强化this

为什么我们用this定义的变量会变成公有变量呢?我们先来看个例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>强化this</title>
</head>
<body>
  <script src="script.js"></script>
</body>	
check the result

javascript:

// 第一种方法
var xinxin = {};
xinxin.name = 'xinxin';
document.write(xinxin.name + "<br/>");

// 第二种方法
var Person = function(name) {
  this.name = name
}
var xinxin = new Person('xinxin');
document.write(xinxin.name + "<br/>");

// 第三种方法
var temp = new Object();
temp.name = 'xinxin'; //第二种方法的this就是新对象
var xinxin = temp;
document.write(xinxin.name + "<br/>");	

在这个例子中,第一种方法,我们定义了一个xinxin的对象,给了他一个name的属性,这时候我们的xinxin就有了name这个属性,这是很好理解的。但是这里的第二种方法,为什么xinxin也能有name这个属性呢?关键在于new Person,在javascript中,new关键词做这样几件事情:1、创建一个新的对象,这个对象的类型是Object;2、使用新对象调用构造函数;3、返回新对象。那么在调用构造函数时,里面的this就是新创建出来的object。还没懂?没关系,看看第三种方法,就是第二种方法的翻译版本。

如果你还没有理解this是什么,我们再来看个例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>强化this</title>
</head>
<body>
  <script src="script.js"></script>
</body>	
check the result

javascript:

function printName() {
  document.write(this.name + "<br/>");
}
printName(); //打印空
window.name = 'window';
printName(); //打印window
var xinxin = {};
xinxin.name = 'xinxin';
//xinxin.printName(); //Error, xinxin has no function printName
printName.apply(xinxin);	

在这个例子中,我们首先定义了一个function叫做printName,它打印出this.name。那么这里的this是什么呢?此时我们并不知道,要看谁来调用这个函数,谁调用这个函数,谁就是this。紧接着我们直接调用了printName(),那么这时候是谁在调用函数呢,是系统的默认对象window,window没有name这个属性,所以第一行打印出来空。然后我们为window定义一个name属性,这时候就能打印出来了。紧接着,我们定义了一个变量xinxin,给了他一个name,如果我们直接调用xinxin.printName,那么会报错,原因很简单,xinxin没有printName这个方法。但是apply可以让我们以xinxin的身份,调用printName。注意apply是Function的一个方法。printName.apply(xinxin)这句话的意思是,以xinxin的身份来调用printName,故printName里面的this就是xinxin,而xinxin有name,所以能够打印出来。

关于apply,我们再来看个例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>强化this</title>
</head>
<body>
  <script src="script.js"></script>
</body>	
check the result

javascript:

function add(a, b) {
  document.write(this.name + " can calculate " + a + "+" + b + "=" + (a + b) + "<br/>");
}
add(1,2);
var xinxin = {};
xinxin.name = 'xinxin';
add.apply(xinxin, [3, 4]);
add.call(xinxin, 3, 4);	

在这个例子中,我们定义了一个add方法,它是有参数的。首先我们直接调用add方法,从结果可以看出,this.name是没有值的,原因大家应该都能知道了。然后我们定义一个xinxin这个变量,想用它来调用add方法,并且传递参数,这里我们首先用了apply,参数是已一个数组的形式传递进去的,然后我们用了call,参数是依次传递的。其实call和apply基本一样,不一样的地方就在于参数的传递方式。

通过这节的学习,大家应该知道this到底是怎么回事了,妈妈再也不用担心我会晕this了。

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录