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