javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程
更新時(shí)間：2009年12月31日 23:52:43 作者：
看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因?yàn)閷懙貌缓?而是因?yàn)樘願(yuàn)W.
類、構(gòu)造函數(shù)、原型
先來(lái)說(shuō)明一點(diǎn):在上面的內(nèi)容中提到,每一個(gè)函數(shù)都包含了一個(gè)prototype屬性,這個(gè)屬性指向了一個(gè)prototype對(duì)象(Every
function has a prototype property that refers to a predefined prototype object --section8.6.2).注意不要
搞混了.
構(gòu)造函數(shù):
new操作符用來(lái)生成一個(gè)新的對(duì)象.new后面必須要跟上一個(gè)函數(shù),也就是我們常說(shuō)的構(gòu)造函數(shù).構(gòu)造函數(shù)的工作原理又是怎樣的呢?
先看一個(gè)例子:
復(fù)制代碼 代碼如下:
function Person(name,sex) {
this.name = name;
this.sex = sex;
}
var per = new Person("sdcyst","male");
alert("name:"+per.name+"_sex:"+per.sex); //name:sdcyst_sex:male
下面說(shuō)明一下這個(gè)工作的步驟:
開(kāi)始創(chuàng)建了一個(gè)函數(shù)(不是方法,只是一個(gè)普通的函數(shù)),注意用到了this關(guān)鍵字.以前我們提到過(guò)this關(guān)鍵字表示調(diào)用該方法的對(duì)象,也就
是說(shuō)通過(guò)對(duì)象調(diào)用"方法"的時(shí)候,this關(guān)鍵字會(huì)指向該對(duì)象(不使用對(duì)象直接調(diào)用該函數(shù)則this指向整個(gè)的script域,或者函數(shù)所在的域,在此
我們不做詳細(xì)的討論).當(dāng)我們使用new操作符時(shí),javascript會(huì)先創(chuàng)建一個(gè)空的對(duì)象,然后這個(gè)對(duì)象被new后面的方法(函數(shù))的this關(guān)鍵字引用!然后在方法中
通過(guò)操作this,就給這個(gè)新創(chuàng)建的對(duì)象相應(yīng)的賦予了屬性.最后返回這個(gè)經(jīng)過(guò)處理的對(duì)象.這樣上面的例子就很清楚:先創(chuàng)建一個(gè)空對(duì)象,然后
調(diào)用Person方法對(duì)其進(jìn)行賦值,最后返回該對(duì)象,我們就得到了一個(gè)per對(duì)象.
prototype(原型)--在這里會(huì)反復(fù)提到"原型對(duì)象"和"原型屬性",注意區(qū)分這兩個(gè)概念.
在javascript中,每個(gè)對(duì)象都有一個(gè)prototype屬性,這個(gè)屬性指向了一個(gè)prototype對(duì)象.
上面我們提到了用new來(lái)創(chuàng)建一個(gè)對(duì)象的過(guò)程,事實(shí)上在這個(gè)過(guò)程中,當(dāng)創(chuàng)建了空對(duì)象后,new會(huì)接著操作剛生成的這個(gè)對(duì)象的prototype屬性.
每個(gè)方法都有一個(gè)prototype屬性(因?yàn)榉椒ū旧硪彩菍?duì)象),new操作符生成的新對(duì)象的prototype屬性值和構(gòu)造方法的prototype屬性值是一致的.構(gòu)造方
法的prototype屬性指向了一個(gè)prototype對(duì)象,這個(gè)prototype對(duì)象初始只有一個(gè)屬性constructor,而這個(gè)constructor屬性又指向了prototype屬性所在的方
法(In the previous section, I showed that the new operator creates a new, empty object and then invokes a constructor
function as a method of that object. This is not the complete story, however. After creating the empty object,
new sets the prototype of that object. The prototype of an object is the value of the prototype property of its
constructor function. All functions have a prototype property that is automatically created and initialized when
the function is defined. The initial value of the prototype property is an object with a single property. This property
is named constructor and refers back to the constructor function with which the prototype is associated. this is why every
object has a constructor property. Any properties you add to this prototype object will appear to be properties of
objects initialized by the constructor. -----section9.2)
有點(diǎn)暈,看下面的圖:
這樣,當(dāng)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新的對(duì)象時(shí),它會(huì)獲取構(gòu)造函數(shù)的prototype屬性所指向的prototype對(duì)象的所有屬性.對(duì)構(gòu)造函數(shù)對(duì)應(yīng)的prototype對(duì)象
所做的任何操作都會(huì)反應(yīng)到它所生成的對(duì)象身上,所有的這些對(duì)象共享構(gòu)造函數(shù)對(duì)應(yīng)的prototype對(duì)象的屬性(包括方法).
看個(gè)具體的例子吧:
復(fù)制代碼 代碼如下:
function Person(name,sex) { //構(gòu)造函數(shù)
this.name = name;
this.sex = sex;
}
Person.prototype.age = 12; //為prototype屬性對(duì)應(yīng)的prototype對(duì)象的屬性賦值
Person.prototype.print = function() { //添加方法
alert(this.name+"_"+this.sex+"_"+this.age);
};
var p1 = new Person("name1","male");
var p2 = new Person("name2","male");
p1.print(); //name1_male_12
p2.print(); //name2_male_12
Person.prototype.age = 18; //改變prototype對(duì)象的屬性值,注意是操作構(gòu)造函數(shù)的prototype屬性
p1.print(); //name1_male_18
p2.print(); //name2_male_18
到目前為止,我們已經(jīng)模擬出了簡(jiǎn)單的類的實(shí)現(xiàn),我們有了構(gòu)造函數(shù),有了類屬性,有了類方法,可以創(chuàng)建"實(shí)例".
在下面的文章中,我們就用"類"這個(gè)名字來(lái)代替構(gòu)造方法,但是,這僅僅是模擬,并不是真正的面向?qū)ο蟮?類".
在下一步的介紹之前,我們先來(lái)看看改變對(duì)象的prototype屬性和設(shè)置prototype屬性的注意事項(xiàng):
給出一種不是很恰當(dāng)?shù)慕忉?或許有助于我們理解:當(dāng)我們new了一個(gè)對(duì)象之后,這個(gè)對(duì)象就會(huì)獲得構(gòu)造函數(shù)的prototype屬
性(包括函數(shù)和變量),可以認(rèn)為是構(gòu)造函數(shù)(類)繼承了它的prototype屬性對(duì)應(yīng)的prototype對(duì)象的函數(shù)和變量,也就是說(shuō),
prototype對(duì)象模擬了一個(gè)超類的效果.聽(tīng)著比較拗口,我們直接看個(gè)實(shí)例吧:
復(fù)制代碼 代碼如下:
function Person(name,sex) { //Person類的構(gòu)造函數(shù)
this.name = name;
this.sex = sex;
}
Person.prototype.age = 12; //為Person類的prototype屬性對(duì)應(yīng)的prototype對(duì)象的屬性賦值,
//相當(dāng)于為Person類的父類添加屬性
Person.prototype.print = function() { //為Person類的父類添加方法
alert(this.name+"_"+this.sex+"_"+this.age);
};
var p1 = new Person("name1","male"); //p1的age屬性繼承子Person類的父類(即prototype對(duì)象)
var p2 = new Person("name2","male");
p1.print(); //name1_male_12
p2.print(); //name2_male_12
p1.age = 34; //改變p1實(shí)例的age屬性
p1.print(); //name1_male_34
p2.print(); //name2_male_12
Person.prototype.age = 22; //改變Person類的超類的age屬性
p1.print(); //name1_male_34(p1的age屬性并沒(méi)有隨著prototype屬性的改變而改變)
p2.print(); //name2_male_22(p2的age屬性發(fā)生了改變)
p1.print = function() { //改變p1對(duì)象的print方法
alert("i am p1");
}
p1.print(); //i am p1(p1的方法發(fā)生了改變)
p2.print(); //name2_male_22(p2的方法并沒(méi)有改變)
Person.prototype.print = function() { //改變Person超類的print方法
alert("new print method!");
}
p1.print(); //i am p1(p1的print方法仍舊是自己的方法)
p2.print(); //new print method!(p2的print方法隨著超類方法的改變而改變)
看過(guò)一篇文章介紹說(shuō)javascript中對(duì)象的prototype屬性相當(dāng)于java中的static變量,可以被這個(gè)類下的所有對(duì)象
共用.而上面的例子似乎表明實(shí)際情況并不是這樣:
在JS中,當(dāng)我們用new操作符創(chuàng)建了一個(gè)類的實(shí)例對(duì)象后,它的方法和屬性確實(shí)繼承了類的prototype屬性,類的prototype屬性
中定義的方法和屬性,確實(shí)可以被這些實(shí)例對(duì)象直接引用.但是,當(dāng)我們對(duì)這些實(shí)例對(duì)象的屬性和方法重新賦值或定義后,那么
實(shí)例對(duì)象的屬性或方法就不再指向類的prototype屬性中定義的屬性和方法,此時(shí),即使再對(duì)類的prototype屬性中相應(yīng)的方法或
屬性做修改,也不會(huì)反應(yīng)在實(shí)例對(duì)象身上.這就解釋了上面的例子:
一開(kāi)始,用new操作符生成了兩個(gè)對(duì)象p1,p2,他們的age屬性和print方法都來(lái)自(繼承于)Person類的prototype屬性.然后,我們
修改了p1的age屬性,后面對(duì)Person類的prototype屬性中的age重新賦值(Person.prototype.age = 22),p1的age屬性并不會(huì)
隨之改變,但是p2的age屬性卻隨之發(fā)生了變化,因?yàn)閜2的age屬性還是引自Person類的prototype屬性.同樣的情況在后面的
print方法中也體現(xiàn)了出來(lái).
通過(guò)上面的介紹,我們知道prototype屬性在javascript中模擬了父類(超類)的角色,在js中體現(xiàn)面向?qū)ο蟮乃枷?prototype屬性
是非常關(guān)鍵的.
類變量/類方法/實(shí)例變量/實(shí)例方法
先補(bǔ)充一下以前寫過(guò)的方法:
在javascript中,所有的方法都有一個(gè)call方法和apply方法.這兩個(gè)方法可以模擬對(duì)象調(diào)用方法.它的第一個(gè)參數(shù)是對(duì)象,后面的
參數(shù)表示對(duì)象調(diào)用這個(gè)方法時(shí)的參數(shù)(ECMAScript specifies two methods that are defined for all functions, call()
and apply(). These methods allow you to invoke a function as if it were a method of some other object. The first
argument to both call() and apply() is the object on which the function is to be invoked; this argument becomes
the value of the this keyword within the body of the function. Any remaining arguments to call() are the values
that are passed to the function that is invoked).比如我們定義了一個(gè)方法f(),然后調(diào)用下面的語(yǔ)句:
f.call(o, 1, 2);
作用就相當(dāng)于
o.m = f;
o.m(1,2);
delete o.m;
舉個(gè)例子:
復(fù)制代碼 代碼如下:
function Person(name,age) { //定義方法
this.name = name;
this.age = age;
}
var o = new Object(); //空對(duì)象
alert(o.name + "_" + o.age); //undefined_undefined
Person.call(o,"sdcyst",18); //相當(dāng)于調(diào)用:o.Person("sdcyst",18)
alert(o.name + "_" + o.age); //sdcyst_18
Person.apply(o,["name",89]);//apply方法作用同call,不同之處在于傳遞參數(shù)的形式是用數(shù)組來(lái)傳遞
alert(o.name + "_" + o.age); //name_89
實(shí)例變量和實(shí)例方法都是通過(guò)實(shí)例對(duì)象加"."操作符然后跟上屬性名或方法名來(lái)訪問(wèn)的,但是我們也可以為類來(lái)設(shè)置方法或變量,
這樣就可以直接用類名加"."操作符然后跟上屬性名或方法名來(lái)訪問(wèn).定義類屬性和類方法很簡(jiǎn)單:
復(fù)制代碼 代碼如下:
Person.counter = 0; //定義類變量,創(chuàng)建的Person實(shí)例的個(gè)數(shù)
function Person(name,age) {
this.name = name;
this.age = age;
Person.counter++; //沒(méi)創(chuàng)建一個(gè)實(shí)例,類變量counter加1
};
Person.whoIsOlder = function(p1,p2) { //類方法,判斷誰(shuí)的年齡較大
if(p1.age > p2.age) {
return p1;
} else {
return p2;
}
}
var p1 = new Person("p1",18);
var p2 = new Person("p2",22);
alert("現(xiàn)在有 " + Person.counter + "個(gè)人"); //現(xiàn)在有2個(gè)人
var p = Person.whoIsOlder(p1,p2);
alert(p.name + "的年齡較大"); //p2的年齡較大
prototype屬性的應(yīng)用:
下面這個(gè)例子是根據(jù)原書改過(guò)來(lái)的.
假設(shè)我們定義了一個(gè)Circle類,有一個(gè)radius屬性和area方法,實(shí)現(xiàn)如下:
復(fù)制代碼 代碼如下:
function Circle(radius) {
this.radius = radius;
this.area = function() {
return 3.14 * this.radius * this.radius;
}
}
var c = new Circle(1);
alert(c.area()); //3.14
假設(shè)我們定義了100個(gè)Circle類的實(shí)例對(duì)象,那么每個(gè)實(shí)例對(duì)象都有一個(gè)radius屬性和area方法,
實(shí)際上,除了radius屬性,每個(gè)Circle類的實(shí)例對(duì)象的area方法都是一樣,這樣的話,我們就可以
把a(bǔ)rea方法抽出來(lái)定義在Circle類的prototype屬性中,這樣所有的實(shí)例對(duì)象就可以調(diào)用這個(gè)方法,
從而節(jié)省空間.
復(fù)制代碼 代碼如下:
function Circle(radius) {
this.radius = radius;
}
Circle.prototype.area = function() {
return 3.14 * this.radius * this.radius;
}
var c = new Circle(1);
alert(c.area()); //3.14
現(xiàn)在,讓我們用prototype屬性來(lái)模擬一下類的繼承:首先定義一個(gè)Circle類作為父類,然后定義子類
PositionCircle.
復(fù)制代碼 代碼如下:
function Circle(radius) { //定義父類Circle
this.radius = radius;
}
Circle.prototype.area = function() { //定義父類的方法area計(jì)算面積
return this.radius * this.radius * 3.14;
}
function PositionCircle(x,y,radius) { //定義類PositionCircle
this.x = x; //屬性橫坐標(biāo)
this.y = y; //屬性縱坐標(biāo)
Circle.call(this,radius); //調(diào)用父類的方法,相當(dāng)于調(diào)用this.Circle(radius),設(shè)置PositionCircle類的
//radius屬性
}
PositionCircle.prototype = new Circle(); //設(shè)置PositionCircle的父類為Circle類
var pc = new PositionCircle(1,2,1);
alert(pc.area()); //3.14
//PositionCircle類的area方法繼承自Circle類,而Circle類的
//area方法又繼承自它的prototype屬性對(duì)應(yīng)的prototype對(duì)象
alert(pc.radius); //1 PositionCircle類的radius屬性繼承自Circle類
/*
注意:在前面我們?cè)O(shè)置PositionCircle類的prototype屬性指向了一個(gè)Circle對(duì)象,
因此pc的prototype屬性繼承了Circle對(duì)象的prototype屬性,而Circle對(duì)象的constructor屬
性(即Circle對(duì)象對(duì)應(yīng)的prototype對(duì)象的constructor屬性)是指向Circle的,所以此處彈出
的是Circ.
*/
alert(pc.constructor); //Circle
/*為此,我們?cè)谠O(shè)計(jì)好了類的繼承關(guān)系后,還要設(shè)置子類的constructor屬性,否則它會(huì)指向父類
的constructor屬性
*/
PositionCircle.prototype.constructor = PositionCircle
alert(pc.constructor); //PositionCircle
作用域、閉包、模擬私有屬性
先來(lái)簡(jiǎn)單說(shuō)一下變量作用域，這些東西我們都很熟悉了，所以也不詳細(xì)介紹。
復(fù)制代碼 代碼如下:
var sco = "global"; //全局變量
function t() {
var sco = "local"; //函數(shù)內(nèi)部的局部變量
alert(sco); //local 優(yōu)先調(diào)用局部變量
}
t(); //local
alert(sco); //global 不能使用函數(shù)內(nèi)的局部變量
注意一點(diǎn)，在javascript中沒(méi)有塊級(jí)別的作用域，也就是說(shuō)在java或c/c++中我們可以
用"{}"來(lái)包圍一個(gè)塊，從而在其中定義塊內(nèi)的局部變量，在"{}"塊外部,這些變量不再起作用,
同時(shí),也可以在for循環(huán)等控制語(yǔ)句中定義局部的變量,但在javascript中沒(méi)有此項(xiàng)特性:
復(fù)制代碼 代碼如下:
function f(props) {
for(var i=0; i<10; i++) {}
alert(i); //10 雖然i定義在for循環(huán)的控制語(yǔ)句中,但在函數(shù)
//的其他位置仍舊可以訪問(wèn)該變量.
if(props == "local") {
var sco = "local";
alert(sco);
}
alert(sco); //同樣,函數(shù)仍可引用if語(yǔ)句內(nèi)定義的變量
}
f("local"); //10 local local
在函數(shù)內(nèi)部定義局部變量時(shí)要格外小心:
復(fù)制代碼 代碼如下:
var sco = "global";
function print1() {
alert(sco); //global
}
function print2() {
var sco = "local";
alert(sco); //local
}
function print3() {
alert(sco); //undefined
var sco = "local";
alert(sco); local
}
print1(); //global
print2(); //local
print3(); //undefined local
前面兩個(gè)函數(shù)都很容易理解，關(guān)鍵是第三個(gè):第一個(gè)alert語(yǔ)句并沒(méi)有把全局變量"global"顯示出來(lái)，
而是undefined，這是因?yàn)樵趐rint3函數(shù)中，我們定義了sco局部變量(不管位置在何處),那么全局的
sco屬性在函數(shù)內(nèi)部將不起作用，所以第一個(gè)alert中sco其實(shí)是局部sco變量，相當(dāng)于：
復(fù)制代碼 代碼如下:
function print3() {
var sco;
alert(sco);
sco = "local";
alert(sco);
}
從這個(gè)例子我們得出，在函數(shù)內(nèi)部定義局部變量時(shí)，最好是在開(kāi)頭就把所需的變量定義好，以免出錯(cuò)。
函數(shù)的作用域在定義函數(shù)的時(shí)候已經(jīng)確定了，例如：
復(fù)制代碼 代碼如下:
var scope = "global" //定義全局變量
function print() {
alert(scope);
}
function change() {
var scope = "local"; //定義局部變量
print(); //雖然是在change函數(shù)的作用域內(nèi)調(diào)用print函數(shù)，
//但是print函數(shù)執(zhí)行時(shí)仍舊按照它定義時(shí)的作用域起作用
}
change(); //golbal
閉包
閉包是擁有變量、代碼和作用域的表達(dá)式.在javascript中,函數(shù)就是變量、代碼和函數(shù)的作用域的組合體,因此所有
的函數(shù)都是閉包(JavaScript functions are a combination of code to be executed and the scope in which to
execute them. This combination of code and scope is known as a closure in the computer science literature.
All JavaScript functions are closures).好像挺簡(jiǎn)單.但是閉包到底有什么作用呢?看一個(gè)例子。
我們想寫一個(gè)方法，每次都得到一個(gè)整數(shù)，這個(gè)整數(shù)是每次加1的，沒(méi)有思索，馬上下筆：
復(fù)制代碼 代碼如下:
var i = 0;
function getNext() {
i++;
return i;
}
alert(getNext()); //1
alert(getNext()); //2
alert(getNext()); //3
一直用getNext函數(shù)得到下一個(gè)整數(shù),而后不小心或者故意的將全局變量i的值設(shè)為0,然后再次調(diào)用getNext,
你會(huì)發(fā)現(xiàn)又從1開(kāi)始了........這時(shí)你會(huì)想到,要是把i設(shè)置成一個(gè)私有變量該多好,這樣只有在方法內(nèi)部才
可能改變它，在函數(shù)之外就沒(méi)有辦法修改了.下面的代碼就是按照這個(gè)要求來(lái)做得，后面我們?cè)敿?xì)討論。
為了解釋方便，我們就把下面的代碼稱為demo1.
復(fù)制代碼 代碼如下:
function temp() {
var i = 0;
function b() {
return ++i;
}
return b;
}
var getNext = temp();
alert(getNext()); //1
alert(getNext()); //2
alert(getNext()); //3
alert(getNext()); //4
因?yàn)槲覀兤綍r(shí)所說(shuō)的javascript絕大多數(shù)都是指的在客戶端(瀏覽器)下，所以這里也不例外。
在javascript解釋器啟動(dòng)時(shí),會(huì)首先創(chuàng)建一個(gè)全局的對(duì)象(global object),也就是"window"所引用的對(duì)象.
然后我們定義的所有全局屬性和方法等都會(huì)成為這個(gè)對(duì)象的屬性.
不同的函數(shù)和變量的作用域是不同的,因而構(gòu)成了一個(gè)作用域鏈(scope chain).很顯然，在javascript解釋器啟動(dòng)時(shí),
這個(gè)作用域鏈只有一個(gè)對(duì)象:window(Window Object，即global object).
在demo1中,temp函數(shù)是一個(gè)全局函數(shù)，因此temp()函數(shù)的作用域(scopr)對(duì)應(yīng)的作用域鏈就是js解釋器啟動(dòng)時(shí)的作用域鏈，只有一個(gè)window對(duì)象。
當(dāng)temp執(zhí)行時(shí)，首先創(chuàng)建一個(gè)call對(duì)象(活動(dòng)對(duì)象)，然后把這個(gè)call對(duì)象添加到temp函數(shù)對(duì)應(yīng)的作用域鏈的最前頭,這是，temp()函數(shù)
對(duì)應(yīng)的作用域鏈就包含了兩個(gè)對(duì)象：window對(duì)象和temp函數(shù)對(duì)應(yīng)的call object(活動(dòng)對(duì)象).然后呢，因?yàn)槲覀冊(cè)趖emp函數(shù)里定義了變量i，
定義了函數(shù)b(),這些都會(huì)成為call object的屬性。當(dāng)然，在這之前會(huì)首先給call object對(duì)象添加arguments屬性，保存了temp()函數(shù)執(zhí)行時(shí)
傳遞過(guò)來(lái)的參數(shù)。此時(shí)，整個(gè)的作用域鏈如下圖所示:
同理可以得出函數(shù)b()執(zhí)行時(shí)的整個(gè)作用域鏈:
注意在b()的作用域鏈中，b()函數(shù)對(duì)應(yīng)的call object只有一個(gè)arguemnts屬性，并沒(méi)有i屬性，這是因?yàn)樵赽()的定義中，并沒(méi)有用var關(guān)鍵字來(lái)
聲明i屬性，只有用var 關(guān)鍵字聲明的屬性才會(huì)添加到對(duì)應(yīng)的call object上.
在函數(shù)執(zhí)行時(shí)，首先查找對(duì)應(yīng)的call object有沒(méi)有需要的屬性，如果沒(méi)有，再往上一級(jí)查找，直到找到為止，如果找不到，那就是undefined了.
這樣我們?cè)賮?lái)看demo1的執(zhí)行情況。我們用getNext引用了temp函數(shù)，而temp函數(shù)返回了函數(shù)b，這樣getNext函數(shù)其實(shí)就是b函數(shù)的引用。
執(zhí)行一次getNext，就執(zhí)行一次b()函數(shù)。因?yàn)楹瘮?shù)b()的作用域依賴于函數(shù)temp，因此temp函數(shù)在內(nèi)存中會(huì)一直存在。函數(shù)b執(zhí)行時(shí)，首先查找
i，在b對(duì)應(yīng)的call object中沒(méi)有，于是往上一級(jí)找，在temp函數(shù)對(duì)應(yīng)的call object中找到了，于是將其值加1，然后返回這個(gè)值。
這樣，只要getNext函數(shù)有效，那么b()函數(shù)就一直有效，同時(shí)，b()函數(shù)依賴的temp函數(shù)也不會(huì)消失，變量i也不會(huì)消失，而且這個(gè)變量在temp函數(shù)
外部根本就訪問(wèn)不到，只能在temp()函數(shù)內(nèi)部訪問(wèn)(b當(dāng)然可以了).
來(lái)看一個(gè)利用閉包來(lái)模擬私有屬性的例子:
復(fù)制代碼 代碼如下:
function Person(name, age) {
this.getName = function() { return name; };
this.setName = function(newName) { name = newName; };
this.getAge = function() { return age; };
this.setAge = function(newAge) { age = newAge; };
}
var p1 = new Person("sdcyst",3);
alert(p1.getName()); //sdcyst
alert(p1.name); //undefined 因?yàn)镻erson('類')沒(méi)有name屬性
p1.name = "mypara" //顯示的給p1添加name屬性
alert(p1.getName()); //sdcyst 但是并不會(huì)改變getName方法的返回值
alert(p1.name); //mypara 顯示出p1對(duì)象的name屬性
p1.setName("sss"); //改變私有的"name"屬性
alert(p1.getName()); //sss
alert(p1.name); //仍舊為mypara
定義了一個(gè)Person類，有兩個(gè)私有屬性name，age，分別定義對(duì)應(yīng)的get/set方法。
雖然可以顯示的設(shè)置p1的name、age屬性，但是這種顯示的設(shè)置，并不會(huì)改變我們
最初設(shè)計(jì)時(shí)模擬出來(lái)的"name/age"私有屬性。
解釋閉包的確不是一件容易的事，在網(wǎng)上很多人也是利用例子來(lái)說(shuō)明閉包。如果有地方說(shuō)的不對(duì)，還請(qǐng)指正。
相關(guān)文章
微信小程序websocket實(shí)現(xiàn)聊天功能
這篇文章主要為大家詳細(xì)介紹了微信小程序websocket實(shí)現(xiàn)聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript的Object.defineProperty詳解
本篇文章給大家詳細(xì)講述了JavaScript的Object.defineProperty的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友參考學(xué)習(xí)下。2018-07-07
這篇文章主要給大家介紹了關(guān)于es6中比較有用的7個(gè)技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
使用JSX 建立組件 Parser（解析器）開(kāi)發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser（解析器）開(kāi)發(fā)的示例（前端組件化）本文重點(diǎn)講述我們?nèi)绾螐?開(kāi)始搭建一個(gè)組件系統(tǒng)，基于標(biāo)記語(yǔ)言的Parser的一種風(fēng)格2021-04-04
JS?限時(shí)限次數(shù)點(diǎn)擊按鈕的實(shí)現(xiàn)思路
這篇文章主要介紹了JS?限時(shí)限次數(shù)點(diǎn)擊按鈕,實(shí)現(xiàn)方法很簡(jiǎn)單需要用一個(gè)變量作為計(jì)數(shù),點(diǎn)擊一次，計(jì)數(shù)加一點(diǎn)擊函數(shù)內(nèi)判斷計(jì)數(shù)變量設(shè)置定時(shí)恢復(fù)，對(duì)實(shí)例代碼感興趣的朋友一起看看吧2022-03-03
在element-ui的el-tree組件中用render函數(shù)生成el-button的實(shí)例代碼
這篇文章主要介紹了在element-ui的el-tree組件中用render函數(shù)生成el-button 的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了webpack-dev-server核心概念案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
不使用XMLHttpRequest實(shí)現(xiàn)異步加載 Iframe和script
運(yùn)用Iframe和script可以實(shí)現(xiàn)簡(jiǎn)單的異步加載,沒(méi)有使用XMLHttpRequest，需要的朋友可以參考下2012-10-10
xmlplus組件設(shè)計(jì)系列之選項(xiàng)卡（Tabbar)（5）
xmlplus 是一個(gè)JavaScript框架，用于快速開(kāi)發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之選項(xiàng)卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
基于Bootstrap實(shí)現(xiàn)的下拉菜單手機(jī)端不能選擇菜單項(xiàng)的原因附解決辦法
小編使用bootstrap做的下拉菜單在電腦瀏覽器中可以正常使用，在手機(jī)瀏覽器中能彈出下拉列表卻不能選擇列表中的菜單項(xiàng)，怎么回事，如何解決呢？下面小編給大家分享下具體原因及解決辦法，一起看下吧2016-07-07