JavaScript面向?qū)ο笾R(shí)串結(jié)(讀JavaScript高級(jí)程序設(shè)計(jì)(第三版))
更新時(shí)間：2012年07月17日 11:08:15 作者：
最近在看JavaScript高級(jí)程序設(shè)計(jì)(第三版)，面向?qū)ο笠徽?0多頁(yè)，來(lái)來(lái)回回看了三五遍，每次看的收獲都不一樣
第一遍囫圇吞棗，不求甚解，感覺(jué)恍然大悟，結(jié)果晚上睡覺(jué)一想發(fā)現(xiàn)很多問(wèn)題，什么都不明白，再看第二遍，發(fā)現(xiàn)原來(lái)是這樣。過(guò)了幾天一用，發(fā)現(xiàn)手寫起來(lái)原來(lái)還是在憑記憶，于是下一遍，下一遍...
單憑記憶去弄清楚東西很不靠譜，時(shí)間一長(zhǎng)腦袋空白。特別是技術(shù)上的很多思想和原理，只看不練，即便當(dāng)時(shí)想得特別清楚，過(guò)久了也會(huì)忘。再者就是網(wǎng)上一些東西，只能說(shuō)是提供了一種便捷的查看途徑，事后還是自己總結(jié)為好，畢竟大多都是個(gè)人總結(jié)，一些概念很難講的很清楚，而且兩個(gè)人談同一件事情，一般說(shuō)的步驟和章節(jié)都是不同的，這樣很容易形成交叉記憶，越多交叉記憶越混亂。還是持懷疑的態(tài)度看東西好一點(diǎn)，動(dòng)手試一下就知道到底是怎么個(gè)樣子，知識(shí)串一下。高質(zhì)量有保證的書或者官方的有些東西，是不錯(cuò)的來(lái)源。
趁自己這會(huì)看得還算明白，腦袋還算清楚，記錄一下，做個(gè)備忘。概念性的東西是書上的，減少日后誤導(dǎo)。例子手寫加驗(yàn)證，再畫個(gè)圖，以便以后一看就明白。
一、封裝
對(duì)象定義：ECMA-262把對(duì)象定義為：“無(wú)序?qū)傩缘募希渲袑傩钥梢园ɑ局?、?duì)象或者函數(shù)”。
創(chuàng)建對(duì)象：每個(gè)對(duì)象都是基于一個(gè)引用類型創(chuàng)建的，這個(gè)引用類型可以是原生類型(Object, Array, Date, RegExp, Function, Boolean, Number, String)，也可以是自定義類型。
1、構(gòu)造函數(shù)模式
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
alert(this.name);
}
}
通過(guò)以上構(gòu)造函數(shù)使用new操作符可以創(chuàng)建對(duì)象實(shí)例。
var zhangsan = new Person('zhangsan', 20);
var lisi = new Person('lisi', 20);
zhangsan.sayName();//zhangsan
lisi.sayName(); //lisi
通過(guò)new創(chuàng)建對(duì)象經(jīng)歷4個(gè)步驟
1、創(chuàng)建一個(gè)新對(duì)象；[var o = new Object();]
2、將構(gòu)造函數(shù)的作用域賦給新對(duì)象（因此this指向了這個(gè)新對(duì)象）；[Person.apply(o)] [Person原來(lái)的this指向的是window]
3、執(zhí)行構(gòu)造函數(shù)中的代碼(為這個(gè)新對(duì)象添加屬性)；
4、返回新對(duì)象。
通過(guò)代碼還原new的步驟：
function createPerson(P) {
var o = new Object();
var args = Array.prototype.slice.call(arguments, 1);
o.__proto__ = P.prototype;
P.prototype.constructor = P;
P.apply(o, args);
}
測(cè)試新的創(chuàng)建實(shí)例方法
var wangwu = createPerson(Person, 'wangwu', 20);
wangwu.sayName();//wangwu
2、原型模式
原型對(duì)象概念：無(wú)論什么時(shí)候，只要?jiǎng)?chuàng)建一個(gè)新函數(shù)，就會(huì)根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。在默認(rèn)情況下，所有原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor（構(gòu)造函數(shù)）屬性，這個(gè)屬性包含一個(gè)指向 prototype 屬性所在函數(shù)的指針。而通過(guò)這個(gè)構(gòu)造函數(shù)，可以繼續(xù)為原型對(duì)象添加其他屬性和方法。創(chuàng)建了自定義的構(gòu)造函數(shù)后，其原型對(duì)象默認(rèn)只會(huì)取得 constructor 屬性；至于其他方法，則都從 Object 繼承而來(lái)。當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新實(shí)例后，該實(shí)例的內(nèi)部將包含一個(gè)指針（內(nèi)部屬性），指向構(gòu)造函數(shù)的原型對(duì)象。ECMA-262第5版管這個(gè)指針叫 [[Prototype]] 。腳本中沒(méi)有標(biāo)準(zhǔn)的方式訪問(wèn) [[Prototype]]，但Firefox、Safari和Chrome在每個(gè)對(duì)象上都支持一個(gè)屬性__proto__；而在其他實(shí)現(xiàn)中，這個(gè)屬性對(duì)腳本是完全不可見(jiàn)的。不過(guò)，要明確的真正重要的一點(diǎn)就是，這個(gè)連接存在于示例和構(gòu)造函數(shù)的原型對(duì)象之間，而不是存在于實(shí)例和構(gòu)造函數(shù)之間。
這段話基本概述了構(gòu)造函數(shù)、原型、示例之間的關(guān)系，下圖表示更清晰
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.country = 'chinese';
Person.prototype.sayCountry = function() {
alert(this.country);
}
var zhangsan = new Person('zhangsan', 20);
var lisi = new Person('lisi', 20);
zhangsan.sayCountry(); //chinese
lisi.sayCountry(); //chinese
alert(zhangsan.sayCountry == lisi.sayCountry); //true
注意地方：構(gòu)造函數(shù)的原型對(duì)象，主要用途是讓多個(gè)對(duì)象實(shí)例共享它所包含的屬性和方法。但這也是容易發(fā)生問(wèn)題的地方，如果原型對(duì)象中包含引用類型，那么應(yīng)引用類型存的是指針，所以會(huì)造成值共享。如下：
Person.prototype.friends = ['wangwu']; //Person添加一個(gè)數(shù)組類型
zhangsan.friends.push('zhaoliu'); //張三修改會(huì)對(duì)李四造成影響
alert(zhangsan.friends); //wangwu,zhaoliu
alert(lisi.friends); //wangwu,zhaoliu李四也多了個(gè)
3、組合使用構(gòu)造函數(shù)模式和原型模式
這種模式是使用最廣泛、認(rèn)同度最高的一種創(chuàng)建自定義類型的方式。構(gòu)造函數(shù)模式用于定義實(shí)例屬性，而原型模式用于定義方法和共享的屬性。這樣，每個(gè)實(shí)例都有自己的一份實(shí)例屬性的副本，同時(shí)有共享著對(duì)方法的引用，最大限度的節(jié)省了內(nèi)存。
原型模式改造后的如下：
function Person(name, age) {
this.name = name;
this.age = age;
this.friends = ['wangwu'];
}
Person.prototype.country = 'chinese';
Person.prototype.sayCountry = function() {
alert(this.country);
}
var zhangsan = new Person('zhangsan', 20);
var lisi = new Person('lisi', 20);
zhangsan.friends.push('zhaoliu');
alert(zhangsan.friends); //wangwu,zhaoliu
alert(lisi.friends); //wangwu
二、繼承
繼承基本概念
ECMAScript主要依靠原型鏈來(lái)實(shí)現(xiàn)繼承（也可以通過(guò)拷貝屬性繼承）。
原型鏈基本思想是，利用原型讓一個(gè)引用類型繼承另外一個(gè)引用類型的屬性和方法。構(gòu)造函數(shù)、原型、示例的關(guān)系是：每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，原型對(duì)象都包含了一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含了一個(gè)指向原型的內(nèi)部指針。所以，通過(guò)過(guò)讓原型對(duì)象等于另外一個(gè)類型的實(shí)例，此時(shí)原型對(duì)象將包含一個(gè)指向另一個(gè)原型的指針，相應(yīng)地，另一個(gè)原型中也包含這一個(gè)指向另一個(gè)構(gòu)造函數(shù)的指針。假如另外一個(gè)原型又是另一個(gè)類型的實(shí)例，那么上述關(guān)系依然成立，如此層層遞進(jìn)，就構(gòu)成了實(shí)例和原型的鏈條。這就是原型鏈的基本概念。
讀起來(lái)比較繞，不容易理解。直接通過(guò)實(shí)例說(shuō)明驗(yàn)證。
1、原型鏈繼承
function Parent() {
this.pname = 'parent';
}
Parent.prototype.getParentName = function() {
return this.pname;
}
function Child() {
this.cname = 'child';
}
//子構(gòu)造函數(shù)原型設(shè)置為父構(gòu)造函數(shù)的實(shí)例，形成原型鏈，讓Child擁有g(shù)etParentName方法
Child.prototype = new Parent();
Child.prototype.getChildName = function() {
return this.cname;
}
var c = new Child();
alert(c.getParentName()); //parent
圖解：
原型鏈的問(wèn)題，如果父類中包括了引用類型，通過(guò)Child.prototype = new Parent()會(huì)把父類中的引用類型帶到子類的原型中，而引用類型值的原型屬性會(huì)被所有實(shí)例共享。問(wèn)題就回到了[一、2]節(jié)了。
2、組合繼承-最常用繼承方式
組合繼承（combination inheritance）,是將原型鏈和借用構(gòu)造函數(shù)(apply, call)的技術(shù)組合到一塊。思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣既可以在原型上定義方法實(shí)現(xiàn)了函數(shù)的復(fù)用，又能保證每個(gè)實(shí)例都有它自己的屬性。
function Parent(name) {
this.name = name;
this.colors = ['red', 'yellow'];
}
Parent.prototype.sayName = function() {
alert(this.name);
}
function Child(name, age) {
Parent.call(this, name); //第二次調(diào)用Parent()
this.age = age;
}
Child.prototype = new Parent(); //第一次調(diào)用Parent()，父類的屬性會(huì)
Child.prototype.sayAge = function() {
alert(this.age);
}
var c1 = new Child('zhangsan', 20);
var c2 = new Child('lisi', 21);
c1.colors.push('blue');
alert(c1.colors); //red,yellow,blue
c1.sayName(); //zhangsan
c1.sayAge(); //20
alert(c2.colors); //red,yellow
c2.sayName(); //lisi
c2.sayAge(); //21
組合繼承的問(wèn)題是，每次都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù)：第一次是在創(chuàng)建子類型原型的時(shí)候，另一次是在子類型構(gòu)造函數(shù)內(nèi)部。這樣就會(huì)造成屬性的重寫 ，子類型構(gòu)造函數(shù)中包含了父類的屬性，而且子類的原型對(duì)象中也包含了父類的屬性。
3、寄生組合繼承-最完美繼承方式
所謂寄生組合繼承，即通過(guò)借用構(gòu)造函數(shù)來(lái)繼承屬性，通過(guò)原型鏈的混成形式來(lái)繼承方法。 其背后的基本思路是：不必為了指定子類的原型而調(diào)用超類型的構(gòu)造函數(shù)，我們所需要的無(wú)非就是超類型原型的一個(gè)副本
function extend(child, parent) {
var F = function(){}; //定義一個(gè)空的構(gòu)造函數(shù)
F.prototype = parent.prototype; //設(shè)置為父類的原型
child.prototype = new F(); //子類的原型設(shè)置為F的實(shí)例，形成原型鏈
child.prototype.constructor = child; //重新指定子類構(gòu)造函數(shù)指針
}
function Parent(name) {
this.name = name;
this.colors = ['red', 'yellow'];
}
Parent.prototype.sayName = function() {
alert(this.name);
}
function Child(name, age) {
Parent.call(this, name);
this.age = age;
}
extend(Child, Parent); //實(shí)現(xiàn)繼承
Child.prototype.sayAge = function() {
alert(this.age);
}
var c1 = new Child('zhangsan', 20);
var c2 = new Child('lisi', 21);
c1.colors.push('blue');
alert(c1.colors); //red,yellow,blue
c1.sayName(); //zhangsan
c1.sayAge(); //20
alert(c2.colors); //red,yellow
c2.sayName(); //lisi
c2.sayAge(); //21
單憑記憶去弄清楚東西很不靠譜，時(shí)間一長(zhǎng)腦袋空白。特別是技術(shù)上的很多思想和原理，只看不練，即便當(dāng)時(shí)想得特別清楚，過(guò)久了也會(huì)忘。再者就是網(wǎng)上一些東西，只能說(shuō)是提供了一種便捷的查看途徑，事后還是自己總結(jié)為好，畢竟大多都是個(gè)人總結(jié)，一些概念很難講的很清楚，而且兩個(gè)人談同一件事情，一般說(shuō)的步驟和章節(jié)都是不同的，這樣很容易形成交叉記憶，越多交叉記憶越混亂。還是持懷疑的態(tài)度看東西好一點(diǎn)，動(dòng)手試一下就知道到底是怎么個(gè)樣子，知識(shí)串一下。高質(zhì)量有保證的書或者官方的有些東西，是不錯(cuò)的來(lái)源。
趁自己這會(huì)看得還算明白，腦袋還算清楚，記錄一下，做個(gè)備忘。概念性的東西是書上的，減少日后誤導(dǎo)。例子手寫加驗(yàn)證，再畫個(gè)圖，以便以后一看就明白。
一、封裝
對(duì)象定義：ECMA-262把對(duì)象定義為：“無(wú)序?qū)傩缘募希渲袑傩钥梢园ɑ局?、?duì)象或者函數(shù)”。
創(chuàng)建對(duì)象：每個(gè)對(duì)象都是基于一個(gè)引用類型創(chuàng)建的，這個(gè)引用類型可以是原生類型(Object, Array, Date, RegExp, Function, Boolean, Number, String)，也可以是自定義類型。
1、構(gòu)造函數(shù)模式
復(fù)制代碼 代碼如下:
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
alert(this.name);
}
}
通過(guò)以上構(gòu)造函數(shù)使用new操作符可以創(chuàng)建對(duì)象實(shí)例。
var zhangsan = new Person('zhangsan', 20);
var lisi = new Person('lisi', 20);
zhangsan.sayName();//zhangsan
lisi.sayName(); //lisi
通過(guò)new創(chuàng)建對(duì)象經(jīng)歷4個(gè)步驟
1、創(chuàng)建一個(gè)新對(duì)象；[var o = new Object();]
2、將構(gòu)造函數(shù)的作用域賦給新對(duì)象（因此this指向了這個(gè)新對(duì)象）；[Person.apply(o)] [Person原來(lái)的this指向的是window]
3、執(zhí)行構(gòu)造函數(shù)中的代碼(為這個(gè)新對(duì)象添加屬性)；
4、返回新對(duì)象。
通過(guò)代碼還原new的步驟：
復(fù)制代碼 代碼如下:
function createPerson(P) {
var o = new Object();
var args = Array.prototype.slice.call(arguments, 1);
o.__proto__ = P.prototype;
P.prototype.constructor = P;
P.apply(o, args);
}
測(cè)試新的創(chuàng)建實(shí)例方法
var wangwu = createPerson(Person, 'wangwu', 20);
wangwu.sayName();//wangwu
2、原型模式
原型對(duì)象概念：無(wú)論什么時(shí)候，只要?jiǎng)?chuàng)建一個(gè)新函數(shù)，就會(huì)根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。在默認(rèn)情況下，所有原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor（構(gòu)造函數(shù)）屬性，這個(gè)屬性包含一個(gè)指向 prototype 屬性所在函數(shù)的指針。而通過(guò)這個(gè)構(gòu)造函數(shù)，可以繼續(xù)為原型對(duì)象添加其他屬性和方法。創(chuàng)建了自定義的構(gòu)造函數(shù)后，其原型對(duì)象默認(rèn)只會(huì)取得 constructor 屬性；至于其他方法，則都從 Object 繼承而來(lái)。當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新實(shí)例后，該實(shí)例的內(nèi)部將包含一個(gè)指針（內(nèi)部屬性），指向構(gòu)造函數(shù)的原型對(duì)象。ECMA-262第5版管這個(gè)指針叫 [[Prototype]] 。腳本中沒(méi)有標(biāo)準(zhǔn)的方式訪問(wèn) [[Prototype]]，但Firefox、Safari和Chrome在每個(gè)對(duì)象上都支持一個(gè)屬性__proto__；而在其他實(shí)現(xiàn)中，這個(gè)屬性對(duì)腳本是完全不可見(jiàn)的。不過(guò)，要明確的真正重要的一點(diǎn)就是，這個(gè)連接存在于示例和構(gòu)造函數(shù)的原型對(duì)象之間，而不是存在于實(shí)例和構(gòu)造函數(shù)之間。
這段話基本概述了構(gòu)造函數(shù)、原型、示例之間的關(guān)系，下圖表示更清晰
復(fù)制代碼 代碼如下:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.country = 'chinese';
Person.prototype.sayCountry = function() {
alert(this.country);
}
var zhangsan = new Person('zhangsan', 20);
var lisi = new Person('lisi', 20);
zhangsan.sayCountry(); //chinese
lisi.sayCountry(); //chinese
alert(zhangsan.sayCountry == lisi.sayCountry); //true
注意地方：構(gòu)造函數(shù)的原型對(duì)象，主要用途是讓多個(gè)對(duì)象實(shí)例共享它所包含的屬性和方法。但這也是容易發(fā)生問(wèn)題的地方，如果原型對(duì)象中包含引用類型，那么應(yīng)引用類型存的是指針，所以會(huì)造成值共享。如下：
復(fù)制代碼 代碼如下:
Person.prototype.friends = ['wangwu']; //Person添加一個(gè)數(shù)組類型
zhangsan.friends.push('zhaoliu'); //張三修改會(huì)對(duì)李四造成影響
alert(zhangsan.friends); //wangwu,zhaoliu
alert(lisi.friends); //wangwu,zhaoliu李四也多了個(gè)
3、組合使用構(gòu)造函數(shù)模式和原型模式
這種模式是使用最廣泛、認(rèn)同度最高的一種創(chuàng)建自定義類型的方式。構(gòu)造函數(shù)模式用于定義實(shí)例屬性，而原型模式用于定義方法和共享的屬性。這樣，每個(gè)實(shí)例都有自己的一份實(shí)例屬性的副本，同時(shí)有共享著對(duì)方法的引用，最大限度的節(jié)省了內(nèi)存。
原型模式改造后的如下：
復(fù)制代碼 代碼如下:
function Person(name, age) {
this.name = name;
this.age = age;
this.friends = ['wangwu'];
}
Person.prototype.country = 'chinese';
Person.prototype.sayCountry = function() {
alert(this.country);
}
var zhangsan = new Person('zhangsan', 20);
var lisi = new Person('lisi', 20);
zhangsan.friends.push('zhaoliu');
alert(zhangsan.friends); //wangwu,zhaoliu
alert(lisi.friends); //wangwu
二、繼承
繼承基本概念
ECMAScript主要依靠原型鏈來(lái)實(shí)現(xiàn)繼承（也可以通過(guò)拷貝屬性繼承）。
原型鏈基本思想是，利用原型讓一個(gè)引用類型繼承另外一個(gè)引用類型的屬性和方法。構(gòu)造函數(shù)、原型、示例的關(guān)系是：每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，原型對(duì)象都包含了一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含了一個(gè)指向原型的內(nèi)部指針。所以，通過(guò)過(guò)讓原型對(duì)象等于另外一個(gè)類型的實(shí)例，此時(shí)原型對(duì)象將包含一個(gè)指向另一個(gè)原型的指針，相應(yīng)地，另一個(gè)原型中也包含這一個(gè)指向另一個(gè)構(gòu)造函數(shù)的指針。假如另外一個(gè)原型又是另一個(gè)類型的實(shí)例，那么上述關(guān)系依然成立，如此層層遞進(jìn)，就構(gòu)成了實(shí)例和原型的鏈條。這就是原型鏈的基本概念。
讀起來(lái)比較繞，不容易理解。直接通過(guò)實(shí)例說(shuō)明驗(yàn)證。
1、原型鏈繼承
復(fù)制代碼 代碼如下:
function Parent() {
this.pname = 'parent';
}
Parent.prototype.getParentName = function() {
return this.pname;
}
function Child() {
this.cname = 'child';
}
//子構(gòu)造函數(shù)原型設(shè)置為父構(gòu)造函數(shù)的實(shí)例，形成原型鏈，讓Child擁有g(shù)etParentName方法
Child.prototype = new Parent();
Child.prototype.getChildName = function() {
return this.cname;
}
var c = new Child();
alert(c.getParentName()); //parent
圖解：
原型鏈的問(wèn)題，如果父類中包括了引用類型，通過(guò)Child.prototype = new Parent()會(huì)把父類中的引用類型帶到子類的原型中，而引用類型值的原型屬性會(huì)被所有實(shí)例共享。問(wèn)題就回到了[一、2]節(jié)了。
2、組合繼承-最常用繼承方式
組合繼承（combination inheritance）,是將原型鏈和借用構(gòu)造函數(shù)(apply, call)的技術(shù)組合到一塊。思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣既可以在原型上定義方法實(shí)現(xiàn)了函數(shù)的復(fù)用，又能保證每個(gè)實(shí)例都有它自己的屬性。
復(fù)制代碼 代碼如下:
function Parent(name) {
this.name = name;
this.colors = ['red', 'yellow'];
}
Parent.prototype.sayName = function() {
alert(this.name);
}
function Child(name, age) {
Parent.call(this, name); //第二次調(diào)用Parent()
this.age = age;
}
Child.prototype = new Parent(); //第一次調(diào)用Parent()，父類的屬性會(huì)
Child.prototype.sayAge = function() {
alert(this.age);
}
var c1 = new Child('zhangsan', 20);
var c2 = new Child('lisi', 21);
c1.colors.push('blue');
alert(c1.colors); //red,yellow,blue
c1.sayName(); //zhangsan
c1.sayAge(); //20
alert(c2.colors); //red,yellow
c2.sayName(); //lisi
c2.sayAge(); //21
組合繼承的問(wèn)題是，每次都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù)：第一次是在創(chuàng)建子類型原型的時(shí)候，另一次是在子類型構(gòu)造函數(shù)內(nèi)部。這樣就會(huì)造成屬性的重寫 ，子類型構(gòu)造函數(shù)中包含了父類的屬性，而且子類的原型對(duì)象中也包含了父類的屬性。
3、寄生組合繼承-最完美繼承方式
所謂寄生組合繼承，即通過(guò)借用構(gòu)造函數(shù)來(lái)繼承屬性，通過(guò)原型鏈的混成形式來(lái)繼承方法。 其背后的基本思路是：不必為了指定子類的原型而調(diào)用超類型的構(gòu)造函數(shù)，我們所需要的無(wú)非就是超類型原型的一個(gè)副本
復(fù)制代碼 代碼如下:
function extend(child, parent) {
var F = function(){}; //定義一個(gè)空的構(gòu)造函數(shù)
F.prototype = parent.prototype; //設(shè)置為父類的原型
child.prototype = new F(); //子類的原型設(shè)置為F的實(shí)例，形成原型鏈
child.prototype.constructor = child; //重新指定子類構(gòu)造函數(shù)指針
}
function Parent(name) {
this.name = name;
this.colors = ['red', 'yellow'];
}
Parent.prototype.sayName = function() {
alert(this.name);
}
function Child(name, age) {
Parent.call(this, name);
this.age = age;
}
extend(Child, Parent); //實(shí)現(xiàn)繼承
Child.prototype.sayAge = function() {
alert(this.age);
}
var c1 = new Child('zhangsan', 20);
var c2 = new Child('lisi', 21);
c1.colors.push('blue');
alert(c1.colors); //red,yellow,blue
c1.sayName(); //zhangsan
c1.sayAge(); //20
alert(c2.colors); //red,yellow
c2.sayName(); //lisi
c2.sayAge(); //21
相關(guān)文章
本文將涉及到scroll方法的應(yīng)用，判斷當(dāng)滾動(dòng)條滾到底部時(shí)觸發(fā)scrollTop執(zhí)行函數(shù),具體代碼如下，感興趣的朋友可以了解下哈2013-06-06
這篇文章主要介紹了深入理解redux之compose的具體應(yīng)用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
輸入框組默認(rèn)是div.input-group。接下來(lái)通過(guò)本文給大家介紹bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整，感興趣的朋友一起看看吧2016-10-10
非?？岬膉s圖形漸隱導(dǎo)航菜單欄...2007-08-08
伸縮的菜單，想必大家都有見(jiàn)到過(guò)吧，實(shí)現(xiàn)方法也是很多的，在接下來(lái)的文章中為大家介紹下使用js是如何實(shí)現(xiàn)的，需要的朋友可以參考下2013-12-12
微信小程序?qū)崿F(xiàn)手機(jī)振動(dòng)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)手機(jī)振動(dòng)效果,手機(jī)振動(dòng)應(yīng)用場(chǎng)景以 wx.vibrateLong() 方法為例結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-07-07
KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流component綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流component綁定的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
js中異步函數(shù)async function變同步函數(shù)的簡(jiǎn)單入門
這篇文章主要介紹了js中異步函數(shù)async function變同步函數(shù)的簡(jiǎn)單入門，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
微信小程序頁(yè)面滑動(dòng)屏幕加載數(shù)據(jù)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序頁(yè)面滑動(dòng)屏幕加載數(shù)據(jù)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了對(duì)JavaScript中this指針的新理解分享,本文講解了方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造函數(shù)調(diào)用模式、Apply調(diào)用模式中的this指針理解,需要的朋友可以參考下2015-01-01