資訊專欄INFORMATION COLUMN
摘要：這個(gè)通過(guò)構(gòu)造函數(shù)生成的對(duì)象，有一個(gè)屬性，它指向構(gòu)造函數(shù)的原型對(duì)象，既訪問(wèn)時(shí)，在它自身尋找該屬性，找到了，于是就返回該值。
JavaScript的面向?qū)ο笈c其他語(yǔ)言的面向?qū)ο?，其?shí)有很大的區(qū)別。
JavaScript是基于原型的面向?qū)ο笙到y(tǒng)，而傳統(tǒng)語(yǔ)言(比如java)的面向?qū)ο蠖际腔陬惖摹?/p> 構(gòu)造函數(shù)
function Person(name, age, job) {
this.age = age;
this.name = name;
this.job = job;
}
Person.prototype.sayName = function() {
console.log(this.name);
}
var cody = new Person("cody", "24", "frontend");
cody.name;
cody.sayName();
在這個(gè)常見(jiàn)的構(gòu)造函數(shù)寫(xiě)法中，我們需要知道以下幾點(diǎn)：
1.Person這個(gè)函數(shù)被定義后，會(huì)自帶一個(gè)prototype屬性，這個(gè)屬性指向一個(gè)對(duì)象，既原型對(duì)象，這個(gè)對(duì)象同時(shí)有一個(gè)constructor屬性，指向Person
Person.prototype = {
constructor: Person
}
注意的是，所有函數(shù)都有prototype屬性，并不是只有構(gòu)造函數(shù)才有。
2.cody這個(gè)通過(guò)構(gòu)造函數(shù)生成的對(duì)象，有一個(gè)__proto__屬性，它指向構(gòu)造函數(shù)Person的原型對(duì)象，既Person.prototype
訪問(wèn)cody.name時(shí)，在它自身尋找該屬性，找到了，于是就返回該值。
訪問(wèn)cody.sayName時(shí)，也是先在它自身尋找該屬性，但是無(wú)法找到，于是開(kāi)始通過(guò)原型鏈向上尋找: 尋找cody.__proto__，也就是Person.prototype原型對(duì)象，發(fā)現(xiàn)了該屬性，于是返回這個(gè)方法。
訪問(wèn)cody.toString時(shí)，在Person.prototype原型對(duì)象上也找不到，這時(shí)，繼續(xù)向上尋找，既尋找Person.prototype.__proto__也就是Object.prototype，在它上面，可以找到toString
function Animal(name) {
this.name = name;
}
Animal.prototype.sayName = function() {
console.log(this.name);
}
function Duck(name, color) {
Animal.call(this, name);
this.color = color;
}
Duck.prototype = new Animal();
// 也可以優(yōu)化成這樣，減少一次父級(jí)構(gòu)造函數(shù)調(diào)用
// Duck.prototype = Object.create(Animal.prototype);
Duck.prototype.constructor = Duck;
Duck.prototype.sayColor = function() {
console.log(this.color);
}
var duck = new Duck("duck", "yellow");
duck.sayColor();
duck.sayName();
前面我們說(shuō)過(guò)，JS是基于原型的面向?qū)ο?。所以，繼承并不一定需要使用構(gòu)造函數(shù)，我們可以基于一個(gè)已經(jīng)存在的對(duì)象，對(duì)這個(gè)對(duì)象進(jìn)行繼承。
var obj = {
name: "cody",
say: function() {
console.log(this.name)
}
};
var sub = Object.create(obj);
sub.name = "deepred";
sub.say(); // deepred
Object.create的原理是：
Object.create = Object.create || function(obj) {
var F = function() {};
F.prototype = obj;
return new F();
}
ES6的class語(yǔ)法
ES6引入了class語(yǔ)法，讓JS看起來(lái)更像是面向?qū)ο蟮恼Z(yǔ)言，但這僅僅是語(yǔ)法糖而已，背后仍然是基于原型的繼承方式。
class Animal {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name)
}
}
class Duck extends Animal {
constructor(name, color) {
super(name);
this.color = color;
}
sayColor() {
console.log(this.color);
}
sayName() {
// 調(diào)用父級(jí)同名方法
super.sayName();
console.log("duck sayname")
}
}
var duck = new Duck("duck", "red");
duck.sayColor();
duck.sayName();
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93713.html
摘要：很多情況下，通常一個(gè)人類，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類是相似對(duì)象的描述，稱為類的定義，是該類對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類的實(shí)體化形成的對(duì)象。一類的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個(gè)人類，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類是相似對(duì)象的描述，稱為類的定義，是該類對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類的實(shí)體化形成的對(duì)象。一類的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個(gè)人類，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類是相似對(duì)象的描述，稱為類的定義，是該類對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類的實(shí)體化形成的對(duì)象。一類的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：是完全的面向?qū)ο笳Z(yǔ)言，它們通過(guò)類的形式組織函數(shù)和變量，使之不能脫離對(duì)象存在。而在基于原型的面向?qū)ο蠓绞街?，?duì)象則是依靠構(gòu)造器利用原型構(gòu)造出來(lái)的。 JavaScript 函數(shù)式腳本語(yǔ)言特性以及其看似隨意的編寫(xiě)風(fēng)格，導(dǎo)致長(zhǎng)期以來(lái)人們對(duì)這一門語(yǔ)言的誤解，即認(rèn)為 JavaScript 不是一門面向?qū)ο蟮恼Z(yǔ)言，或者只是部分具備一些面向?qū)ο蟮奶卣?。本文將回歸面向?qū)ο蟊疽?，從?duì)語(yǔ)言感悟的角度闡述為什...
摘要：用代碼可以這樣描述安全到達(dá)國(guó)外面向過(guò)程既然說(shuō)了面向?qū)ο?，那么與之對(duì)應(yīng)的就是面向過(guò)程。小結(jié)在這篇文章中，介紹了什么是面向?qū)ο蠛兔嫦蜻^(guò)程，以及中對(duì)象的含義。 這是 javascript 面向?qū)ο蟀鎵K的第一篇文章，主要講解對(duì)面向?qū)ο笏枷氲囊粋€(gè)理解。先說(shuō)說(shuō)什么是對(duì)象，其實(shí)這個(gè)還真的不好說(shuō)。我們可以把自己當(dāng)成一個(gè)對(duì)象，或者過(guò)年的時(shí)候相親，找對(duì)象，那么你未來(lái)的老婆也是一個(gè)對(duì)象。我們就要一些屬性，比...
摘要：之前，本質(zhì)上不能算是一門面向?qū)ο蟮木幊陶Z(yǔ)言，因?yàn)樗鼘?duì)于封裝繼承多態(tài)這些面向?qū)ο笳Z(yǔ)言的特點(diǎn)并沒(méi)有在語(yǔ)言層面上提供原生的支持。所以在中出現(xiàn)了等關(guān)鍵字，解決了面向?qū)ο笾谐霈F(xiàn)了問(wèn)題。 ES6之前，javascript本質(zhì)上不能算是一門面向?qū)ο蟮木幊陶Z(yǔ)言，因?yàn)樗鼘?duì)于封裝、繼承、多態(tài)這些面向?qū)ο笳Z(yǔ)言的特點(diǎn)并沒(méi)有在語(yǔ)言層面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以讓我們以...
閱讀 1844·2021-10-13 09:39
閱讀 1396·2019-08-30 13:58
閱讀 1492·2019-08-29 16:42
閱讀 3626·2019-08-29 15:41
閱讀 3049·2019-08-29 15:11
閱讀 2668·2019-08-29 14:10
閱讀 3498·2019-08-29 13:29
閱讀 2155·2019-08-26 13:27
