欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript面向?qū)ο笾R串結(jié)(讀JavaScript高級程序設(shè)計(第三版))

 更新時間:2012年07月17日 11:08:15   作者:  
最近在看JavaScript高級程序設(shè)計(第三版),面向?qū)ο笠徽?0多頁,來來回回看了三五遍,每次看的收獲都不一樣
第一遍囫圇吞棗,不求甚解,感覺恍然大悟,結(jié)果晚上睡覺一想發(fā)現(xiàn)很多問題,什么都不明白,再看第二遍,發(fā)現(xiàn)原來是這樣。過了幾天一用,發(fā)現(xiàn)手寫起來原來還是在憑記憶,于是下一遍,下一遍...

  單憑記憶去弄清楚東西很不靠譜,時間一長腦袋空白。特別是技術(shù)上的很多思想和原理,只看不練,即便當(dāng)時想得特別清楚,過久了也會忘。再者就是網(wǎng)上一些東西,只能說是提供了一種便捷的查看途徑,事后還是自己總結(jié)為好,畢竟大多都是個人總結(jié),一些概念很難講的很清楚,而且兩個人談同一件事情,一般說的步驟和章節(jié)都是不同的,這樣很容易形成交叉記憶,越多交叉記憶越混亂。還是持懷疑的態(tài)度看東西好一點(diǎn),動手試一下就知道到底是怎么個樣子,知識串一下。高質(zhì)量有保證的書或者官方的有些東西,是不錯的來源。

  趁自己這會看得還算明白,腦袋還算清楚,記錄一下,做個備忘。概念性的東西是書上的,減少日后誤導(dǎo)。例子手寫加驗(yàn)證,再畫個圖,以便以后一看就明白。

一、封裝

對象定義:ECMA-262把對象定義為:“無序?qū)傩缘募希渲袑傩钥梢园ɑ局?、對象或者函?shù)”。

創(chuàng)建對象:每個對象都是基于一個引用類型創(chuàng)建的,這個引用類型可以是原生類型(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);
}
}
通過以上構(gòu)造函數(shù)使用new操作符可以創(chuàng)建對象實(shí)例。
var zhangsan = new Person('zhangsan', 20);
var lisi = new Person('lisi', 20);
zhangsan.sayName();//zhangsan
lisi.sayName(); //lisi

通過new創(chuàng)建對象經(jīng)歷4個步驟

1、創(chuàng)建一個新對象;[var o = new Object();]

2、將構(gòu)造函數(shù)的作用域賦給新對象(因此this指向了這個新對象);[Person.apply(o)] [Person原來的this指向的是window]

3、執(zhí)行構(gòu)造函數(shù)中的代碼(為這個新對象添加屬性);

4、返回新對象。

通過代碼還原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);
}
測試新的創(chuàng)建實(shí)例方法
var wangwu = createPerson(Person, 'wangwu', 20);
wangwu.sayName();//wangwu


2、原型模式

原型對象概念:無論什么時候,只要創(chuàng)建一個新函數(shù),就會根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個prototype屬性,這個屬性指向函數(shù)的原型對象。在默認(rèn)情況下,所有原型對象都會自動獲得一個constructor(構(gòu)造函數(shù))屬性,這個屬性包含一個指向 prototype 屬性所在函數(shù)的指針。而通過這個構(gòu)造函數(shù),可以繼續(xù)為原型對象添加其他屬性和方法。創(chuàng)建了自定義的構(gòu)造函數(shù)后,其原型對象默認(rèn)只會取得 constructor 屬性;至于其他方法,則都從 Object 繼承而來。當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個新實(shí)例后,該實(shí)例的內(nèi)部將包含一個指針(內(nèi)部屬性),指向構(gòu)造函數(shù)的原型對象。ECMA-262第5版管這個指針叫 [[Prototype]] 。腳本中沒有標(biāo)準(zhǔn)的方式訪問 [[Prototype]],但Firefox、Safari和Chrome在每個對象上都支持一個屬性__proto__;而在其他實(shí)現(xiàn)中,這個屬性對腳本是完全不可見的。不過,要明確的真正重要的一點(diǎn)就是,這個連接存在于示例和構(gòu)造函數(shù)的原型對象之間,而不是存在于實(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ù)的原型對象,主要用途是讓多個對象實(shí)例共享它所包含的屬性和方法。但這也是容易發(fā)生問題的地方,如果原型對象中包含引用類型,那么應(yīng)引用類型存的是指針,所以會造成值共享。如下:
復(fù)制代碼 代碼如下:

Person.prototype.friends = ['wangwu']; //Person添加一個數(shù)組類型
zhangsan.friends.push('zhaoliu'); //張三修改會對李四造成影響
alert(zhangsan.friends); //wangwu,zhaoliu
alert(lisi.friends); //wangwu,zhaoliu李四也多了個

3、組合使用構(gòu)造函數(shù)模式和原型模式

這種模式是使用最廣泛、認(rèn)同度最高的一種創(chuàng)建自定義類型的方式。構(gòu)造函數(shù)模式用于定義實(shí)例屬性,而原型模式用于定義方法和共享的屬性。這樣,每個實(shí)例都有自己的一份實(shí)例屬性的副本,同時有共享著對方法的引用,最大限度的節(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主要依靠原型鏈來實(shí)現(xiàn)繼承(也可以通過拷貝屬性繼承)。

原型鏈基本思想是,利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。構(gòu)造函數(shù)、原型、示例的關(guān)系是:每個構(gòu)造函數(shù)都有一個原型對象,原型對象都包含了一個指向構(gòu)造函數(shù)的指針,而實(shí)例都包含了一個指向原型的內(nèi)部指針。所以,通過過讓原型對象等于另外一個類型的實(shí)例,此時原型對象將包含一個指向另一個原型的指針,相應(yīng)地,另一個原型中也包含這一個指向另一個構(gòu)造函數(shù)的指針。假如另外一個原型又是另一個類型的實(shí)例,那么上述關(guān)系依然成立,如此層層遞進(jìn),就構(gòu)成了實(shí)例和原型的鏈條。這就是原型鏈的基本概念。

讀起來比較繞,不容易理解。直接通過實(shí)例說明驗(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

圖解:


原型鏈的問題,如果父類中包括了引用類型,通過Child.prototype = new Parent()會把父類中的引用類型帶到子類的原型中,而引用類型值的原型屬性會被所有實(shí)例共享。問題就回到了[一、2]節(jié)了。

2、組合繼承-最常用繼承方式

組合繼承(combination inheritance),是將原型鏈和借用構(gòu)造函數(shù)(apply, call)的技術(shù)組合到一塊。思路是使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承,而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承。這樣既可以在原型上定義方法實(shí)現(xiàn)了函數(shù)的復(fù)用,又能保證每個實(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(),父類的屬性會
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

組合繼承的問題是,每次都會調(diào)用兩次超類型構(gòu)造函數(shù):第一次是在創(chuàng)建子類型原型的時候,另一次是在子類型構(gòu)造函數(shù)內(nèi)部。這樣就會造成屬性的重寫 ,子類型構(gòu)造函數(shù)中包含了父類的屬性,而且子類的原型對象中也包含了父類的屬性。

3、寄生組合繼承-最完美繼承方式

所謂寄生組合繼承,即通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法。 其背后的基本思路是:不必為了指定子類的原型而調(diào)用超類型的構(gòu)造函數(shù),我們所需要的無非就是超類型原型的一個副本
復(fù)制代碼 代碼如下:

function extend(child, parent) {
var F = function(){}; //定義一個空的構(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)文章

  • ScrollDown的基本操作示例

    ScrollDown的基本操作示例

    本文將涉及到scroll方法的應(yīng)用,判斷當(dāng)滾動條滾到底部時觸發(fā)scrollTop執(zhí)行函數(shù),具體代碼如下,感興趣的朋友可以了解下哈
    2013-06-06
  • 深入理解redux之compose的具體應(yīng)用

    深入理解redux之compose的具體應(yīng)用

    這篇文章主要介紹了深入理解redux之compose的具體應(yīng)用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整

    bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整

    輸入框組默認(rèn)是div.input-group。接下來通過本文給大家介紹bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整,感興趣的朋友一起看看吧
    2016-10-10
  • 非??岬膉s圖形漸隱導(dǎo)航菜單欄

    非??岬膉s圖形漸隱導(dǎo)航菜單欄

    非??岬膉s圖形漸隱導(dǎo)航菜單欄...
    2007-08-08
  • JavaScript伸縮的菜單簡單示例

    JavaScript伸縮的菜單簡單示例

    伸縮的菜單,想必大家都有見到過吧,實(shí)現(xiàn)方法也是很多的,在接下來的文章中為大家介紹下使用js是如何實(shí)現(xiàn)的,需要的朋友可以參考下
    2013-12-12
  • 微信小程序?qū)崿F(xiàn)手機(jī)振動效果

    微信小程序?qū)崿F(xiàn)手機(jī)振動效果

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)手機(jī)振動效果,手機(jī)振動應(yī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綁定

    這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流component綁定的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-10-10
  • js中異步函數(shù)async function變同步函數(shù)的簡單入門

    js中異步函數(shù)async function變同步函數(shù)的簡單入門

    這篇文章主要介紹了js中異步函數(shù)async function變同步函數(shù)的簡單入門,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • 微信小程序頁面滑動屏幕加載數(shù)據(jù)效果

    微信小程序頁面滑動屏幕加載數(shù)據(jù)效果

    這篇文章主要為大家詳細(xì)介紹了微信小程序頁面滑動屏幕加載數(shù)據(jù)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • 對JavaScript中this指針的新理解分享

    對JavaScript中this指針的新理解分享

    這篇文章主要介紹了對JavaScript中this指針的新理解分享,本文講解了方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造函數(shù)調(diào)用模式、Apply調(diào)用模式中的this指針理解,需要的朋友可以參考下
    2015-01-01

最新評論