前端学习总结
# 前端学习总结
> <$1> 代表重点1,<#1> 代表引用重点1
## 脚本javascript
## 1.变量作用域
`JavaScript通过函数管理变量作用域。在函数内部声明的变量只在这个函数内部，函数外面不可用。`<$1>
另一方面，全局变量就是在任何函数外面声明的或是未声明直接简单使用的。
每个JavaScript环境有一个全局对象，当你在任意的函数外面使用this的时候可以访问到。
你创建的每一个全部变量都成了这个全局对象的属 性。在浏览器中，方便起见，该全局对象有个附加属性叫做window，此window(通常)指向该全局对象本身。下面的代码片段显示了如何在浏览器环境 中创建和访问的全局变量：
```js
var myglobal = "hello";
console.log(myglobal); // "hello"
console.log(window.myglobal); // "hello"
console.log(window["myglobal"]); // "hello"
console.log(this.myglobal); // "hello"
```
> 理解 . [] this 含义
## 局部变量和全局变量的区别
## 代码案例1.1
```js
var handsome='handsome';
function handsomeToUgly(){
console.log(handsome);
}
handsomeToUgly();
```
> 结果:输出 handsome
```js
var handsome='handsome';
function handsomeToUgly(){
console.log(handsome);
var handsome='ugly';
console.log(handsome);
}
handsomeToUgly();
```
> 结果: 先输出undinfed ,后输出ugly
```js
var a = "Hello";
function test(){
console.log(a);
a = "World";
console.log(a);
}
```
> 结果:先输出 Hello ,后输出 World
> 结论:变量是存在作用域区别;`javascript在执行时,会先对函数片段进行解析,而不是从上至下执行;`<$2>函数片段执行时,先从local scope加载变量;变量没有在函数中声明,则从全局变量中寻找;没有则为 undinfed
> 补充: 变量分为3种;1,未声明;('undinfed')2,声明未赋值;('undinfed')3,声明且赋值;
## 2.Object
### Object
> Object对象，是所有JavaScript对象的超类(基类)。Object.prototype(Obecjt的原型)定义了Js对象的基本方法和属性。
#### Object 代码2.1
``` js
var obj=new Object(123);
console.log('obj的类型为'+obj+'\n typeof obj 的结果为'+typeof obj);
```
> new Object(value) ：根据value的值，返回不同的对象(Number、Boolean、String)
#### Object 代码2.2 __proto__ 和 prototype
``` js
//函数声明,函数也是对象
function People(name) {
this.name = name;
}
function Student(age) {
this.age = age;
}
Student.prototype = new People(); // 设置Student的原型为People对象
var s = new Student(22);
//s 相当于 这个Student的内存引用
console.log(s.__proto__); // => People 对象
console.log(Student.prototype); // => People 对象
console.log(s.__proto__ == Student.prototype); // => true
var p = {}; // 等于var p=new Object()
console.log(p.__proto__ == Object.prototype); // => true
```
> 原型对象拥有.prototype属性，而对象的引用包含.__proto__属性;
```
巧记 :__proto__ 两个线穿针引线,是引用.
```
> 如果在一个函数前面带上new来调用该函数，那么将创建一个隐藏连接到该函数的prototype成员的新对象
#### Object 代码2.3
```js
var Student = function (name) {
this.name = name;
//this 指向的是将来使用它的对象引用<$3>
};
var st = new Student('张三'); // 初始化对象st
//给对象的引用st,添加一个sayHello方法
//注: 这时并非所有Student原型存在此方法
st.__proto__.sayHello = function () {
console.log('Hello,' + this.name);
}
console.log(st.name); // => 张三
st.sayHello(); // 弹出：Hello,张三
```
#### Object 代码2.4 <疑问>
```js
function JSClass()
{
var myName = 'var';
this.m_Name = 'this';
}
JSClass.prototype.ToString = function()
{
console.log(myName + ', ' + this.m_Name);
//myName是局部变量,外部无法调用<#1>
//this <#3>
};
var jc = new JSClass();
console.log(jc.m_Name+' '+jc.myName);
//myName undinfed 变量作用域<#1>
jc.ToString();
//JSClass.ToString(); 直接调用失败
//JSClass 是原型对象,无法调用方法.
```
#### Object 代码2.5 this
> this指向函数执行时的当前对象。
```js
var someone = {
name: "Bob",
showName: function(){
console.log(this.name);
}
};
var other = {
name: "Tom",
showName: someone.showName
}
other.showName();//Tom
```
> - this关键字虽然是在someone.showName中声明的，但运行的时候是other.showName，所以this指向other.showName函数的当前对象
> - `this在Javascript中和执行环境有关，而和声明环境无关。`<$4>
> 当没有明确的执行时的当前对象时，this指向全局对象window。
#### Object 代码2.6 this <疑惑>
```js
var name = "Tom";
var Bob = {
name: "Bob",
show: function(){
alert(this.name);
}
}
var show = Bob.show;
show();//Tom
Bob.show();//Bob
var name = "windowx";
var Bob = {
name: "Bob",
showName: function(){
alert(this.name);
}
};
// Bob 是个对象引用 var Bob={}; <==> var Bob= new Object();
var Tom = {
name: "Tom",
showName: function(){
var fun=Bob.showName;
fun();
//这里的this没有指向任何对象的引用,所以指向全局变量
}
};
Tom.showName();//windowx
```
#### Object 代码2.7 Construct
```js
function People(name) {
this.name = name; // s对象初始化时，先调用People构造函数，再调用Student构造函数
console.log('People调用');
}
function Student(age) {
this.age = age;
console.log('Student调用');
}
Student.prototype = new People(); // 设置Student的原型为People对象
var s = new Student(22);
console.log(s.constructor); // => function People 构造函数
```
>var o={}; console.log(o.constructor === Object); // true ：`对象的引用的constructor 等于 原型对象`
### 3.对象属性
> - 假设读取某个对象的属性x，首先会在此对象的实例属性中查找。若没有找到，将会在此对象的原型对象中查找属性x
> - 对象中的属性，根据是否自身的可分为自有属性和继承属性
> - 属性的访问方式 可分为 ' . '点访问方式和' [ ] '中括号方法方式 。
> - [] 访问方式说明：属性名称可以为一个静态字符串，也可以为一个变量。若为变量，访问的属性为变量表示的值。
## 4.函数声明和函数表达式
### 闭包函数4.1
> 闭包(closure)的技术是为了模拟“类”
#### 封装私有属性 代码4.1
```js
function funA() {
var i = 0;
function funB() { //闭包函数funB
i++;
alert(i)
}
return funB;
}
var a1 = funA();
a1();
a1();//全局变量引用：累加输出1,2等
function funC() {
var i = 0;
//每一次变量的声明,都会重新赋值;
i++;
alert(i);
}
//普通函数,每次调用都从i=0 开始
```
> 关于闭包的原理
```
1: 当函数Fun被定义时，JS会把当前有效的Scope Chain保存在函数对象当中备查.
2: 当一个函数被执行时，会创建一个新的Scope Object，再将函数内容完全分析一遍，将参数和局部变量都加成新Scope对象的属性，最后将新Scope Object作为Scope Chain的最后一节，更新Scope Chain。
```
#### 模拟类 代码4.2
```js
function Person(firstName, lastName, age)
{
//私有变量：
var _firstName = firstName;
var _lastName = lastName;
//公共变量:
this.age = age;
//方法：
this.getName = function()
{
return(firstName + " " + lastName);
};
this.SayHello = function()
{
alert("Hello, I'm " + firstName + " " + lastName);
};
};
```
> var 和 this 的区别
```
代码2 中,新建对象 var p=new Person('Bill','Gates',60);
无法获得 var声明的_firstName(非全局变量),是因为变量声明在函数中;
this 声明的变量,this指向p中的60,且Person.age也无法获得值
```
## 5.命名空间
#### 代码5.1
```js
var module = {};
module.color.changeFgColor = function(color) {
document.body.style.background = color;
};
module.color.changeBgColor = function(color) {
document.body.style.background = color;
};
<===>
var module=
{
// 颜色模块
color : {
// 背景颜色改变功能
changeBgColor : function(color){
document.body.style.background = color;
},
// 前景颜色改变功能
changeFnColor : function(color){
document.body.style.color = color;
}
}
}
```
#### 代码5.2
```javascript
(function(namespace) {
"use strict";
// 函数：获取jQuery版本号
function getJQueryVersion() {
return $.fn.jquery;
}
// 函数：获取ContextPath
function getContextPath() {
var pathName = document.location.pathname;
var index = pathName.substr(1).indexOf("/");
var result = pathName.substr(0, index + 1);
return result;
}
namespace.getJQueryVersion = getJQueryVersion;
namespace.getContextPath = getContextPath;
})(xspring);
```
> - (function(arg){…})(param)
> - 相当于定义了一个参数为arg的匿名函数(并且这个匿名函数立即执行)，并且将param作为参数来调用这个匿名函数
#### 代码5.3
```js
var param={};
(function(arg){
function xx(){
return 1;
}
arg.xx=xx;
})(param);
```
> 将函数定义在命名空间中的方法.
#### 代码5.4
> 即时获得 dom 列表下标
```js
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
(function(index){
lists[ index ].onmouseover = function(){
alert(index);
};
})(i);
}
```
## 立即执行的函数
```
(function foo(){})();
(function foo(args){alert(args)})(1);
```
## JavaScript标准规定的类型
JavaScript标准中规定了9种类型:Undefined Null Boolean String Number Object Reference List Completion 其中，Reference List Completion三种类型仅供语言解析运行时使用，无法从程序中直接访问.
typeof获取变量类型名称的字符串表示，他可能得到的结果有6种：string、bool、number、undefined、object、function
Type | Result|
----|----|
Undefined | "undefined"
Null | "object"
Boolean| "boolean"
Number |"number"
String |"string"
Object (native and doesn't implement [[call]]) |"object"
Object (native and implements [[call]]) |"function"
Object (host) |Implementation-dependent
```js
if ("undefined" === typeof jQuery) {
throw new Error("Dayspring\'s javaScript requires jQuery.");
}
```
