前端學習總結

# 前端學習總結

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

}

```