自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

盤(pán)點(diǎn)JavaScript中Function三大用途

開(kāi)發(fā) 前端
JavaScript中的Function對(duì)象是函數(shù),函數(shù)的用途分為3類(lèi),它們分別是作為普通邏輯代碼容器;作為對(duì)象方法和作為構(gòu)造函數(shù)。

JavaScript中的Function對(duì)象是函數(shù),本文向大家簡(jiǎn)單介紹一下Script中的Function(函數(shù))對(duì)象的三大用途,相信本文介紹一定會(huì)讓你有所收獲。

JavaScript中的Function(函數(shù))對(duì)象

JavaScript中的Function對(duì)象是函數(shù),函數(shù)的用途分為3類(lèi):

作為普通邏輯代碼容器;

作為對(duì)象方法;

作為構(gòu)造函數(shù)。

1.作為普通邏輯代碼容器

  1. functionmultiply(x,y){  
  2. returnx*y;  

函數(shù)multiply封裝了兩位數(shù)的乘法運(yùn)算公式:

  1. varproduct=multiply(128,128);//product=16384 
  2.  

創(chuàng)建函數(shù)實(shí)例的方式有3種。第一種是聲明式,即像聲明變量一樣,將通過(guò)function(){}標(biāo)識(shí)符創(chuàng)建的匿名函數(shù)直接賦值給變量,以該變量作為調(diào)用時(shí)的函數(shù)名稱(chēng):

  1. varmultiply=function(x,y){  
  2. returnx*y;  

第二種是定義式,即以function關(guān)鍵字后跟函數(shù)名稱(chēng)及(){}來(lái)直接定義命名函數(shù),前面第一個(gè)multiply函數(shù)就是通過(guò)定義式創(chuàng)建的。

第三種是構(gòu)造函數(shù)式,即通過(guò)new運(yùn)算符調(diào)用構(gòu)造函數(shù)Function來(lái)創(chuàng)建函數(shù)。這種方式極不常用,因此就不作介紹了。

在創(chuàng)建函數(shù)的3種方式中,聲明式和定義式還存在細(xì)微的差別。比如下列代碼中的函數(shù)采用聲明式:

  1. varexample=function(){  
  2. return1;  
  3. }  
  4. example();  
  5. varexample=function(){  
  6. return2;  
  7. }  
  8. example();  
  9.  

 執(zhí)行結(jié)果如下:

  1. 1  

而如果采用定義式,即:

  1. functionexample(){  
  2. return1;  
  3. }  
  4. example();  
  5. functionexample(){  
  6. return2;  
  7. }  
  8. example(); 

那么會(huì)得到另一種結(jié)果:

  1. 2  

即,在采用定義式創(chuàng)建同名函數(shù)時(shí),后創(chuàng)建的函數(shù)會(huì)覆蓋先創(chuàng)建的函數(shù)。這種差別是由于JavaScript解釋引擎的工作機(jī)制所導(dǎo)致的。JavaScript解釋引擎在執(zhí)行任何函數(shù)調(diào)用之前,首先會(huì)在全局作用域中注冊(cè)以定義式創(chuàng)建的函數(shù),然后再依次執(zhí)行函數(shù)調(diào)用。由于注冊(cè)函數(shù)時(shí),后定義的函數(shù)重寫(xiě)了先定義的函數(shù),因此無(wú)論調(diào)用語(yǔ)句位于何處,執(zhí)行的都是后定義的函數(shù)。相反,對(duì)于聲明式創(chuàng)建的函數(shù),JavaScript解釋引擎會(huì)像對(duì)待任何聲明的變量一樣,等到執(zhí)行調(diào)用該變量的代碼時(shí)才會(huì)對(duì)變量求值。由于JavaScript代碼是從上到下順序執(zhí)行的,因此當(dāng)執(zhí)行第一個(gè)example()調(diào)用時(shí),example函數(shù)的代碼就是首先定義代碼;而當(dāng)執(zhí)行第二個(gè)example()調(diào)用時(shí),example函數(shù)的代碼又變成了后來(lái)定義的代碼。#p#

2.作為對(duì)象方法

JavaScript在解析代碼時(shí),會(huì)為聲明或定義的函數(shù)指定調(diào)用對(duì)象。所謂調(diào)用對(duì)象,就是函數(shù)的執(zhí)行環(huán)境。如果函數(shù)體內(nèi)有以關(guān)鍵字this聲明的變量,則this引用的就是調(diào)用對(duì)象。

事實(shí)上,在普通的函數(shù)中,也存在調(diào)用對(duì)象,只不過(guò)這個(gè)調(diào)用對(duì)象是默認(rèn)的全局window對(duì)象而已。例如:

varproduct=window.multiply(128,128);//product=16384

這說(shuō)明,默認(rèn)情況下,在全局作用域中定義或聲明的函數(shù)的調(diào)用對(duì)象就是window。

在面向?qū)ο缶幊讨校ǔ⒆鳛閷?duì)象成員的函數(shù)稱(chēng)為方法。例如:

  1. vardog={};  
  2. dog.name=“heibao”;  
  3. dog.age=“3months”;  
  4. dog.shout=function(){  
  5. return“Hello,Mynameis“+this.name+”andIam”+this.age+”old!”;  
  6. }  
  7. dog.shout();//“Hello,MynameisheibaoandIam3monthsold!”  
  8.  

 有意思的是,對(duì)象也可以借用其他對(duì)象的方法:

  1. varcat={};  
  2. cat.name=“xiaohua”;  
  3. cat.age=“2years”;  
  4. cat.greet=dog.shout;  
  5. cat.greet();//“Hello,MynameisxiaohuaandIam2yearsold!” 

另外,使用函數(shù)對(duì)象的call和apply方法,還可以動(dòng)態(tài)指定函數(shù)或方法的調(diào)用對(duì)象:

  1. dog.shout.call(cat);  
  2. //“Hello,MynameisxiaohuaandIam2yearsold!”  
  3.  
  4. 或者  
  5.  
  6. dog.shout.apply(cat);  
  7. //“Hello,MynameisxiaohuaandIam2yearsold!”  

#p#3.作為構(gòu)造函數(shù)

JavaScript是通過(guò)構(gòu)造函數(shù)來(lái)模擬面向?qū)ο笳Z(yǔ)言中的類(lèi)的。例如:

  1. functionAnimal(sort,character){  
  2. this.sort=sort;  
  3. this.character=character;  

以Animal作為構(gòu)造函數(shù),就可以像下面這樣創(chuàng)建一個(gè)新對(duì)象:

  1. vardog=newAnimal(”mammal”,”fourlegs”);  
  2.  

創(chuàng)建dog的對(duì)象的過(guò)程如下:首先,new運(yùn)算符創(chuàng)建一個(gè)空對(duì)象({}),然后以這個(gè)空對(duì)象為調(diào)用對(duì)象調(diào)用函數(shù)Animal,為這個(gè)空對(duì)象添加兩個(gè)屬性sort和character,接著,再將這個(gè)空對(duì)象的默認(rèn)constructor屬性修改為構(gòu)造函數(shù)的名稱(chēng)(即Animal;空對(duì)象創(chuàng)建時(shí)默認(rèn)的constructor屬性值是Object),并且將空對(duì)象的__proto__屬性設(shè)置為指向Animal.prototype——這就是所謂的對(duì)象初始化。最后,返回初始化完畢的對(duì)象。這里將返回的新對(duì)象賦值給了變量dog。

  1. dog.sort;//mammal  
  2. dog.character;//fourlegs  
  3. dog.constructor;//Animal 

聰明的讀者結(jié)合前面介紹的內(nèi)容,可能會(huì)認(rèn)為使用new運(yùn)算符調(diào)用構(gòu)造函數(shù)創(chuàng)建對(duì)象的過(guò)程也可以像下面這樣來(lái)實(shí)現(xiàn):

  1. vardog={};  
  2. Animal.call(dog,“mammal”,”fourlegs”); 

表面上看,這兩行代碼與vardog=newAnimal(”mammal”,”fourlegs”);是等價(jià)的,其實(shí)卻不是。雖然通過(guò)指定函數(shù)的執(zhí)行環(huán)境能夠部分達(dá)到初始化對(duì)象的目的,例如空對(duì)象dog確實(shí)獲得了sort和character這兩個(gè)屬性:

  1. dog.sort;//mammal  
  2. dog.character;//fourlegs  
  3. dog.constructor;//Object——注意,沒(méi)有修改dog對(duì)象默認(rèn)的constructor屬性 

但是,最關(guān)鍵的是新創(chuàng)建的dog對(duì)象失去了通過(guò)Animal.prototype屬性繼承其他對(duì)象的能力。只要與前面采用new運(yùn)算符調(diào)用構(gòu)造函數(shù)創(chuàng)建對(duì)象的過(guò)程對(duì)比一下,就會(huì)發(fā)現(xiàn),new運(yùn)算符在初始化新對(duì)象期間,除了為新對(duì)象添加顯式聲明的屬性外,還會(huì)對(duì)新對(duì)象進(jìn)行了一番“暗箱操作”——即將新對(duì)象的constructor屬性重寫(xiě)為Animal,將新對(duì)象的__proto__屬性設(shè)置為指向Animal.prototype。雖然手工“初始化對(duì)象”也可以將dog.constructor重寫(xiě)為Animal,但根據(jù)ECMA262規(guī)范,對(duì)象的__proto__屬性對(duì)開(kāi)發(fā)人員是只讀的,對(duì)它的設(shè)置只能在通過(guò)new運(yùn)算符創(chuàng)建對(duì)象時(shí)由JavaScript解釋引擎替我們完成。
JavaScript是基于原型繼承的,如果不能正確設(shè)置對(duì)象的__proto__屬性,那么就意味著默認(rèn)的繼承機(jī)制會(huì)失效:

  1. Animal.prototype.greet=“Hi,goodlucky!”;  
  2. dog.greet;//undefined 

事實(shí)上,在Firefox中,__proto__屬性也是可寫(xiě)的:

  1. Animal.prototype.greet=“Hi,goodlucky!”;  
  2. dog.__proto__=Animal.prototype;  
  3. dog.greet;//Hi,goodlucky! 

但這樣做只能在Firefox中行得通??紤]到在兼容多瀏覽器,必須依賴(lài)于new運(yùn)算符,才能實(shí)現(xiàn)基于原型的繼承。

【編輯推薦】

  1. 深入學(xué)習(xí)JavaScript中Function對(duì)象語(yǔ)法
  2. 解析JS中定義Function的兩種實(shí)用方法
  3. prototype.js的Ajax對(duì)IE8兼容問(wèn)題解決方案
  4. Javascript數(shù)組創(chuàng)建及其常見(jiàn)操作
  5. JavaScript調(diào)試工具解決IE6等多版本共存問(wèn)題 

 

責(zé)任編輯:佚名 來(lái)源: okajax.com
相關(guān)推薦

2019-02-21 05:51:44

物聯(lián)網(wǎng)用途IOT

2022-07-01 10:34:03

JavaScript代碼前端

2019-12-04 08:18:03

5G通信KPI

2013-07-15 10:46:36

2019-10-25 21:39:39

服務(wù)器開(kāi)發(fā)工具

2023-07-12 23:41:04

Linuxfind

2010-05-24 14:57:10

SVN子命令

2011-04-12 10:56:35

平板電腦iPadAdMob

2018-09-18 23:25:49

Python數(shù)據(jù)科學(xué)庫(kù)

2015-09-14 15:23:44

JavaScriptfunction

2023-11-28 11:29:02

人工智能醫(yī)療保健

2019-12-03 19:09:19

JavaScriptNumbers阿里云計(jì)算

2012-02-06 13:52:33

JavaScript

2021-07-20 10:26:12

JavaScriptasyncawait

2021-11-11 11:24:54

JavaScript模型事件

2025-03-19 10:22:09

JavaScript編程語(yǔ)言開(kāi)發(fā)

2009-02-12 10:17:00

系統(tǒng)網(wǎng)絡(luò)故障

2012-11-07 15:13:05

2010-10-09 10:10:55

JavaScriptFunction對(duì)象

2022-05-29 21:39:32

工業(yè)物聯(lián)網(wǎng)信息技術(shù)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)