資訊專欄INFORMATION COLUMN
摘要：中的和是一門很靈活的語言，尤其是。即然是面向?qū)ο蟮木幊陶Z言，那也是不可或缺的。在中，永遠(yuǎn)指向的是他的調(diào)用者。定義是存在于實(shí)例化后對象的一個屬性，并且指向原對象的屬性。我們在擴(kuò)展的時候，同時父類也會有對應(yīng)的方法，這很顯然是一個很嚴(yán)重的問題。
javascript中的this和new
javascript是一門很靈活的語言，尤其是function。他即可以以面向過程的方式來用，比如：
function getName() {
return "張三"
}
getName()
也可以以面向?qū)ο蟮姆绞絹碛?，比如?/p>
function User() {
this.name = "張三"
}
var user = new User()
javascript是如何實(shí)現(xiàn)面向?qū)ο缶幊痰哪兀克峁┝?b>new這個關(guān)健字，有了new就可以把對象進(jìn)行實(shí)例化，比如：
function User(name, age){
this.name = name
this.age = age
}
var zs = new User("zs", 20)
var ls = new User("ls", 30)
new出來的兩個實(shí)例，會開辟兩塊新的內(nèi)存區(qū)域，來保存這些數(shù)據(jù)，同時有指針指向?qū)ο?b>User。所以就有instanceof這個運(yùn)算符，這個運(yùn)算符的意思就是：a是不是A的實(shí)例。比如上例：zs instanceof User的返回值是true。
即然是面向?qū)ο蟮木幊陶Z言，那this也是不可或缺的。在javascript中，this永遠(yuǎn)指向的是他的調(diào)用者。要理解這句話，我們舉幾個例子：
例子1
function test(){
this.name = "zs"
}
test()
當(dāng)執(zhí)行完成之后，這個name會直接掛載到window下面，因?yàn)槭沁@樣執(zhí)行的：winow.test()。
例子2
var game = document.getElementById("game")
game.addEventListener("click", function () {
setTimeout(function () {
this.innerText = "Clicked"
}, 1000)
})
這個例子很簡單，點(diǎn)擊某個元素的時候，1秒后，讓他里面的html改成Clicked，可是你發(fā)現(xiàn)這樣不好使，就是因?yàn)?b>this指向的問題，因?yàn)檫@里面的this也指向window了，所以你執(zhí)行window.innerText會返回Clicked。
例子3
function User(name) {
this.name = name
this.getName = function () {
console.log(this.name)
}
}
var u = new User("zs")
u.getName()
這里面的this的指向沒有問題，因?yàn)榘凑罩暗脑瓌t，調(diào)用者是u，也就是User的實(shí)例，所以在方法getName中，this.name相當(dāng)于u.name，所以打印出zs。
prototype和__proto__prototype
javascript是面向?qū)ο蟮恼Z言，這個上面已經(jīng)提過了，其他面向?qū)ο笳Z言有一個必備我就是繼承，很顯然在ES6之前，沒有extends這個關(guān)鍵字，那么，javascript就是利用prototype的原型鏈來實(shí)現(xiàn)繼承。先記住這句話，我們一會會說到繼承。prototype其實(shí)只是對象的一個屬性，在Chrome控制臺下，可以直接看出來，但是這個屬性很特殊，這個屬性下可以掛載任何的對象、方法、屬性，而且掛載的東西可以反映到實(shí)例下對象上。說的比較繞，我們看個例子：
function User(name) {
this.name = name
}
User.prototype.getName = function () {
console.log(this.name)
}
var u = new User("zs")
u.getName()
我們在User.prototype上面掛載了getName的方法，在下面實(shí)例化User之后的u，就可以訪問這個方法。
看到這，你可以有個疑問，既然是給實(shí)例化對象用的，那下面這種方式豈不是更好、更直觀？
function User(name) {
this.name = name
this.getName = function () {
console.log(this.name)
}
}
var u = new User("zs")
u.getName()
如果我們和Java語言進(jìn)行對應(yīng)，User相當(dāng)是Class，name相當(dāng)于屬性，getName相當(dāng)于里面的方法，完美映射！可以這樣有一個問題啊，就是太費(fèi)內(nèi)存了。因?yàn)槊?b>new一個對象，都會占用一塊內(nèi)存區(qū)域，這樣User里面方法屬性越多，那么每個實(shí)例化的對象都會對這些進(jìn)行 深復(fù)制，那么占用的內(nèi)存空間就越大。那么javascript是如何通過prototype來解決內(nèi)存占用的問題的呢？這就需要引用__proto__。
__proto__
定義：__proto__是存在于實(shí)例化后對象的一個屬性，并且指向原對象的prototype屬性。
比如上例中的u.__proto__ === User.prototype返回的是true?？梢栽?b>Chrome控制臺下查看u.__proto__。
你會發(fā)現(xiàn)，不對吧，User對象下也有__proto__啊。那是因?yàn)?b>User也是Function的實(shí)例，不信你可以試一下User.__proto__ === Function.prototype的返回值。其實(shí)我們這樣定義函數(shù)：function test(){}是一個語法糖的寫法，全拼應(yīng)該是這樣：var test = new Function("alert(1)")。
現(xiàn)在我們來解釋為什么使用prototype能節(jié)省內(nèi)存。不知道你有沒有注意到上面一句代碼u.__proto__ === User.prototype，我為什么要使用三等？因?yàn)槿忍柍酥?、類型外，?nèi)存地址也必須是相等的，也就是說User不管實(shí)例化多少對象，他們的prototype只有一份，放在User里?？蛻舳说臑g覽器環(huán)境不像服務(wù)器，內(nèi)存還是比較緊張的，所以javascript通過這種方式，來解決內(nèi)存占用問題。
繼承方式一：直接繼承
先舉個例子：
var Animal = function (name) {
this.name = name
}
Animal.prototype.walk = function () {
console.log("I can walk!")
}
Animal.prototype.getName = function () {
console.log("My name is " + this.name + "!")
}
var Dog = function (name) {
this.name = name
}
Dog.prototype = Animal.prototype
var d = new Dog("Tom")
d.getName()
d.walk()
我們建立一個父類Animal對象，建立一個子類Dog，我們想讓Dog也有walk方法和getName方法，通過上面對prototype的了解，我們最先想到的是Dog.prototype = Animal.prototype，這樣子類和父類的prototype相等，那子類就有父類所有方法嘍，繼承鏈條是這樣的：d.__proto__ === Dog.prototype === Animal.prototype。
這樣很直觀，但是也有一個比較嚴(yán)重的問題。我們在擴(kuò)展Dog的時候，同時父類也會有對應(yīng)的方法，這很顯然是一個很嚴(yán)重的問題。
方式二：實(shí)例化繼承
為了解決上面的問題，我們需要引入一個空函數(shù)，這個空函數(shù)做為橋梁，把子類和父類之間的連接切斷。實(shí)現(xiàn)如下：
var F = function () {}
F.prototype = Animal.prototype
Dog.prototype = new F()
Dog.prototype.say = function () {
console.log("Say")
}
為什么是Dog.prototype = new F()呢？因?yàn)檫@樣即可以繼承Animal的所有方法，他的原型鏈?zhǔn)沁@樣的：
d.__proto__ --> Dog.prototype --> new F().__proto__
執(zhí)行walk方法，F(xiàn)已經(jīng)有了，所以就不會再找Animal了
新增加的方法又不影響父類，這句怎么講？因?qū)嵗膶ο鬀]有prototype屬性！所以不會影響
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84429.html
摘要：不必在構(gòu)造函數(shù)中定義對象實(shí)例的信息。其次，按照一切事物皆對象的這餓極本的面向?qū)ο蟮姆▌t來說，類本身并不是一個對象，然而原型方式的構(gòu)造函數(shù)和原型本身也是個對象。第二個問題就是在創(chuàng)建子類型的實(shí)例時，不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。 前言 對象(Object)應(yīng)該算是js中最為重要的部分，也是js中非常難懂晦澀的一部分。更是面試以及框架設(shè)計(jì)中各出沒。寫這篇文章，主要參考與JavaScrip...
摘要：引言對于面向?qū)ο?，相信大家一定不陌生。?chuàng)建對象面向?qū)ο蟮谝徊绞鞘裁创饎?chuàng)建對象。構(gòu)造函數(shù)優(yōu)于工廠模式也是在于它可以通過辨識出一類的對象。 引言 對于面向?qū)ο?，相信大家一定不陌生。最近看了一些關(guān)于es6面向?qū)ο蟮闹R，正好通過這篇文章把關(guān)于面向?qū)ο蟮臇|西給串起來分享給大家。 什么是對象 很多人會鄙視我，說你這篇文章是騙騙剛?cè)胄械男∨笥训陌?，什么是對象我還能不知道？罵我的吃瓜群眾先冷靜一下，...
摘要：會造成內(nèi)存浪費(fèi)的問題構(gòu)造函數(shù)繼承聲明父類聲明子類生成實(shí)例組合式繼承組合式繼承是汲取了兩者的優(yōu)點(diǎn)，既避免了內(nèi)存浪費(fèi)，又使得每個實(shí)例化的子類互不影響。 寫在前面 既然是淺談，就不會從原理上深度分析，只是幫助我們更好地理解... 面向?qū)ο笈c面向過程 面向?qū)ο蠛兔嫦蜻^程是兩種不同的編程思想，剛開始接觸編程的時候，我們大都是從面向過程起步的，畢竟像我一樣，大家接觸的第一門計(jì)算機(jī)語言大概率都是C語...
摘要：面向?qū)ο竺嫦驅(qū)ο缶幊痰娜Q是，簡稱，面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實(shí)世界模型的一種編程模式。面向?qū)ο缶幊痰娜齻€主要特征是封裝繼承多態(tài)。 面向?qū)ο?面向?qū)ο缶幊痰娜Q是Object Oriented Programming，簡稱OOP，面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實(shí)世界模型的一種編程模式。面向?qū)ο缶幊炭梢钥醋鍪鞘褂靡幌盗袑ο笙嗷f(xié)作的軟件設(shè)計(jì)，面向?qū)ο蟪绦蛟O(shè)計(jì)的目的是在編程中促...
摘要：如果沒有學(xué)習(xí)過計(jì)算機(jī)科學(xué)的程序員，當(dāng)我們在處理一些問題時，比較熟悉的數(shù)據(jù)結(jié)構(gòu)就是數(shù)組，數(shù)組無疑是一個很好的選擇。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常見 CSS 布局方式詳見： 一些常見的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、雙飛翼布局等。http://cherryb...
閱讀 2245·2021-11-17 09:33
閱讀 2786·2021-11-12 10:36
閱讀 3410·2021-09-27 13:47
閱讀 901·2021-09-22 15:10
閱讀 3499·2021-09-09 11:51
閱讀 1405·2021-08-25 09:38
閱讀 2765·2019-08-30 15:55
閱讀 2619·2019-08-30 15:53
