本篇是快速學(xué)習(xí)JavaScript筆記的最后一篇，很多地方總結(jié)的不好，所以說的會比較詳細(xì)。
前面兩篇的快速學(xué)習(xí)筆記：
面向Android的快速學(xué)習(xí)JavaScript筆記（基礎(chǔ)篇 上）
面向Android的快速學(xué)習(xí)JavaScript筆記（基礎(chǔ)篇 中）
如有理解錯(cuò)誤的地方，希望大家可以踴躍指出，我立即修改
最后繼續(xù)附上廖雪峰大神的JavaScript詳細(xì)教程

目錄：

• 面向?qū)ο缶幊?
  • 基本概述
  • 創(chuàng)建對象
  • 原型繼承
  • class繼承
• 瀏覽器
  • 概述
  • 瀏覽器對象
  • 操作DOM
    • 概述
    • 更新DOM
    • 插入DOM
    • 刪除DOM
• 操作表單
• 操作文件
• AJAX
• Promise
• Canvas

面向?qū)ο缶幊?/h2>

基本概述

• 與Java不同，JS不使用類和實(shí)例的概念，JS使用原型來實(shí)現(xiàn)OOP
• JavaScript的原型鏈和Java的Class區(qū)別就在，它沒有“Class”的概念
• 所有對象都是實(shí)例，所謂繼承關(guān)系不過是把一個(gè)對象的原型指向另一個(gè)對象而已。

var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

var xiaoming = {
    name: '小明'
};

xiaoming.__proto__ = Student;
//小明的原型指向Student，所以現(xiàn)在小明也可以使用run()
//也就相當(dāng)與Java的繼承

！注意：
不要直接使用  obj.__proto__ 去指向原型，應(yīng)使用下面這種方法
// 原型對象:
var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

function createStudent(name) {
    // 基于Student原型創(chuàng)建一個(gè)新對象:
    var s = Object.create(Student);
    // 初始化新對象:
    s.name = name;
    return s;
}

var xiaoming = createStudent('小明');
xiaoming.run(); // 小明 is running...
xiaoming.__proto__ === Student; // true

創(chuàng)建對象

• 原型鏈：指定對象屬性的時(shí)候會根據(jù)原型鏈一層一層往上找，找到了就返回，直到找的是null

var arr = [1, 2, 3];
其原型鏈?zhǔn)牵?arr ----> Array.prototype ----> Object.prototype ----> null
//原型鏈越長，訪問對象屬性的時(shí)間就越長，所以原型鏈不應(yīng)過長

• 構(gòu)造函數(shù)

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
//使用new來創(chuàng)建對象
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!
不使用new就返回undefined
使用new就會默認(rèn)返回this，this指向這個(gè)對象本身


使用new 創(chuàng)建的對象還從原型上獲得了一個(gè)constructor屬性，它指向函數(shù)Student本身：

xiaoming.constructor === Student.prototype.constructor; // true
Student.prototype.constructor === Student; // true

Object.getPrototypeOf(xiaoming) === Student.prototype; // true

xiaoming instanceof Student; // true

xiaoming.name; // '小明'
xiaohong.name; // '小紅'
xiaoming.hello; // function: Student.hello()
xiaohong.hello; // function: Student.hello()
xiaoming.hello === xiaohong.hello; // false

這里不同對象的hello函數(shù)是不一樣的，不過他們對于我們使用來說應(yīng)該是一樣的才行，所以
function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};
可以讓Student的原型去創(chuàng)造hello函數(shù)
這樣后面的student對象使用的hello就一樣了

• 比較好的創(chuàng)建方式：

對于忘記使用new的話，this指向的就是window對象，也就是在全局創(chuàng)建了一個(gè)name屬性
比較合理的創(chuàng)建對象的構(gòu)造應(yīng)該是這樣的：
function Student(props) {
    this.name = props.name || '匿名'; // 默認(rèn)值為'匿名'
    this.grade = props.grade || 1; // 默認(rèn)值為1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

function createStudent(props) {
    return new Student(props || {})
}

原型繼承

• JS中繼承上通過原型指向來實(shí)現(xiàn)繼承
• 而一般的方法就是創(chuàng)造一個(gè)中間對象來實(shí)現(xiàn)
• 重點(diǎn)把握原型指向 和 原型的構(gòu)造函數(shù)修復(fù)問題上

// PrimaryStudent構(gòu)造函數(shù):
function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 空函數(shù)F:
function F() {
}

// 把F的原型指向Student.prototype:
F.prototype = Student.prototype;

// 把PrimaryStudent的原型指向一個(gè)新的F對象，F(xiàn)對象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F();

// 把PrimaryStudent原型的構(gòu)造函數(shù)修復(fù)為PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent;

// 繼續(xù)在PrimaryStudent原型（就是new F()對象）上定義方法：
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

// 創(chuàng)建xiaoming:
var xiaoming = new PrimaryStudent({
    name: '小明',
    grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // 2

// 驗(yàn)證原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true

// 驗(yàn)證繼承關(guān)系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true

• 簡要封裝：

//實(shí)現(xiàn)對象之間的繼承函數(shù)
function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

class繼承

• 在ES6中才引入的關(guān)鍵詞class
• 作用：簡化繼承，減少代碼量
• 與Java基本一致，比較容易理解

//使用class創(chuàng)建對象
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

//繼承的使用
class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 記得用super調(diào)用父類的構(gòu)造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

瀏覽器

概述

主要瀏覽器：

• IE 6~11：國內(nèi)用得最多的IE瀏覽器，歷來對W3C標(biāo)準(zhǔn)支持差。從IE10開始支持ES6標(biāo)準(zhǔn)；

• Chrome：Google出品的基于Webkit內(nèi)核瀏覽器，內(nèi)置了非常強(qiáng)悍的JavaScript引擎——V8。由于Chrome一經(jīng)安裝就時(shí)刻保持自升級，所以不用管它的版本，最新版早就支持ES6了；

• Safari：Apple的Mac系統(tǒng)自帶的基于Webkit內(nèi)核的瀏覽器，從OS X 10.7 Lion自帶的6.1版本開始支持ES6，目前最新的OS X 10.11 El Capitan自帶的Safari版本是9.x，早已支持ES6；

• Firefox：Mozilla自己研制的Gecko內(nèi)核和JavaScript引擎OdinMonkey。早期的Firefox按版本發(fā)布，后來終于聰明地學(xué)習(xí)Chrome的做法進(jìn)行自升級，時(shí)刻保持最新；

• 移動設(shè)備上目前iOS和Android兩大陣營分別主要使用Apple的Safari和Google的Chrome，由于兩者都是Webkit核心，結(jié)果HTML5首先在手機(jī)上全面普及（桌面絕對是Microsoft拖了后腿），對JavaScript的標(biāo)準(zhǔn)支持也很好，最新版本均支持ES6。

需要注意：某某安全瀏覽器，某某旋風(fēng)瀏覽器，它們只是做了一個(gè)殼，其核心調(diào)用的是IE

對于編寫JavaScript的時(shí)候，就要充分考慮到瀏覽器的差異，盡量讓同一份JavaScript代碼能運(yùn)行在不同的瀏覽器中

瀏覽器對象

• window：

  • 不但充當(dāng)全局作用域，也表示瀏覽器窗口
  • innerWidth屬性：獲取瀏覽器窗口內(nèi)部的寬度
  • innerHeight屬性：獲取瀏覽器窗口內(nèi)部的高度
  • outerWidth屬性：獲取瀏覽器窗口整個(gè)的寬度
  • outerHeight屬性：獲取瀏覽器窗口整個(gè)高度

• navigator:

  • 瀏覽器 信息對象
  • navigator.appName：瀏覽器名稱；
  • navigator.appVersion：瀏覽器版本；
  • navigator.language：瀏覽器設(shè)置的語言；
  • navigator.platform：操作系統(tǒng)類型；
  • navigator.userAgent：瀏覽器設(shè)定的User-Agent字符串。
  • navigator信息容易被修改，為了針對不同瀏覽器 ：

    var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = window.innerWidth || document.body.clientWidth;
}

• screen：

  • 屏幕信息對象
  • screen.width：屏幕寬度，以像素為單位；
  • screen.height：屏幕高度，以像素為單位；
  • screen.colorDepth：返回顏色位數(shù)，如8、16、24。

• location：

  • 當(dāng)前頁面的URL信息對象

location.href; //http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

`location.assgin('/di');` //加載新頁面
`location.reload();` //重新加載當(dāng)前頁面

• document

  • 由于HTML在瀏覽器中以DOM形式表示為樹形結(jié)構(gòu)，document對象就是整個(gè)DOM樹的根節(jié)點(diǎn)。
  • document的title就是HTML中的'title內(nèi)容讀取document.title='hahahha'; 。
  • document.getElementById(id) 根據(jù)傳入id獲取節(jié)點(diǎn)對象
  • document.getElementsByTagName() 根據(jù) TagName讀取節(jié)點(diǎn)對象
  • document.cookie; 獲取當(dāng)前頁面的cookie信息

• history

  • 瀏覽器的歷史記錄信息對象
  • history.forward() 前進(jìn)
  • history.back() 后退
  • 任何時(shí)候都不應(yīng)使用history對象

操作DOM

概述：

• 更新：更新該DOM節(jié)點(diǎn)的內(nèi)容，相當(dāng)于更新了該DOM節(jié)點(diǎn)表示的HTML的內(nèi)容；

• 遍歷：遍歷該DOM節(jié)點(diǎn)下的子節(jié)點(diǎn)，以便進(jìn)行進(jìn)一步操作；

• 添加：在該DOM節(jié)點(diǎn)下新增一個(gè)子節(jié)點(diǎn)，相當(dāng)于動態(tài)增加了一個(gè)HTML節(jié)點(diǎn)；

• 刪除：將該節(jié)點(diǎn)從HTML中刪除，相當(dāng)于刪掉了該DOM節(jié)點(diǎn)的內(nèi)容以及它包含的所有子節(jié)點(diǎn)。

• 代碼常用做法：

// 返回ID為'test'的節(jié)點(diǎn)：
var test = document.getElementById('test');

// 先定位ID為'test-table'的節(jié)點(diǎn)，再返回其內(nèi)部所有tr節(jié)點(diǎn)：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID為'test-div'的節(jié)點(diǎn)，再返回其內(nèi)部所有class包含red的節(jié)點(diǎn)：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 獲取節(jié)點(diǎn)test下的所有直屬子節(jié)點(diǎn):
var cs = test.children;

// 獲取節(jié)點(diǎn)test下第一個(gè)、最后一個(gè)子節(jié)點(diǎn)：
var first = test.firstElementChild;
var last = test.lastElementChild;

//版本<IE8是不支持下面功能的
// 通過querySelector獲取ID為q1的節(jié)點(diǎn)：
var q1 = document.querySelector('#q1');

// 通過querySelectorAll獲取q1節(jié)點(diǎn)內(nèi)的符合條件的所有節(jié)點(diǎn)：
var ps = q1.querySelectorAll('div.highlighted > p');

更新DOM

• innerHTML方式修改

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設(shè)置文本為abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 設(shè)置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的內(nèi)部結(jié)構(gòu)已修改

• innerText或textContent方式修改

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設(shè)置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動編碼，無法設(shè)置一個(gè)<script>節(jié)點(diǎn):
// <p id="p-id"><script>alert("Hi")</script></p>

版本<IE9是不支持textContent

• 修改節(jié)點(diǎn)的css樣式

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設(shè)置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入DOM

• appendChild(節(jié)點(diǎn)對象) ：將子節(jié)點(diǎn)添加到到父節(jié)點(diǎn)最后
• createElement(什么節(jié)點(diǎn)) ：創(chuàng)建一個(gè)新的節(jié)點(diǎn)
• insertBefore(newElement, referenceElement);插入節(jié)點(diǎn)

<!-- HTML結(jié)構(gòu) -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

var
    js = document.getElementById('js'),//獲取節(jié)點(diǎn)
    list = document.getElementById('list');
list.appendChild(js);//在尾部添加節(jié)點(diǎn)

var 
    python=document.getElementById('python');//獲取python節(jié)點(diǎn)
    haskell = document.createElement('p'); //創(chuàng)建節(jié)點(diǎn)
haskell.id = 'haskell'; //設(shè)置節(jié)點(diǎn)屬性
haskell.innerText = 'Haskell';
list.innerBefore(haskell,python);

<!-- HTML結(jié)構(gòu) -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

刪除DOM

• 刪除節(jié)點(diǎn)以后節(jié)點(diǎn)數(shù)動態(tài)變化
• child.parentElement; 獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
• parent.removeChild(child); 獲取父節(jié)點(diǎn)然后調(diào)用remove傳入要刪除的節(jié)點(diǎn)對象

操作表單

• HTML表單中的輸入控件：

  • 文本框，對應(yīng)的<input type="text">，用于輸入文本；

  • 口令框，對應(yīng)的<input type="password">，用于輸入口令；

  • 單選框，對應(yīng)的<input type="radio">，用于選擇一項(xiàng)；

  • 復(fù)選框，對應(yīng)的<input type="checkbox">，用于選擇多項(xiàng)；

  • 下拉框，對應(yīng)的<select>，用于選擇一項(xiàng)；

  • 隱藏文本，對應(yīng)的<input type="hidden">，用戶不可見，但表單提交時(shí)會把隱藏文本發(fā)送到服務(wù)器。

• 獲取與修改值:

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
//對于選框要使用checked來獲取
mon.checked; // true或者false
tue.checked; // true或者false

• 提交表單；
  • 1、調(diào)用表單對象的submit()，不過會影響了form的正常提交
  • 2、響應(yīng)form的onSubmit事件

!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit_Two</button>
    <button type="button" onclick="doSubmitForm()">Submit_One</button>
</form>

//第一種方式
<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>

//第二種港式
<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 繼續(xù)下一步:
    return true;
}
</script>

操作文件

• 獲取文件url：

var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'

• H5新增的File API提供了對File文件操作的支持

var
    fileInput = document.getElementById('test-image-file'),
    info = document.getElementById('test-file-info'),
    preview = document.getElementById('test-image-preview');
// 監(jiān)聽change事件:
fileInput.addEventListener('change', function () {
    // 清除背景圖片:
    preview.style.backgroundImage = '';
    // 檢查文件是否選擇:
    if (!fileInput.value) {
        info.innerHTML = '沒有選擇文件';
        return;
    }
    // 獲取File引用:
    var file = fileInput.files[0];
    // 獲取File信息:
    info.innerHTML = '文件: ' + file.name + '<br>' +
                     '大小: ' + file.size + '<br>' +
                     '修改: ' + file.lastModifiedDate;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('不是有效的圖片文件!');
        return;
    }
    // 讀取文件:
    var reader = new FileReader();
    reader.onload = function(e) {
        var
            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...'            
        preview.style.backgroundImage = 'url(' + data + ')';
    };
    // 以DataURL的形式讀取文件:
    reader.readAsDataURL(file);
});

• 回調(diào)：讀取文件一般都是異步的操作：

reader.readAsDataURL(file);
reader.onload = function(e) {
    // 當(dāng)文件讀取完成后，自動調(diào)用此函數(shù):
};

AJAX

AJAX: Asynchronous JavaScript and XML :用JavaScript執(zhí)行異步網(wǎng)絡(luò)請求
這里直接跳到網(wǎng)頁去看吧：
走你： AJAX

Promise

用于封裝異步操作，以便根據(jù)異步操作是否成功來進(jìn)行后續(xù)的操作。
走你：Promise

Canvas

• HTML5新增的組件，用于繪制動畫圖標(biāo)等
• HTML中canvas的聲明定義
• canvas的獲取
• canvas的使用 : 這里的使用和Android中十分相似，很好理解
• canvas繪制坐標(biāo)如下

坐標(biāo)

canvas在HTML中的定義
<canvas id="test-stock" width="300" height="200">
    <p>Current Price: 25.51</p>//瀏覽器對H5的支持不一致，所以最好加上說明性代碼，這一句就是，如果瀏覽器支持，就會忽略這一句代碼
</canvas>

var ctx = canvas.getContext('2d');//獲取2Dcanvas

var gl = canvas.getContext("webgl");//獲取3D canvas

ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小為200x200的矩形，擦除的意思是把該區(qū)域變?yōu)橥该?ctx.fillStyle = '#dddddd'; // 設(shè)置顏色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小為130x130的矩形涂色
// 利用Path繪制復(fù)雜路徑:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
ctx.strokeStyle = '#0000ff'; //顏色
ctx.stroke(path); //將路徑畫在canvas上

//繪制文本
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('帶陰影的文字', 20, 40);

最后：
對于JavaScript的基礎(chǔ)學(xué)習(xí)就到這里了，這個(gè)系列只是簡單的讓大家對JS有一個(gè)快速的認(rèn)知和掌握，具體在開發(fā)中還是要慢慢琢磨，希望對在做安卓開發(fā)又想拓展一下前端知識的你有一點(diǎn)點(diǎn)幫助。
至于前端后面的一些框架的學(xué)習(xí)使用的筆記，近期是沒有寫的打算了。
PS：
下一步會把數(shù)據(jù)結(jié)構(gòu)和算法的知識捋一遍，并記錄在我的博客中
如果對這方面內(nèi)功知識有興趣的，可以關(guān)注一下哈。