DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 學習javascript的閉包,原型,和匿名函數之旅
學習javascript的閉包,原型,和匿名函數之旅
編輯:關於JavaScript     

本文通過示例給大家介紹javascript的閉包,原型,和匿名函數,具體詳情請看下文。

一 .>關於閉包

理解閉包 需要的知識

1.變量的作用域

例1:

var n =99; //建立函數外的全局變量
function readA(){
  alert(n); //讀取全局變量
}

readA(); //執行此函數

例2:

function readB(){
  var c = 9;
  function readC(){
    console.log(c); //ok c可見
  }
  return readC;
}
alert(c); //error c is not defined.

    note:  函數內部聲明變量c時,一定要加上 var,否則 c會成為一個全局變量

所以函數內可見全局變量,函數內的局部變量卻對外不可見
js的作用域是鏈式的,父對象裡的變量總對子對象可見,子對象的對象卻對父對象不可見
當我們要獲取函數內的內部變量

於是有了例3:

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC();
}
readB();

閉包很類似基於此做了一個變式

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC;
}
var res = readB();
res();

note:

1.慎用閉包,注意內存占用,因為它會保存父函數的狀態
2.不要隨便改變父函數內部變量的值

理解閉包

   note: this 指包含它的函數被執行時所屬的對象

例1:

var name = "The Window";

var object = {
  name : "My Object",

  getNameFunc : function(){  //此時this (這個執行函數)是屬於object對象的,是object對象下的一個屬性的值
    return function(){   //此時this (這個執行函數)是一個匿名函數,從根對象window生成,是屬於window
      return this.name;
    };
  }
};
console.log(object.getNameFunc()()); //the window 

例2:

var name = "The Window";

var object = {
  name : "My Object",

  getNameFunc : function(){
    var that = this;
    return function(){
      return that.name;
    };

  }
};
console.log(object.getNameFunc()());  //My Object

二 .>匿名函數

直接定義一個匿名函數 然後調用這個匿名函數,這種形式在jquery插件的定義時很常見

1.通過函數字母量的方式. 先聲明一個匿名函數,然後執行它

( function(){
  console.log('excute self');
}) ();

2.通過優先表達式的方式 , 由於Javascript執行表達式是從圓括號裡面到外面,所以可以用圓括號強制執行聲明的函數

(
  function () {
    alert(2);
  }
  ()
);

3.void操作符 用void操作符去執行一個沒有用圓括號包圍的一個單獨操作數

void function(){ console.log('void') } ();

三 .>關於prototype

原型 prototype

理解js中的protitype首先需要明白js的面向對象設計

function People(name){
  this.name = name;

  console.log(this); //Window 或者 object { name: 'xxx' }
  this.introduce = function(){  //實例對象方法
    console.log(this.name);
  }
}
new People('leon').introduce();
//這裡有一個非常有趣的現象,結合前面的來看的話,
//首先function people裡的this指向的默認是Window對象
//當 調用 People();時 this 輸出為 Window對象
//但一旦調用new People('xx')時, this 輸出為 {name:'xx'}
//其實也很好理解,一旦new ,便新建了一個對象

實例對象方法只能這樣 new People('leon').introduce(); 調用 因為它使用前必須初始化

類的對象的靜態方法

var People = {}; //等於一個對象 {} 或者 function 數組都可以 此時People需要是引用類型
People.sayhi = function(to_who){
  console.log('hi '+ to_who);
}
People.sayhi('lee'); //調用時這樣調用

原型方法

var People = function(){};       // People 必須為一個 function(){} 即為一個類,不能是對象或值類型或其他引用類型
People.prototype.meet = function(meet_who) {
  console.log('I am '+this.name + ',going to meet ' + meet_who);
};
new People('lee').meet('xx');

原型方法只能由該類的對象 調用

 A.prototype = new B();

原型看起來很像繼承,但其實不是,它更像clone更准確

如果出現了父類和子類出現了重名的屬性,采取就近原則,如果找不到一級一級向上找,如果要指定調用上級的屬性,使用call方法

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);
obj1.func.call(obj);

以上內容是小編給大家分享的學習javascript的閉包,原型,和匿名函數之旅,希望對大家有用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved