亚洲AV日韩AⅤ综合手机在线观看,激情婷婷久久综合色,欧美色五月婷婷久久,久久国产精品99久久人人澡

  • <abbr id="uk6uq"><abbr id="uk6uq"></abbr></abbr>
  • <tbody id="uk6uq"></tbody>
  • JavaScript的課堂講解

    時(shí)間:2024-09-03 10:21:46 JavaScript 我要投稿
    • 相關(guān)推薦

    JavaScript的課堂講解

      本文主要內(nèi)容:

    JavaScript的課堂講解

      1.分析函數(shù)的四種調(diào)用形式

      2.弄清楚函數(shù)中this的意義

      3.明確構(gòu)造函對(duì)象的過程

      4.學(xué)會(huì)使用上下文調(diào)用函數(shù)

      一、函數(shù)調(diào)用形式

      函數(shù)調(diào)用形式是最常見的形式,也是最好理解的形式。所謂函數(shù)形式就是一般聲明函數(shù)后直接調(diào)用即是。例如:

      復(fù)制代碼 代碼如下:

      // 聲明一個(gè)函數(shù),并調(diào)用

      function func() {

      alert("Hello World");

      }

      func();

      或者:

      復(fù)制代碼 代碼如下:

      // 使用函數(shù)的Lambda表達(dá)式定義函數(shù),然后調(diào)用

      var func = function() {

      alert("你好,程序員");

      };

      func();

      這兩段代碼都會(huì)在瀏覽器中彈出一個(gè)對(duì)話框,顯示字符串中的文字,這個(gè)就是函數(shù)調(diào)用。

      可以發(fā)現(xiàn)函數(shù)調(diào)用很簡(jiǎn)單,就是平時(shí)學(xué)習(xí)的一樣,這里的關(guān)鍵是,在函數(shù)調(diào)用模式中,函數(shù)里的 this 關(guān)鍵字指全局對(duì)象,如果在瀏覽器中就是 window 對(duì)象。例如:

      復(fù)制代碼 代碼如下:

      var func = function() {

      alert(this);

      };

      func();

      此時(shí),會(huì)彈出對(duì)話框,打印出 [object Window]。

      二、方法調(diào)用模式

      函數(shù)調(diào)用模式很簡(jiǎn)單,是最基本的調(diào)用方式。但是同樣的是函數(shù),將其賦值給一個(gè)對(duì)象的成員以后,就不一樣了。將函數(shù)賦值給對(duì)象的成員后,那么這個(gè)就不在稱為函數(shù),而應(yīng)該叫做方法。例如:

      復(fù)制代碼 代碼如下:

      // 定義一個(gè)函數(shù)

      var func = function() {

      alert("我是一個(gè)函數(shù)么?");

      };

      // 將其賦值給一個(gè)對(duì)象

      var o = {};

      o.fn = func; // 注意這里不要加圓括號(hào)

      // 調(diào)用

      o.fn();

      此時(shí),o.fn 則是方法,不是函數(shù)了。實(shí)際上 fn 的方法體與 func 是一模一樣的,但是這里有個(gè)微妙的不同?聪旅娴拇a:

      復(fù)制代碼 代碼如下:

      // 接上面的代碼

      alert(o.fn === func);

      打印結(jié)果是true,這個(gè)表明兩個(gè)函數(shù)是一樣的東西,但是修改一下函數(shù)的代碼:

      // 修改函數(shù)體

      var func = function() {

      alert(this);

      };

      var o = {};

      o.fn = func;

      // 比較

      alert(o.fn === func);

      // 調(diào)用

      func();

      o.fn();

      這里的運(yùn)行結(jié)果是,兩個(gè)函數(shù)是相同的,因此打印結(jié)果是 true。但是由于兩個(gè)函數(shù)的調(diào)用是不一樣的,func 的調(diào)用,打印的是 [object Window],而 o.fn 的打印結(jié)果是 [object Object]。

      這里便是函數(shù)調(diào)用與方法調(diào)用的區(qū)別,函數(shù)調(diào)用中,this 專指全局對(duì)象 window,而在方法中 this 專指當(dāng)前對(duì)象,即 o.fn 中的 this 指的就是對(duì)象o。

      三、構(gòu)造器調(diào)用模式

      同樣是函數(shù),在單純的函數(shù)模式下,this 表示 window;在對(duì)象方法模式下,this 指的是當(dāng)前對(duì)象。除了這兩種情況,JavaScript 中函數(shù)還可以是構(gòu)造器。將函數(shù)作為構(gòu)造器來使用的語法就是在函數(shù)調(diào)用前面加上一個(gè) new 關(guān)鍵字。如代碼:

      復(fù)制代碼 代碼如下:

      // 定義一個(gè)構(gòu)造函數(shù)

      var Person = function() {

      this.name = "程序員";

      this.sayHello = function() {

      alert("你好,這里是" + this.name);

      };

      };

      // 調(diào)用構(gòu)造器,創(chuàng)建對(duì)象

      var p = new Person();

      // 使用對(duì)象

      p.sayHello();

      上面的案例首先創(chuàng)建一個(gè)構(gòu)造函數(shù)Person,然后使用構(gòu)造函數(shù)創(chuàng)建對(duì)象p。這里使用 new 語法。然后在使用對(duì)象調(diào)用sayHello()方法,這個(gè)使用構(gòu)造函數(shù)創(chuàng)建對(duì)象的案例比較簡(jiǎn)單。從案例可以看到,此時(shí) this 指的是對(duì)象本身。除了上面簡(jiǎn)單的使用以外,函數(shù)作為構(gòu)造器還有幾個(gè)變化,分別為:

      1、所有需要由對(duì)象使用的屬性,必須使用 this 引導(dǎo);

      2、函數(shù)的 return 語句意義被改寫,如果返回非對(duì)象,就返回this。

      構(gòu)造器中的 this

      我們需要分析創(chuàng)建對(duì)象的過程,方能知道 this 的意義。如下面代碼:

      復(fù)制代碼 代碼如下:

      var Person = function() {

      this.name = "程序員";

      };

      var p = new Person();

      這里首先定義了函數(shù) Person,下面分析一下整個(gè)執(zhí)行:

      1、程序在執(zhí)行到這一句的時(shí)候,不會(huì)執(zhí)行函數(shù)體,因此 JavaScript 的解釋器并不知道這個(gè)函數(shù)的內(nèi)容。

      2、接下來執(zhí)行 new 關(guān)鍵字,創(chuàng)建對(duì)象,解釋器開辟內(nèi)存,得到對(duì)象的引用,將新對(duì)象的引用交給函數(shù)。

      3、緊接著執(zhí)行函數(shù),將傳過來的對(duì)象引用交給 this。也就是說,在構(gòu)造方法中,this 就是剛剛被 new 創(chuàng)建出來的對(duì)象。

      4、然后為 this 添加成員,也就是為對(duì)象添加成員。

      5、最后函數(shù)結(jié)束,返回 this,將 this 交給左邊的變量。

      分析過構(gòu)造函數(shù)的執(zhí)行以后,可以得到,構(gòu)造函數(shù)中的 this 就是當(dāng)前對(duì)象。

      構(gòu)造器中的 return

      在構(gòu)造函數(shù)中 return 的意義發(fā)生了變化,首先如果在構(gòu)造函數(shù)中,如果返回的是一個(gè)對(duì)象,那么就保留原意。如果返回的是非對(duì)象,比如數(shù)字、布爾和字符串,那么就返回 this,如果沒有 return 語句,那么也返回 this,看下面代碼:

      復(fù)制代碼 代碼如下:

      // 返回一個(gè)對(duì)象的 return

      var ctr = function() {

      this.name = "趙曉虎";

      return {

      name:"牛亮亮"

      };

      };

      // 創(chuàng)建對(duì)象

      var p = new ctr();

      // 訪問name屬性

      alert(p.name);

      執(zhí)行代碼,這里打印的結(jié)果是”牛亮亮”。因?yàn)闃?gòu)造方法中返回的是一個(gè)對(duì)象,那么保留 return 的意義,返回內(nèi)容為 return 后面的對(duì)象,再看下面代碼:

      復(fù)制代碼 代碼如下:

      // 定義返回非對(duì)象數(shù)據(jù)的構(gòu)造器

      var ctr = function() {

      this.name = "趙曉虎";

      return "牛亮亮";

      };

      // 創(chuàng)建對(duì)象

      var p = new ctr();

      // 使用

      alert(p);

      alert(p.name);

      代碼運(yùn)行結(jié)果是,先彈窗打印[object Object],然后打印”趙曉虎”,因?yàn)檫@里 return 的是一個(gè)字符串,屬于基本類型,那么這里的 return 語句無效,返回的是 this 對(duì)象,因此第一個(gè)打印的是[object Object]而第二個(gè)不會(huì)打印 undefined。

      四、apply調(diào)用模式

      除了上述三種調(diào)用模式以外,函數(shù)作為對(duì)象還有 apply 方法與 call 方法可以使用,這便是第四種調(diào)用模式,我稱其為 apply 模式。

      首先介紹 apply 模式,首先這里 apply 模式既可以像函數(shù)一樣使用,也可以像方法一樣使用,可以說是一個(gè)靈活的使用方法。首先看看語法:函數(shù)名.apply(對(duì)象, 參數(shù)數(shù)組);

      這里看語法比較晦澀,還是使用案例來說明:

      1、新建兩個(gè) js 文件,分別為”js1.js”與”js2.js”;

      2、添加代碼

      復(fù)制代碼 代碼如下:

      // js1.js 文件中

      var func1 = function() {

      this.name = "程序員";

      };

      func1.apply(null);

      alert(name);

      // js2.js 文件

      var func2 = function() {

      this.name = "程序員";

      };

      var o = {};

      func2.apply(o);

      alert(o.name);

      3、分別運(yùn)行著兩段代碼,可以發(fā)現(xiàn)第一個(gè)文件中的 name 屬性已經(jīng)加載到全局對(duì)象 window 中; 而第二個(gè)文件中的 name 屬性是在傳入的對(duì)象 o 中,即第一個(gè)相當(dāng)于函數(shù)調(diào)用,第二個(gè)相當(dāng) 于方法調(diào)用。

      這里的參數(shù)是方法本身所帶的參數(shù),但是需要用數(shù)組的形式存儲(chǔ)在,比如代碼:

      復(fù)制代碼 代碼如下:

      // 一個(gè)數(shù)組的例子

      var arr1 = [1,2,3,[4,5],[6,7,8]];

      // 將其展開

      var arr2 = arr1.conact.apply([], arr1);

      然后介紹一下 call 模式,call 模式與 apply 模式最大的不同在于 call 中的參數(shù)不用數(shù)組,看下面代碼就清楚了:

      // 定義方法

      var func = function(name, age, sex) {

      this.name = name;

      this.age = age;

      this.sex = sex;

      };

      // 創(chuàng)建對(duì)象

      var o = {};

      // 給對(duì)象添加成員

      // apply 模式

      var p1 = func.apply(o, ["趙曉虎", 19, "男"]);

      // call 模式

      var p2 = func.call(o, "趙曉虎", 19, "男");

      上面的代碼,apply 模式與 call 模式的結(jié)果是一樣的。

      實(shí)際上,使用 apply 模式和 call 模式,可以任意的操作控制 this 的意義,在函數(shù) js 的設(shè) 計(jì)模式中使用廣泛。簡(jiǎn)單小結(jié)一下,js 中的函數(shù)調(diào)用有四種模式,分別是:函數(shù)式、方法式、構(gòu)造 器式和 apply 式. 而這些模式中,this 的含義分別為:在函數(shù)中 this 是全局對(duì)象 window,在方 法中 this 指當(dāng)前對(duì)象,在構(gòu)造函數(shù)中 this 是被創(chuàng)建的對(duì)象,在 apply 模式中 this 可以隨意的指定.。在 apply 模式中如果使用 null,就是函數(shù)模式,如果使用對(duì)象,就是方法模式。

      五、綜合例子

      下面通過一個(gè)案例結(jié)束本篇吧。案例說明:有一個(gè)div,id為dv,鼠標(biāo)移到上面去高度增大2倍,鼠標(biāo)離開恢復(fù),下面直接上js代碼:

      復(fù)制代碼 代碼如下:

      var dv = document.getElementById("dv");

      var height = parseInt(dv.style.height || dv.offsetHeight);

      var intervalId;

      dv.onmouseover = function() {

      // 停止已經(jīng)在執(zhí)行的動(dòng)畫

      clearInterval(intervalId);

      // 得到目標(biāo)高度

      var toHeight = height * 2;

      // 獲得當(dāng)前對(duì)象

      var that = this;

      // 開器計(jì)時(shí)器,緩慢變化

      intervalId = setInterval(function() {

      // 得到現(xiàn)在的高度

      var height = parseInt(dv.style.height || dv.offsetHeight);

      // 記錄每次需要變化的步長(zhǎng)

      var h = Math.ceil(Math.abs(height - toHeight) / 10);

      // 判斷變化,如果步長(zhǎng)為0就停止計(jì)時(shí)器

      if( h > 0 ) {

      // 這里為什么要用that呢?思考一下吧

      that.style.height = (height + h) + "px";

      } else {

      clearInterval(intervalId);

      }

      }, 20);

      };

      dv.onmouseout = function() {

      // 原理和之前一樣

      clearInterval(intervalId);

      var toHeight = height;

      var that = this;

      intervalId = setInterval(function() {

      var height = parseInt(dv.style.height || dv.offsetHeight);

      var h = Math.ceil(Math.abs(height - toHeight) / 10);

      if( h > 0 ) {

      that.style.height = (height - h) + "px";

      } else {

      clearInterval(intervalId);

      }

      }, 20);

      };

    【JavaScript的課堂講解】相關(guān)文章:

    對(duì)javascript的理解03-29

    JavaScript 基礎(chǔ)教學(xué)04-01

    JavaScript學(xué)習(xí)筆記03-30

    常用的JavaScript模式03-10

    Javascript的this用法簡(jiǎn)述03-25

    JavaScript常用方法匯總03-08

    高效編寫JavaScript代碼的技巧03-10

    javascript編程異常處理的方法03-31

    javascript克隆對(duì)象深度介紹03-31