成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于javaScript面向?qū)ο髮?xiě)法以及new操作符

endless_road / 1501人閱讀

摘要：屬性屬性當(dāng)我們通過(guò)關(guān)鍵字構(gòu)造函數(shù)實(shí)例化創(chuàng)建一個(gè)對(duì)象時(shí)，這個(gè)對(duì)象里面含有屬性，屬性指向構(gòu)造函數(shù)屬性以及屬性下面的對(duì)象。

眾所周知，JavaScript是一門(mén)面向?qū)ο蟮牟僮髡Z(yǔ)言，而我們想要用JavaScript對(duì)象化寫(xiě)法的時(shí)候，不得不提出一個(gè)操作符，叫做new操作符，那么不用new操作符和用new操作符有什么區(qū)別呢？

1.用new和不用new的區(qū)別

首先，我們?nèi)タ聪耼ew在JavaScript里面的用法，按照javascript語(yǔ)言精粹中所說(shuō)，如果在一個(gè)函數(shù)前面帶上new來(lái)調(diào)用該函數(shù)，那么將創(chuàng)建一個(gè)隱藏連接到該函數(shù)的prototype成員的新對(duì)象，同時(shí)this將被綁定到那個(gè)新對(duì)象上。這句話說(shuō)得很抽象，我們根據(jù)代碼來(lái)理解。

function foo(){
                this.name = "John";
                this.age = 23; 
                var born = 1993;
                return this.age;
            }
//沒(méi)用new關(guān)鍵字
var foo2 = foo();
console.log(foo2);//23
//用new關(guān)鍵字
var foo3 = new foo();
console.log(foo3);//foo {name: "John", age: 23}

通過(guò)上面的代碼可以明顯看出區(qū)別，當(dāng)我們不用new關(guān)鍵字的時(shí)候我們只是把foo函數(shù)運(yùn)行了一遍，如果有返回值就就獲得這個(gè)返回值，沒(méi)有返回值就輸出underfind，只是簡(jiǎn)單的函數(shù)運(yùn)行一遍而已。
但是當(dāng)我們用new關(guān)鍵字的時(shí)候，我們就可以看到不同了，new關(guān)鍵字是生成一個(gè)對(duì)象，并且生成的對(duì)象里面的屬性是foo函數(shù)公有屬性（即只有用this關(guān)鍵字定義的變量），而忽略掉私有變量（即用var定義的變量）和函數(shù)返回值，這樣上面關(guān)于new關(guān)鍵字的解釋就好理解了，即通過(guò)new操作符創(chuàng)建一個(gè)連接到foo函數(shù)的對(duì)象，對(duì)象里包含foo函數(shù)里面所有屬性和方法。這就是new關(guān)鍵字的作用，并且this是指向我們當(dāng)前的對(duì)象foo3.

2.JavaScript面向?qū)ο罄锩娴娜齻€(gè)關(guān)鍵屬性 2.1 prototype(原型)對(duì)象

js語(yǔ)言沒(méi)有類這個(gè)概念，所以提出用原型來(lái)代替類來(lái)實(shí)現(xiàn)js面向?qū)ο髮?xiě)法。js規(guī)定每個(gè)函數(shù)都具有prototype對(duì)象，并且prototype對(duì)象在函數(shù)外部是可以訪問(wèn)的，可以通過(guò)"prototype.xxx"來(lái)為當(dāng)前函數(shù)增加屬性和方法，所以prototype屬性可以理解為當(dāng)我們想為這個(gè)函數(shù)添加屬性或者方法時(shí)我們可以在prototype屬性下面添加，而不需要去改變構(gòu)造函數(shù)的代碼。

function foo(){
            this.name = "John";
            this.age = 23; 
            var born = 1993;
            return this.age;
        }
foo.prototype.ccc = function(){
    console.log(this.name);
}
console.log(foo.prototype);//Object {}

chrome的運(yùn)行結(jié)果如下圖：

可以看到foo函數(shù)里的prototype是可以訪問(wèn)的，并且我們所添加的函數(shù)是在prototype對(duì)象里的。這樣，我們就可以通過(guò)prototype屬性向?qū)ο筇砑訉傩院头椒ā?/p> 2.2constructor（構(gòu)造器）屬性

在上面的我們看到chrome瀏覽器運(yùn)行結(jié)果的圖中，我們打印foo函數(shù)prototype對(duì)象可以發(fā)現(xiàn)里面包含有constructor屬性，所以constructor屬性的是prototype對(duì)象下的一個(gè)屬性，即：

function foo(){
            this.name = "John";
            this.age = 23; 
            var born = 1993;
            return this.age;
    }
console.log(foo.prototype.constructor == foo);//true

可以看到原型對(duì)象下的constructor事指向當(dāng)前構(gòu)造函數(shù)的，函數(shù)在創(chuàng)建時(shí)就會(huì)自動(dòng)生成constructor屬性來(lái)指向當(dāng)前對(duì)象，實(shí)例化對(duì)象時(shí)constructor屬性也會(huì)一并繼承到新的對(duì)象下面。

2.3__proto__屬性

__proto__屬性當(dāng)我們通過(guò)new關(guān)鍵字構(gòu)造函數(shù)實(shí)例化創(chuàng)建一個(gè)對(duì)象時(shí)，這個(gè)對(duì)象里面含有__proto__屬性，__proto__屬性指向構(gòu)造函數(shù)prototype屬性以及prototype屬性下面的對(duì)象。即：

function foo(){
                this.name = "John";
                this.age = 23; 
                var born = 1993;
                return this.age;
            }
    foo.prototype.ccc = function(){
        console.log(this.name);
    }
    
    var foo2 = new foo();
    console.log(foo2.__proto__ == foo.prototype)//true
    console.log(foo2.__proto__)//Object {ccc:function(),constructor: foo()}

console.log(foo2.__proto__)在chrome里的運(yùn)行結(jié)果如下圖：

可以看到__proto__對(duì)象是等于foo.prototype對(duì)象的，并且foo.prototype對(duì)象下面的方法和屬性都已經(jīng)在實(shí)例化對(duì)象foo2下的__proto__下面了。

3.js的原型鏈

js沒(méi)有其他面向?qū)ο缶幊陶Z(yǔ)言的多態(tài)的概念，所以如何實(shí)現(xiàn)多態(tài)的概念。這時(shí)，js提出了原型鏈的概念，通過(guò)原型鏈來(lái)實(shí)現(xiàn)擴(kuò)展方法以及屬性的功能?？慈缦麓a

 function foo(){
                this.name = "John";
                this.age = 23; 
                var born = 1993;
                return this.age;
            }
foo.prototype.ccc = function(){
    console.log(this.name);
}

var foo2 = new foo();
foo2.ccc();//John
var foo3 = new foo();
foo3.ccc();//John
//修改foo3對(duì)象下面ccc方法
foo3.ccc = function(){
    console.log(this.age);
}

foo3.ccc();//23

從上面代碼實(shí)例化對(duì)象時(shí)新的對(duì)象不僅克隆了構(gòu)造的函數(shù)屬性和方法，也克隆了構(gòu)造函數(shù)原型下的屬性以及方法，在foo3對(duì)象中，當(dāng)我們沒(méi)有修改ccc方法時(shí)，函數(shù)會(huì)在當(dāng)前對(duì)像下查找，沒(méi)查找到就會(huì)去原型對(duì)象里查找該方法，在原型對(duì)象里找到了ccc方法，打印出this.name為“John”,當(dāng)我們重寫(xiě)了ccc方法時(shí)，ccc方法就已經(jīng)foo3當(dāng)前對(duì)象下面了，所以在當(dāng)前對(duì)象下面找到了ccc方法，運(yùn)行ccc方法，并且停止查到，不會(huì)再繼續(xù)向下查，所以js原型鏈會(huì)遵循就近查找原則，如果查找不到當(dāng)前方法會(huì)到原型下去查找，查找不到再去原型下面的原型去查找，直到查找到所有原型為止。
我們答應(yīng)下foo3對(duì)象，console.log(foo3),在chrome運(yùn)行結(jié)果如下圖：

可以看出foo3對(duì)象下面擁有一個(gè)ccc方法，并且在原型對(duì)象下面也擁有一個(gè)ccc方法，遵循就近查找原則，會(huì)找到foo3對(duì)象下面的ccc方法，而不會(huì)去查到原型對(duì)象里的ccc方法。所以通過(guò)js的原型鏈可以修改對(duì)象的屬性和方法。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79931.html

相關(guān)文章

  • javascript面向對(duì)象的常見(jiàn)寫(xiě)法與優(yōu)缺點(diǎn)

    摘要：我們通過(guò)表單驗(yàn)證的功能，來(lái)逐步演進(jìn)面向?qū)ο蟮姆绞綄?duì)于剛剛接觸的朋友來(lái)說(shuō)，如果要寫(xiě)一個(gè)驗(yàn)證用戶名，密碼，郵箱的功能，一般可能會(huì)這么寫(xiě)表單驗(yàn)證全局全局全局這種寫(xiě)法，從功能上來(lái)說(shuō)沒(méi)有什么問(wèn)題，但是在團(tuán)隊(duì)協(xié)作的時(shí)候，會(huì)造成覆蓋全局變量的問(wèn)題，那要大 我們通過(guò)表單驗(yàn)證的功能，來(lái)逐步演進(jìn)面向?qū)ο蟮姆绞? 對(duì)于剛剛接觸javascript的朋友來(lái)說(shuō)，如果要寫(xiě)一個(gè)驗(yàn)證用戶名，密碼，郵箱的功能， 一...

    Ajian 評(píng)論0 收藏0

  • Javascript面向對(duì)象從入門(mén)到重新入門(mén)--關(guān)于繼承

    摘要：這個(gè)構(gòu)造函數(shù)的不管從調(diào)用方式還是內(nèi)部寫(xiě)法就都很有的感覺(jué)，但是從用途上來(lái)說(shuō)，它其實(shí)更靠近的概念是中的工廠方法。到這里，所有關(guān)于繼承的東西講完了，接下來(lái)準(zhǔn)備準(zhǔn)備說(shuō)說(shuō)當(dāng)中的封裝 所謂的對(duì)象，就是抽象化的數(shù)據(jù)本身 一個(gè)面向?qū)ο筠D(zhuǎn)向面向原型的困惑 我發(fā)現(xiàn)Javascript這門(mén)語(yǔ)言每次翻開(kāi)都會(huì)帶給人新感受，尤其是看完其他語(yǔ)言的面向?qū)ο笤賮?lái)看它，但是如果你也是過(guò)來(lái)人就一定記得教科書(shū)里面冗長(zhǎng)乏味的...

    3fuyu 評(píng)論0 收藏0

  • 從一個(gè)組件的實(shí)現(xiàn)來(lái)深刻理解 JS 中的繼承

    摘要：回到最開(kāi)始的組件問(wèn)題那么，說(shuō)了這么多面向?qū)ο螅F(xiàn)在回到最開(kāi)始的那個(gè)組件的實(shí)現(xiàn)如何用面向?qū)ο髞?lái)實(shí)現(xiàn)。總結(jié)從一個(gè)組件出發(fā)，一步一步爬坑，又跑去介紹中的面向?qū)ο螅绻隳芸吹阶詈?，那么你就可?dòng)手一步一步實(shí)現(xiàn)一個(gè)了，純調(diào)侃。 其實(shí)，無(wú)論是寫(xiě)什么語(yǔ)言的程序員，最終的目的，都是把產(chǎn)品或代碼封裝到一起，提供接口，讓使用者很舒適的實(shí)現(xiàn)功能。所以對(duì)于我來(lái)說(shuō)，往往頭疼的不是寫(xiě)代碼，而是寫(xiě)注釋和文檔！如果接...

    Lin_R 評(píng)論0 收藏0

  • 淺談JavaScript面向對(duì)象

    摘要：不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息。其次，按照一切事物皆對(duì)象的這餓極本的面向?qū)ο蟮姆▌t來(lái)說(shuō)，類本身并不是一個(gè)對(duì)象，然而原型方式的構(gòu)造函數(shù)和原型本身也是個(gè)對(duì)象。第二個(gè)問(wèn)題就是在創(chuàng)建子類型的實(shí)例時(shí)，不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。 前言 對(duì)象(Object)應(yīng)該算是js中最為重要的部分，也是js中非常難懂晦澀的一部分。更是面試以及框架設(shè)計(jì)中各出沒(méi)。寫(xiě)這篇文章，主要參考與JavaScrip...

    cyixlq 評(píng)論0 收藏0

  • JS前端面試總結(jié)

    摘要：春招季如何橫掃面試核心考點(diǎn)基礎(chǔ)版前端面試之路二基礎(chǔ)整理的繼承和的繼承有什么區(qū)別的繼承時(shí)通過(guò)或構(gòu)造函數(shù)機(jī)制來(lái)實(shí)現(xiàn)。作用創(chuàng)建私有變量，減少全局變量，防止變量名污染。異步瀏覽器訪問(wèn)服務(wù)器請(qǐng)求，用戶正常操作，瀏覽器后端進(jìn)行請(qǐng)求。 春招季如何橫掃 Javascript 面試核心考點(diǎn)(基礎(chǔ)版)？前端面試之路二(javaScript基礎(chǔ)整理) ES5的繼承和ES6的繼承有什么區(qū)別 ES5的繼承時(shí)通過(guò)...

    ThinkSNS 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<