回歸基礎的東西,不能只是“感覺會了”
很多時候,覺得自己掌握的東西還是很少,做事情的效率還不是很高,希望自己能夠成長起來,認認真真做事。
--------------------------------------------------------------------------------------------------------------------------------------------
Javascript聲明變量的時候,雖然用var關鍵字聲明和不用關鍵字聲明,很多時候運行並沒有問題,但是這兩種方式還是有區別的。可以正常運行的代碼並不代表是合適的代碼。
var num = 1;
是在當前域中聲明變量. 如果在方法中聲明,則為局部變量(local variable);如果是在全局域中聲明,則為全局變量。
而 num = 1;
事實上是對屬性賦值操作。首先,它會嘗試在當前作用域鏈(如在方法中聲明,則當前作用域鏈代表全局作用域和方法局部作用域etc。。。)中解析 num; 如果在任何當前作用域鏈中找到num,則會執行對num屬性賦值; 如果沒有找到num,它才會在全局對象(即當前作用域鏈的最頂層對象,如window對象)中創造num屬性並賦值。
註意!它並不是聲明了一個全局變量,而是創建了一個全局對象的屬性。
即便如此,可能你還是很難明白“變量聲明”跟“創建對象屬性”在這裏的區別。事實上,Javascript的變量聲明、創建屬性以及每個Javascript中的每個屬性都有一定的標誌說明它們的屬性----如只讀(ReadOnly)不可枚舉(DontEnum)不可刪除(DontDelete)等等。
由於變量聲明自帶不可刪除屬性,比較var num = 1 跟 num = 1,前者是變量聲明,帶不可刪除屬性,因此無法被刪除;後者為全局變量的一個屬性,因此可以從全局變量中刪除。
具體見以下代碼:
復制代碼代碼如下:
// num1為全局變量,num2為window的一個屬性
var num1 = 1;
num2 = 2;
// delete num1; 無法刪除
// delete num2; 刪除
function model(){
var num1 = 1; // 本地變量
num2 = 2; // window的屬性
// 匿名函數
(function(){
var num = 1; // 本地變量
num1 = 2; // 繼承作用域(閉包)
num3 = 3; // window的屬性
}())
}
PS. 在ECMAScript5標準中,有一種“嚴格模式”(Strict Mode)。在嚴格模式中,為未聲明的標識符賦值將會拋引用錯誤,因此可以防止意外的全局變量屬性的創造。目前一些瀏覽器的新版本已經支持。
-----------------------------------------------------------------------------------------------------------------------------------------------
下面收集一些基礎的知識,有時候基礎的東西不能忘記,這些都是我們今天得以站立的根基和基石。
The HTML DOM Document Object
HTML DOM Nodes
In the HTML DOM (Document Object Model), everything is a node:
- The document itself is a document node
- All HTML elements are element nodes
- All HTML attributes are attribute nodes
- Text inside HTML elements are text nodes
- Comments are comment nodes
The Document Object
When an HTML document is loaded into a web browser, it becomes a document object.
The document object is the root node of the HTML document and the "owner" of all other nodes:
(element nodes, text nodes, attribute nodes, and comment nodes).
The document object provides properties and methods to access all node objects, from within JavaScript.
Tip: The document is a part of the Window object and can be accessed as window.document.
Document Object Properties and Methods
The following properties and methods can be used on HTML documents:
Property / Method | Description |
---|---|
document.activeElement | Returns the currently focused element in the document |
document.addEventListener() | Attaches an event handler to the document |
document.adoptNode() | Adopts a node from another document |
document.anchors | Returns a collection of all <a> elements in the document that have a name attribute |
document.applets | Returns a collection of all <applet> elements in the document |
document.baseURI | Returns the absolute base URI of a document |
document.body | Sets or returns the document‘s body (the <body> element) |
document.close() | Closes the output stream previously opened with document.open() |
document.cookie | Returns all name/value pairs of cookies in the document |
document.charset | Deprecated. Use document.characterSet instead. Returns the character encoding for the document |
document.characterSet | Returns the character encoding for the document |
document.createAttribute() | Creates an attribute node |
document.createComment() | Creates a Comment node with the specified text |
document.createDocumentFragment() | Creates an empty DocumentFragment node |
document.createElement() | Creates an Element node |
document.createTextNode() | Creates a Text node |
document.doctype | Returns the Document Type Declaration associated with the document |
document.documentElement | Returns the Document Element of the document (the <html> element) |
document.documentMode | Returns the mode used by the browser to render the document |
document.documentURI | Sets or returns the location of the document |
document.domain | Returns the domain name of the server that loaded the document |
document.domConfig | Obsolete. Returns the DOM configuration of the document |
document.embeds | Returns a collection of all <embed> elements the document |
document.forms | Returns a collection of all <form> elements in the document |
document.getElementById() | Returns the element that has the ID attribute with the specified value |
document.getElementsByClassName() | Returns a NodeList containing all elements with the specified class name |
document.getElementsByName() | Returns a NodeList containing all elements with a specified name |
document.getElementsByTagName() | Returns a NodeList containing all elements with the specified tag name |
document.hasFocus() | Returns a Boolean value indicating whether the document has focus |
document.head | Returns the <head> element of the document |
document.images | Returns a collection of all <img> elements in the document |
document.implementation | Returns the DOMImplementation object that handles this document |
document.importNode() | Imports a node from another document |
document.inputEncoding | Returns the encoding, character set, used for the document |
document.lastModified | Returns the date and time the document was last modified |
document.links | Returns a collection of all <a> and <area> elements in the document that have a href attribute |
document.normalize() | Removes empty Text nodes, and joins adjacent nodes |
document.normalizeDocument() | Removes empty Text nodes, and joins adjacent nodes |
document.open() | Opens an HTML output stream to collect output from document.write() |
document.querySelector() | Returns the first element that matches a specified CSS selector(s) in the document |
document.querySelectorAll() | Returns a static NodeList containing all elements that matches a specified CSS selector(s) in the document |
document.readyState | Returns the (loading) status of the document |
document.referrer | Returns the URL of the document that loaded the current document |
document.removeEventListener() | Removes an event handler from the document (that has been attached with the addEventListener() method) |
document.renameNode() | Renames the specified node |
document.scripts | Returns a collection of <script> elements in the document |
document.strictErrorChecking | Sets or returns whether error-checking is enforced or not |
document.title | Sets or returns the title of the document |
document.URL | Returns the full URL of the HTML document |
document.write() | Writes HTML expressions or JavaScript code to a document |
document.writeln() | Same as write(), but adds a newline character after each statement |
回歸基礎的東西,不能只是“感覺會了”