前端學習總結

# 前端學習總結
> <$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.");
}
```
相關文章
相關標籤/搜索