add:(1)ES6。(2)关于this的一道题。
This commit is contained in:
@@ -7,23 +7,91 @@
|
||||
|
||||
- 特别是当我们不知道一个对象是什么,或者这个对象没有名字但又很想调用它的时候,就会使用到this对象。
|
||||
|
||||
举例:
|
||||
**举例:**
|
||||
|
||||
- 遍历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的作用,就体现出来了。
|
||||
|
||||
### 全局作用域中的this
|
||||
|
||||
当一段代码在浏览器中执行时,所有的全局变量和对象都是在window对象上定义的。换而言之,所有的全局变量和对象都属于window对象。
|
||||
|
||||
|
||||
|
||||
### this的定律
|
||||
|
||||
|
||||
this关键字永远指向函数(方法)运行时的**所有者**。
|
||||
|
||||
|
||||
### 函数赋值给变量时,this指向window
|
||||
|
||||
|
||||
|
||||
24
03-JavaScript(二)/浅拷贝和深拷贝.md
Normal file
24
03-JavaScript(二)/浅拷贝和深拷贝.md
Normal file
@@ -0,0 +1,24 @@
|
||||
|
||||
## 浅拷贝
|
||||
|
||||
对于对象或数组类型,当我们将a赋值给b,然后更改b中的属性,a也会随着变化。
|
||||
|
||||
也就是说,a和b指向了同一块堆内存,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝。
|
||||
|
||||
## 深拷贝
|
||||
|
||||
那么相应的,如果给b放到新的内存中,将a的各个属性都复制到新内存里,就是深拷贝。
|
||||
|
||||
也就是说,当b中的属性有变化的时候,a内的属性不会发生变化。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
参考链接:
|
||||
|
||||
- [深拷贝与浅拷贝的实现(一)](http://www.alloyteam.com/2017/08/12978/)
|
||||
|
||||
- [javaScript中浅拷贝和深拷贝的实现](https://github.com/wengjq/Blog/issues/3)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user