DIV CSS 佈局教程網

javascript 特性
編輯:JavaScript基礎知識     
作用域: javascript的作用域稱為靜態作用域,在定義語法上就能確認了,而不是運行時。
 if (true) 
{
  var i = 'moersing' 
} 
console.log(i); //可以訪問。
與C#,vb,java等語言不同,javascript沒有所謂塊級作用域概念,准確的說,就花括號之內定義的變量可以被外面訪問到,但是,函數除外,因為函數本身是一個作用域。   另一個例子: 
var s= 'moersing'; 
var f= function () { 
  console.log(s); //這裡輸出的是undefined
  var  s='lingfo';
}
f();
解釋下為什麼會這樣,原因是javascript作用域搜索的問題,在調用函數f的時候,f作用域(函數都有一個局部作用域),會初始化所有局部變量(只是初始化),於是,console.log()函數訪問s的時候,s並沒有被賦值,也就相當於 var s而已,所以輸出undefind。   閉包特性:
function f ()
{
   var count=0;
   var get =function(){
       count ++;
       return count;
    }
return get;
} 
var  getCount = f();
console.log(getCount()); //1
console.log(getCount());//2
通常,在不使用閉包的情況下,讓一個變量遞增的辦法就是在外層定義一個變量,然後調用方法讓其自增。 但是這樣做的不好之處在於,別的地方也能訪問這個變量,有時會很糟糕。 上面的例子就是一個閉包,在函數f執行完畢之後,返回一個get函數,這時候你可能會認為這個函數裡面的count變量已經被銷毀, 因為f已經超出作用域了,但實際上不是這樣,在返回的get函數中,仍讓保留著f的活動對象,當然也包括在其中定義的count變量, 所以,每一次調用get這個函數的時候,應用的都是count這個變量,也就實現了內部自增,除非通過f函數,否則無法訪問這個count。    

有些網友時常問,我想根據點擊的按鈕的位置(下標)來執行相應的操作,但是最後總是無法獲取到下標,那是因為,在for循環中綁定的下標是是會變化的,當for循環執行完成後,下標的值總是等於 i+1。如: 

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

var allDiv = document.querySelectorAll('div');
for(var i=0;i<allDiv.length;i++)
{
    allDiv[i].onclick=function(){
alert(this.nodeName+i);
} }
在這裡,無論單擊那個DIV,都會返回 DIV9,原因是,for循環最後一次++是等於9,而9 < allDiv.length =false,所以,循環退出,但是在每個div裡面綁定事件是顯示i的值,所以一直都是9.

  利用javascript提供的閉包特性可以解決這個問題。

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

var allDiv = document.querySelectorAll('div');
for(var i=0;i<allDiv.length;i++)
{
   (function(i){
        allDiv[i].onclick=function(){
        alert(this.nodeName+i);
    }
    })(i);
}
對於閉包特性,通俗來講,就是嵌套的函數包含了父函數的作用域和本身的作用,這個新的作用域稱為閉包特性,但是要記住,當父函數返回之後,作用域就被銷毀,但是其活動對象還是會保留在嵌套的函數之中。 另外一個就是:慎用閉包,特別是在操作有關DOM處理的時候,如果一不小心,會造成內存洩露。   this對象:
var  m = {
name:'moersing',
func:function(console.log(this.name))
} 
var t = {
name:'linfo',
}
m.func(); // moersing
t.func= m.func;
t.func();//linfo;

 

  在m的func函數中,引用了this(上下文對象)即被調用的函數所處的環境(作用域),而下面的t.func指向了m.func,那麼,實際上就相當於  t.func={console.log(this.name)},接下來就淺顯易懂了,調用t的func,那麼,this這個上下文對象就相當於t,那麼也就是t.name。所以結果輸出了linfo。 call和apply: call和apply的執行機制是一樣的,他可以設置函數的執行環境,也就是說可以改變一個函數所處的位置(非物理),別忘了,函數的上下文對象(this)也是根據函數所處的位置變換的。 首先,看看call:    
 var m = {
    name:'moersing',
    age:18,
    print:function(){  console.log(this.name+this.age)  }
}
   var t = {name:'linfo',age:20}
 m.print.call(t); //info 20

 

這裡,在運行時,將print函數的執行環境改變成了t(call函數第一個參數是一個對象,就是上下文對象),那麼,this.name 就相當於 t.name,同理,age也是一樣的。 apply與call一樣,只不過他可以傳遞數組 fun.call(obj,[1,2,3,........]);   __proto__和prototype和constructor:
__proto__:指向對象的原型。
prototype:指向了構造函數的原型對象。
constructor:對象(包括原型)有一個constructor屬性,這個屬性指向了其所在的函數。

 

注:對象和實例是相同的概念。 也就是說,prototype和constructor是間接互相引用的。 值得區分的就是 __proto__和prototype:  這兩個對於有經驗的人也許會有點困惑,__proto__是存在於實例與構造函數之間的,而prototype是存在於構造函數和原型之間的。 這也就是為什麼,構造函數有prototype和__proto__,而實例只有__proto__。別忘了,構造函數也是對象。 很多人誤認為,構造函數的__proto__和prototype是指向相同的原型,實際上不是的,看一個例子: 
 function c (){ }; 
 alert(c.__proto__); // function empty()
 alert(c.prototype); // c 
從上面可以看出兩者之間的不同。 
 var cc= new c();
 alert(cc.__proto__==c.prototype); //true

如果使用c作為構造函數,那麼cc實例的__proto__就和c.prototype一致了。

下面是一些例子:

console.log(obj.__proto__ === Object.prototype) // true
console.log(arr.__proto__ === Array.prototype)  // true
console.log(reg.__proto__ === RegExp.prototype) // true
console.log(date.__proto__ === Date.prototype)  // true
console.log(err.__proto__ === Error.prototype)  // true
從上面可以看出,對象實例的__proto__都指向了構造該對象的原型對象。 例如: Object 構造了obj (var o={})   那麼這個對象的__proto__就指向了 Object.prototype。 另外,Object.prototype是最高層的原型,根據原型鏈搜索的概念  任何對象  instanceof  Object 都是true。 總結:對於__proto__和prototype的概念,千萬要記住的就是,兩者之間沒有可比性,一個是存在於實例和原型之間,一個是存在於構造函數和原型之間。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved