2023-10-26 task0003前端学习笔记
JavaScript作用域学习笔记
①：今天看了http://www.laruence.com/2009/05/28/863.html这位作者讲了js的作用域原理，让我豁然开朗，原来函数定义式与函数表达式的不同会导致作用域作用不一样
比如：var name = 'laruence';
function echo() {
alert(name);
var name = 'eve';
alert(name);
alert(age);
}
echo();
运行结果是：
undefined
eve
[脚本出错]
那为什么会这样呢？其实就是JS在执行每一段JS代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式)；而函数定义式会把函数定义提前，而函数表达式只有在执行过程中才会出来。所以回到例子看就知道函数echo()是定义式，因此这些都会被提前——alert(name);var name = 'eve';alert(name);alert(age);
且覆盖掉了var name = 'laruence';这个全局。因此结果就是：
undefined
eve
[脚本出错]
②：这位作者（http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html）讲的作用域与作用域链非常通俗易懂，感触颇深的是为了代码优化和性能提升，我们要注意全局变量与局部变量的区别，并且多使用局部变量（因为全局变量在标识符解析时，查找是最慢的，会影响性能），在平时工作中遇到程序中有大量的全局变量被从反复访问的话，考虑把它存储到局部变量再使用，例子如下：
function changeColor(){
document.getElementById("btnChange").onclick=function(){
document.getElementById("targetCanvas").style.backgroundColor="red";
};
}
这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：
function changeColor(){
var doc=document;
doc.getElementById("btnChange").onclick=function(){
doc.getElementById("targetCanvas").style.backgroundColor="red";
};
}
重写后的代码性能提升会好一些。
JavaScript原型学习笔记
https://www.cnblogs.com/wangfupeng1988/p/3977924.html
多说无益，还是上链接吧，这里不能放图片，不然就放原型图，这样会比较直观一点。
JavaScript闭包学习笔记
1.看了阮一峰的闭包讲解加上其他开发者的博客辅助，总算明白了闭包的概念——闭包就是能够读取其他函数内部变量的函数。
光说无用，还是看阮给出的例子吧：
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
通过上面的例子可以知道闭包的主要作用有两个：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
JavaScript面向对象编程与构造函数学习笔记
1.今天看了阮一峰的js面向对象编程的文章，简直是太有用了，之前我一直不太懂构造函数是啥意思，到底有啥作用，现在终于知道了我们为啥需要构造函数了：
①因为原型对象生成实例的问题是实例之间没有内在的联系，而且不能反映出它们是同一个原型对象的实例；因此就需要构造函数来帮忙。
②构造函数其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。这样就会让实例之间有了内在联系。但是如果它不利用prototype的话，就会存在浪费内存的问题，如下面的例子：
function Cat(name,color){
this.name = name;
this.color = color;
this.type = "猫科动物";
this.eat = function(){alert("吃老鼠");};
}
生成实例并运行结果是：
var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠
虽然这样看没啥问题，但我们仔细验证就会发现有端倪：
alert(cat1.eat == cat2.eat); //false
我们可以看到所有实例的type属性和eat()方法是不一样的，这样会导致效率降低。因此才需要prototype来让他们都指向同一个内存地址：
//代码同上
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};
//运行结果并验证：
alert(cat1.eat == cat2.eat); //true