前端学习总结

# 前端学习总结

> <$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.");

}

```