javascript
JS详细入门教程（上）
首先，我們看一下DOM級別和兼容性：
之前好像在某本上看到說DOM有0級，實際上，DOM0級標準是不存在的。DOM有1、2、3三個級別。DOM1級由兩個模塊組成（DOM Core和DOM HTML），其中，DOM核心規定的是如何映射基于XML的文檔結構，以便簡化對文檔中任意部分的訪問和操作。DOM HTML模塊則在DOM核心的基礎上加以擴展，添加了針對HTML的對象和方法。DOM2級在原來DOM的基礎上又擴充了視圖和用戶界面事件、范圍、遍歷（迭代DOM文檔的方法）等細分模塊，而且通過對象接口增加了對CSS（Cascading Style Sheets，層疊樣式表）的支持。DOM3級則進一步擴展了DOM，引入了以統一方式加載和保存文檔的方法–在DOM加載和保存（DOM Load and Save）模塊中定義；新增了驗證文檔的方法–在DOM驗證（DOM Validation）模塊中定義。
一、六種數據類型
Javascript是一種弱數據類型，這種弱數據類型有什么特征呢？看看下面的例子：
JavaScript一共有6種數據類型，其中五種原始類型（基本類型），一種對象類型（引用類型）。
引用類型：
object，包括Object類型、Array類型、Date類型、RegExp類型、Function類型。
基本類型：
number、string、boolean、null、undefined。
類型的轉換和檢測：
（1）隱式轉換：巧用+、-、==規則轉換類型
num-0 這樣可以將字符串轉化為數字
?例如：“17”-7 ? ? //10
num+ " " ?這樣可以將數字轉換為字符串
例如：“17”+7 ? ? ?//177
類型相同，用===檢測是否相等，類型不同，嘗試類型轉換和比較,部分規則為：
null==undefined ? 相等
number==string 轉number
boolean==？轉number
object==number|string 嘗試對象轉為基本類型
其他：false
例如：
注意：===是絕對等的意思，只有類型和數值都相等才會成立。
更多：
（2）類型檢測
檢測方法：typeof、instanceof、Object.prototype.toString、constructor、duck type
typeof和instanceof比較常用，其中typeof比較適合函數對象和基本類型的判斷，instanceof常用于判斷對象類型，其判斷專責是基于原型鏈判斷的。例如：
?
typeof 100 ? //"number"
typeof ture ? //"boolean"
typeof(undefined) ?//"undefined"
typeof new Object() ?//"object"
typeof [1,2] ?//"object"
typeof NAN ? //"undefined"
?
typeof function ?//“function”
typeof null //"object"
備注：歷史上曾經把null類型===''null''，但是造成許多網站沒有辦法正常訪問，后來就決定null返回的是Object對象。所以typeof null==="object" ?//true
注意：不同window或iframe間的對象類型檢測不能使用instanceof！
更多：
?
?
二、表達式和運算符
表達式類型：原始表達式、初始化表達式、函數表達式、屬性訪問表達式、調用表達式、對象創建表達式。
初始化表達式：new Array(1,2)、[1,2]等
屬性訪問表達式：var o={x:1}; o.x;o['x]
調用表達式：func()
對象創建表達式：new Object;
運算符：逗號“，”、delet、in、new、this
逗號用法：a,b?
如：var val=(1,2,3)
delet用法: ?delet obj.x
如：var obj={x:1};
? ? ? ?obj.x; ? //1
? ? ? ?delet obj.x
? ? ? ?obj.x; ? //undefined
注意：從IE9開始，新增的configurable標簽，當這個的值為true的元素才可以被delet。創建對象時，屬性默認的configurable的值是true。
in的用法：window.x=1;
? ? ? ? ? ? ? ? ?'x' in window; ? ? //true
更多：
?
三、語句
語句分別有:block、var、try catch、function、for...in、with
?
注意：js中沒有塊級作用域。所以在for循環中定義的變量的作用域會被擴大。即在for循環之后仍然可以訪問for循環里面定義的變量。
try catch:
function:
函數聲明：
fd(); ?//true
function fd(){...}
函數表達式：
var fe=function(){...}
注意：函數聲明會在執行之前生效，所以在函數之前調用該函數也可以。但是函數表達式不會在執行之前生效，所以不能提前。
for...in:
var p;
var obj={x:1,y:2}
for(p in obj){....}
注意：
for...in的遍歷順序是不確定的，只是會把該遍歷的每一個元素都遍歷輸出，但是不一定按照定義時候的順序。而且，當enumerable為false時，不能用for...in遍歷。另外，for...in遍歷對象屬性時受原型鏈影響。
嚴格模式：
?
嚴格模式是一種特殊的運行模式，它修復了部分語言上的不足，提供更安強的錯誤檢查，并增強安全性。嚴格模式是向上兼容的。
嚴格模式和普通模式的區別：
①不允許使用with，若使用會報錯（語法錯誤）
②不允許未聲明的變量被賦值
③arguments變為參數的靜態副本
④delete參數、函數名報錯
⑤delete不可配置的屬性也會報錯
⑥對象字面重復屬性名報錯
⑦禁止八進制字面量
⑧eval、arguments變為關鍵字，不能作為變量、函數名
四、對象
對象中包含一系列屬性，這些屬性是無序的。每一個屬性都有一個字符串key和對應的value。
數據屬性：configurable、enumerable、writable、value
訪問器屬性：configurable、enumerable、get、set，訪問器屬性不能直接定義，必須使用Object。definedProperty()來定義。
創建對象
?
第一種是使用new操作符后跟Object構造函數，
如下所示：?
var person = new Object(); person.name = "Nicholas"; person.age = 29;?
這種方法要注意原型鏈的問題：
特別注意，并不是所有的對象都會繼承object：
另一種方式是使用對象字面量表示法。
var person = { name : "Nicholas", age : 29 }; ??
另外，使用對象字面量語法時，如果留空其花括號，則可以定義只包含默認屬性和方法的對象，如：
?var person = {}; //與 new Object()相同?
person.name = "Nicholas"; person.age = 29;?
屬性操作
屬性操作包括：讀寫對象屬性、屬性異常、刪除屬性、檢測屬性、枚舉屬性
屬性異常：
刪除屬性：
?
檢測屬性：
用hasOwnProperty()方法來判斷某個對象是否有某個屬性，用propertyIsEnumerable()方法判斷某個屬性是否可以枚舉。
extensible標簽：
設計模式
①工廠模式
?
function createPerson(name, age, job){?
? ? ?var o = new Object();?
? ? ?o.name = name;?
? ? ?o.age = age;?
? ? ?o.job = job;?
? ? ?o.sayName = function(){?
? ? ? ? ? ? ? alert(this.name);?
? ? ? };?
? ? ?return o;
?}?
var person1 = createPerson("winty", 29, "Software Engineer");?
var person2 = createPerson("LuckyWinty", 27, "Student");?
②構造函數模式
function Person(name, age, job){?
? ? ? ? this.name = name;?
? ? ? ? this.age = age;?
? ? ? ? this.job = job;?
? ? ? ? this.sayName = function(){?
? ? ? ? ? ? ? ? ? ? alert(this.name);?
? ? ? ? ?};?
?}?
var person1 = new Person("Winty", 29, "Software Engineer");?
var person2 = new Person("LuckyWinty", 27, "Student");?
③原型模式
function Person(){ }?
Person.prototype.name = "Winty";?
Person.prototype.age = 29;?
Person.prototype.job = "Software Engineer";?
Person.prototype.sayName = function(){?
? ? ? ? alert(this.name);?
? ? ? ? };?
var person1 = new Person();?
person1.sayName(); //"Winty"?
var person2 = new Person();?
person2.sayName(); //"Winty"?
alert(person1.sayName == person2.sayName); //true?
④組合使用構造函數模式和原型模式
?
function Person(name, age, job){?
? ? ? ? ? ? ? this.name = name;?
? ? ? ? ? ? ? this.age = age;?
? ? ? ? ? ? ? this.job = job;?
? ? ? ? ? ? ? this.friends = ["Shelby", "Court"];?
}?
Person.prototype = {?
? ? ? ? ? ? constructor : Person,?
? ? ? ? ? ? sayName : function(){?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(this.name);?
? ? ? ? ? ? }?
}?
var person1 = new Person("winty", 29, "Software Engineer");?
var person2 = new Person("LuckyWinty", 27, "Student");?
person1.friends.push("Van");?
alert(person1.friends); //"Shelby,Count,Van"?
alert(person2.friends); //"Shelby,Count"?
alert(person1.friends === person2.friends); //false?
alert(person1.sayName === person2.sayName); //true?
⑤動態原型模式
function Person(name, age, job){?
? ? ? ? ? ? ? this.name = name;?
? ? ? ? ? ? ? this.age = age;?
? ? ? ? ? ? ? this.job = job;?
? ? ? ? ? ? ? if (typeof this.sayName != "function"){?
? ? ? ? ? ? ? ?Person.prototype.sayName = function(){?
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(this.name);?
? ? ? ? ? ? ? ?};
? ? ? ? ? ? ?}?
}?
var friend = new Person("Winty", 29, "Software Engineer");?
friend.sayName();?
⑥：寄生構造函數模式
function Person(name, age, job){?
? ? ? ? ?var o = new Object();?
? ? ? ? ?o.name = name;?
? ? ? ? ?o.age = age;?
? ? ? ? ?o.job = job;?
? ? ? ? ?o.sayName = function(){?
? ? ? ? ? ? ? ? ? alert(this.name);
? ? ? ? ?};?
? ? ?return o;?
}?
var friend = new Person("Winty", 29, "Software Engineer");?
friend.sayName(); //"Winty"?
⑦穩妥構造函數模式
所謂穩妥對象，指的是沒有公共屬性，而且其方法也不引用this的對象。穩妥對象最適合在一些安全的環境中（這些環境中會禁止使用this和new），或者在防止數據被其他應用程序（如Mashup程序）改動時使用。穩妥構造函數遵循與寄生構造函數類似的模式，但有兩點不同：一是新創建對象的實例方法不引用this；二是不使用new操作符調用構造函數。按照穩妥構造函數的要求，可以將前面的Person構造函數重寫如下。?
function Person(name, age, job){
?var o = new Object();?
?o.sayName = function(){?
? ? alert(name);?
?};?
?return o;?
}
----未完待續
歡迎關注我的個人微信訂閱號：前端生活
轉載請注明出處！
轉載于:https://www.cnblogs.com/LuckyWinty/p/LuckyWinty.html
總結
以上是生活随笔為你收集整理的JS详细入门教程（上）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常用的字体系列
- 下一篇： 开源数据库连接池之Tomcat内置连接池