Web/03-JavaScript(二)/this.md

138 lines
2.7 KiB
Markdown
Raw Normal View History

2018-03-15 14:01:25 +08:00
## this
### this的作用
- this可以帮我们简化很多代码。比如`xiaoming.name`、`xiaoming.age`可以直接写成`this.name`、`this.age`。
- 特别是当我们不知道一个对象是什么或者这个对象没有名字但又很想调用它的时候就会使用到this对象。
**举例:**
2018-03-15 14:01:25 +08:00
- 遍历DOM对象绑定click事件调用当前点击的对象的id而不是所有对象的id。
代码:
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<script>
window.onload = function () {
var myDiv = document.getElementsByTagName('div');
for (i = 0; i < myDiv.length; i++) {
myDiv[i].onclick = function () {
console.log(i);
}
}
}
</script>
<section>
<div id="div0"> div0</div>
<div id="div0"> div1</div>
<div id="div0"> div2</div>
<div id="div0"> div3</div>
<div id="div0"> div4</div>
</section>
</body>
</html>
```
上方代码的正确打印结果是5。你可能会觉得很惊讶。我们来解释一下
当代码执行完毕后i已经等于5了。因为一旦运行程序for循环已经执行完了此时i等于5。
如果我们尝试在 myDiv[i].onclick事件中写代码的时候如果打印
```
console.log(i); //打印结果为5
```
如果打印:
```
console.log(myDiv[i].id);
```
上方这行代码打印会报错因为i=5如果想打印每个div的id应该这样写
```
console.log(this.id);
```
你看this的作用就体现出来了。
2018-03-15 14:01:25 +08:00
### 全局作用域中的this
当一段代码在浏览器中执行时所有的全局变量和对象都是在window对象上定义的。换而言之所有的全局变量和对象都属于window对象。
### this的定律
this关键字永远指向函数方法运行时的**所有者**。
### 函数赋值给变量时this指向window
比如:
```
var foo1 = args.getInfo;
foo1();
var foo2 = function(){};
foo2();
```
this都是指向window。
### 以函数形式调用时this永远都是window
### 以方法的形式调用时this是调用方法的对象
### 解决闭包中的this指向问题
内部函数是可以访问到外部函数的变量的。
方式一:直接通过父函数的名字访问
方式二:如果不知道父函数的名字,在父函数里加一句`_this = this`,此时`_this`相当于父函数的名字。
### 当this遇到一些特殊的函数时