javascript的基礎知識及面向對象和原型屬性

本身總結一下javascript的基礎知識，但願對你們有用，也但願你們來拍磚，畢竟是我的的理解啊

1.1 類型檢查：typeof（驗證數據類型是：string）

var num = 123; console.log(typeof num); // 

1.2 in 運算符

做用：判斷指定屬性是否存在於指定的對象中。

若是指定的屬性存在於指定的對象中，則 in 運算符會返回 true。

語法：
屬性 in 對象

返回值：true 或者 false

示例：
var obj = {
    age: 18
};
var hasAge = "age" in obj;
console.log(hasAge); // 

• 問題：如何判斷對象存在某個屬性或方法？

1 in
2 瀏覽器能力檢測

1.3 值類型和引用類型（重要）

值類型：變量中存儲的是數值自己
引用類型：變量中存儲的是數據的引用（地址）

對象中的屬性能夠是值類型也能夠是引用類型

• 面試題

var o = new Object(); function foo(obj) { obj.name = "腐女"; obj = new Object(); obj.name = "屌絲"; } foo(o); console.log(o.name); // 

1.4 邏輯中斷

||
若是第一個爲真 就返回第一個表達式, 若是爲假 則返回第二個表達式
&&
若是第一個爲假 就返回第一個表達式, 若是爲真則返回第二個表達式

• 練習：

function fn(num) {
    // 若是傳入num，就打印num的值
    // 若是沒有傳入 就打印 沒有參數
}

1.5 delete

做用：刪除一個對象的屬性。
語法：delete 屬性名
返回值： true 或 false

用法:
1 刪除數組中的元素
2 刪除對象的屬性或方法
3 刪除沒有用 var 聲明 變量

1.6 try-catch

// 語法:
try { // 可能出現錯誤的代碼 } catch ( e ) { // 出現錯誤會執行這裏的代碼 } finally { // 可選 // 不管是否出現異常, 最後執行 } // 手動拋出異常 throw new Error("別瞎搞"); throw "這都行？？？"; 

1.7 函數聲明和函數表達式的區別

• 函數聲明不容許出如今其餘中

// 函數聲明
function foo() {} // 函數表達式 var foo = function foo() {}; // 不推薦這麼作！！ if(true) { function f() { console.log(true); } } f(); 

概念：語句和表達式

表達式：(有值)
表達式（expression）是JavaScript中的一個短語，JavaScript解釋器會將其計算出一個值。
表達式能夠是：數據 或者 數據和運算符的組合
例如：一、"abc"、true、1 + 二、i++、a === b ? a : b 、a = 1

語句：(帶分號)
語句是JavaScript的句子或命令，以分號結束。
var a = 1;

2. 面向對象

2.1 爲何要面向對象？

面試中如何回答，什麼是面向對象？

• 1 面向對象和麪向過程的異同
• 2 在JavaScript中面向對象的表現形式
• 3 其餘語言中面向對象的表現形式（瞭解）

2.1.1 面向對象和麪向過程的區別

• jQuery建立對象和js建立對象對比

// jQuery
$("body").append("<p>jQuery建立節點就是如此瀟灑</p>"); // js var p = document.createElement("p"); var txt = document.createTextNode("creat E..，creat T..真麻煩"); p.appendChild(txt); document.body.appendChild(p); 

• 面向對象和麪向過程解釋

面向過程：全部的細節、步驟、過程，要一步一步親歷親爲（執行者）
面向對象：找到能完成這個事情的對象，讓它幫你完成就行（調度者）

生活中的例子：
作飯（叫外賣）
開公司

• 問題：面向對象這麼好，面向過程就沒用了？面向對象是對面向過程的一個封裝

• 案例：給div和p添加紅色邊框

// 經過標籤名獲取元素
function tag(tagStr) { return document.getElementsByTagName(tagStr); } var divs = tag("div"); for(var i = 0; i < divs.length; i++) { divs[i].style.border = "1px dotted red"; } var ps = tag("p"); for(var i = 0; i < ps.length; i++) { ps[i].style.border = "1px dotted red"; } 

• 練習：寫一個經過id屬性獲取元素的函數

2.1.2 函數封裝的問題

• 1 全局污染（變量在全局範圍內有效）
• 2 大量的函數沒法管理
• 3 使得維護變得困難

2.1.3 使用面向對象方式組織代碼

// 使用對象
var itcast = { id: function(idStr) { return document.getElementById(idStr); }, tag: function(tagStr) { return document.getElementsByTagName(tagStr); } }; 

2.2 面向對象優點（解決函數封裝問題）

• 封裝代碼，使代碼更好維護
• 減小全局污染
• 將功能相近的代碼組織到一塊兒維護方便，找錯方便

var itcast = { // 元素獲取模塊 getElem: { tag: function() {}, id: function() {} }, // 樣式模塊 css: { addStyle: function() {}, removeStyle: function() {}, hasStyle: function() {} } }; 

2.2.1 面向對象的基本模型

• 1 將數據與功能封裝成函數(方法)
• 2 將相關的功能綁定到一塊兒(對象)
• 3 將功能進行分組(模塊)

3. 經常使用DOM操做

3.1 四字總結：增刪改查

3.1.1 獲取元素操做

getElementById getElementsByTagName getElementsByClassName

3.1.2 元素節點操做

appendChild insertBefore removeChild replaceChild cloneNode
createElement createTextNode（建立文本節點）

3.1.3 屬性節點操做

getAttribute setAttribute removeAttribute

3.1.4 經常使用DOM屬性

className innerHTML innerText/textContent value
children 

3.2 DOM就是一個很是典型的面向對象，全部的節點都是對象

在DOM中全部的東西所有都是對象，因此，使用DOM很是簡單方便

jQuery中全部的東西也都是對象

4. 面向對象

• 案例：寫一個對象描述一我的要求有姓名、年齡、性別、sayHello

4.1 對象字面量（直接量）

4.1.1 對象是鍵值對的集合

• 屬性訪問語法：點運算符 和 []

// json 的表示法， 對象的直接量（字面量）
var p = { name: "jim", age: 19, sex: "男", sayHello: function() { alert("你好，哈哈哈哈"); } }; p.sayHello(); // 此時能夠把對象稱爲：關聯數組 p["sayHello"](); 

• 字面量的缺點：沒法複用

例如：
描述一個商品 Goods(name, price, img, count, pDate)

假若有 100 件

4.2 構造函數

• 優點：可複用

4.2.1 構造函數使用注意點（重點）

• 1 函數名以大寫字母開頭(推薦)
• 2 不須要返回值
• 3 爲對象添加成員使用 this.成員名 = 值
• 4 建立對象使用 new 關鍵字

var Person = function() { this.name = "jim"; this.age = 19; this.gender = "男"; this.sayHello = function() { alert("你好，哈哈哈哈"); }; }; // 建立對象（構造函數Person的對象） var p = new Person(); // 訪問對象的 屬性 console.log(p.name); // 訪問對象的 方法 p.sayHello(); 

• 案例：修改 Person 爲帶參數的形式
• 練習：

寫一個學生 Student, 要求有 姓名性別年齡和課程分數(語文, 數學, 英語)和說話的方法

4.3 函數參數問題

• 案例：求三角形面積（ s = d * h / 2）

// 不使用函數
var area = 10 * 10 / 2; // 封裝成函數 function getArea() { var area = 10 * 10 / 2; return area; } // 改進 function getArea(bottom, height) { return bottom * height / 2; } getArea(10, 20); 

4.3.1 函數參數注意點

• 1 把函數參數看做是變量，只能在函數內部使用
• 2 函數調用時參數傳入順序不能顛倒
• 3 參數的值是在函數被調用的時候經過傳入的參數設置的值

• 4 函數調用時不傳入參數，則函數內部獲取參數的值爲：undefined

• 練習：寫一個函數打印一段文字，要求：傳入什麼內容，就打印什麼內容

4.3.2 形參和實參

形參（形式參數），即函數定義時的參數，只起到佔位的做用，等到函數被調用的時候，會被傳入的具體值代替。【聯想數學公式】 s = d * h / 2;

實參（實際參數），即函數被調用時的參數，是一個具體的值或者表達式（一、"老司機"、true、[2, 2]、{ name: "two"} 等）

4.4 原型（prototype）

4.4.1 方法放在構造函數中的缺點

• 浪費內存

構造函數中的屬性和方法，會在調用的時候被處理，即會消耗內存。

new 出來的對象，都是一個單獨副本
new 一個對象就佔用一分內存，new 多少對象就佔用多少分內存。

可是對於構造函數中的方法來講，每一個對象的方法都是相同的（或者說應該是被共享的）

對於典型的淘寶商品詳情頁，經測試發現，每增長一個 DOM 節點，會致使首屏渲染時間延遲約 0.5ms

4.4.2 原型的說明

• 一個對象的原型就是：構造函數的prototype屬性的值
• 只要是函數就有 prototype 屬性，即函數的原型屬性
• 函數的原型屬性（prototype）的類型是："object"
• 由 構造函數 建立出來的對象，會默認連接到其構造函數的這個屬性（prototype）的值上
• 構造函數的 prototype 屬性的做用是：實現數據共享

function Person() {} // prototype 即 原型 Person.prototype.legs = 2; var p = new Person(); console.log(p.legs); 

4.4.3 屬性查找規則

在訪問對象的某一個屬性 (方法)的時候：

1 首先會在當前對象中查找有沒有該屬性
2 若是當前對象沒有, 就會在構造方法的定義規則中查找(當前對象)
3 若是沒有, 就會到與對象聯繫起來的 構造函數的 prototype 屬性的值中找

4.5 利用原型改良構造函數

// 對象會到 與它聯繫的 prototype 中找數據  
// 能夠考慮將共享的數據, 放到 裏面 function Person(name) { this.name = name; } Person.prototype.sayHello = function() { alert(this.name); }; var p = new Person(); p.sayHello(); 

• 原則：只將公共的屬性和方法放到 prototype 中

4.5.1 屬性修改和讀取的區別

獲取操做：
遵循屬性查找原則

賦值操做（只與當前對象有關）：
只會操做對象自己，若是對象中沒有該屬性則建立該屬性，並賦值；若是對象中有，則修改

4.6 prototype 和 __proto__

• __proto__ 是非標準屬性

對象中有一個屬性 叫 __proto__  
對象的 __proto__ 與建立它的構造函數的 prototype 是一個東西

function F() {} var o = new F(); console.log(o.__proto__ === F.prototype); 

• 術語

F.prototype  原型屬性
f.__proto__  原型對象

F.prototype 是 構造函數F的 原型屬性
f.__proto__ 是 對象f的     原型對象