javascript中的類,繼承,構(gòu)造函數(shù)詳解
更新時(shí)間：2022年02月28日 11:35:09 作者：霜葉w
這篇文章主要為大家詳細(xì)介紹了javascript中的類,繼承,構(gòu)造函數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
前言
在es5中實(shí)現(xiàn)一個(gè)構(gòu)造函數(shù)，并用new調(diào)用，即可得到一個(gè)類的實(shí)例。到了es6發(fā)布了Class的寫法，js的面向?qū)ο笞兂梢沧兊帽容^規(guī)范了。聊到類就不能不說(shuō)類的構(gòu)造函數(shù)以及類如何繼承
一、Class類
定義一個(gè)類：
class A {
constructor(name){
this.name = name
}
getName(){
return this.name
}
}
var newA = new A("A")
console.log(newA.getName()) // A
二、es5構(gòu)造函數(shù)
在es5中沒(méi)有Class的寫法，想要實(shí)現(xiàn)一個(gè)類的寫法是這樣的：
class A {
constructor(name){
this.name = name
}
getName(){
return this.name
}
}
var newA = new A("A")
console.log(newA.getName()) // A
三、實(shí)例、類的關(guān)系
實(shí)例的原型指向類的原型
console.log(newA.__proto__ === A.prototype) // true
關(guān)于這個(gè)可以了解一下實(shí)例化的過(guò)程究竟發(fā)生了什么，查看MDN的連接：new操作符
- 創(chuàng)建一個(gè)空的簡(jiǎn)單JavaScript對(duì)象（即{}）；
- 為步驟1新創(chuàng)建的對(duì)象添加屬性__proto__，將該屬性鏈接至構(gòu)造函數(shù)的原型對(duì)象 ；
- 將步驟1新創(chuàng)建的對(duì)象作為this的上下文 ；
- 如果該函數(shù)沒(méi)有返回對(duì)象，則返回this。
Constructor
console.log(A.prototype.constructor) // Class A
所有的對(duì)象都會(huì)從原型上繼承一個(gè)constructor屬性，是對(duì)函數(shù)本身的引用，也就是說(shuō)指向函數(shù)本身。
這里實(shí)例newA的原型與A的原型相等，兩者的原型的constuctor又都指向A本身。
需要注意的是constrctor是可以被修改的：參照MDN官方實(shí)例：constructor
function Type() { };
var types = [
new Array,
[],
new Boolean,
true, // remains unchanged
new Date,
new Error,
new Function,
function(){},
Math,
new Number,
1, // remains unchanged
new Object,
{},
new RegExp,
/(?:)/,
new String,
"test" // remains unchanged
];
for(var i = 0; i < types.length; i++) {
types[i].constructor = Type;
types[i] = [ types[i].constructor, types[i] instanceof Type, types[i].toString() ];
};
console.log( types.join("\n") );
只有，true、1、“test”這種只讀的原生結(jié)構(gòu)不可被修改constuctor
四、繼承
es6繼承
class Father{
constructor(name){
this.name = name
}
}
class Son extends Father{
constructor(name,sname){
super(name)
this.sname = sname
}
getSon(){
return this
}
}
var newSon = new Son("f","s")
console.log(newSon.getSon()) // Son {name: 'f', sname: 's'}
es5繼承的實(shí)現(xiàn)
// 寄生組合繼承
function Sub(name){
// 優(yōu)先執(zhí)行this綁定，以免覆蓋子類的構(gòu)造的值
// 這里還有一個(gè)作用是拷貝了父類屬性，避免所有子類共享引用屬性?。。?！
Person.call(this)
this.name = name || 's'
}
// 復(fù)制一份父類的原型，避免修改原型影響其他實(shí)例
var fn = function(){}
fn.prototype = Person.prototype
Sub.prototype = new fn()
var sub = new Sub('sub')
sub.showName()
// user extend.html:19
// my name is sub extend.html:21
關(guān)于繼承詳細(xì)的可以參考這篇：前端必知必會(huì)ES5、ES6的7種繼承
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
收集不同瀏覽器的怪癖，對(duì)于大家以后的開(kāi)發(fā)與兼容性問(wèn)題，有所幫助。2010-07-07
uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
escape()、encodeURI()、encodeURIComponent()三種方法都能對(duì)一些影響URL完整性的特殊字符進(jìn)行過(guò)濾。2010-11-11
JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法,涉及javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)創(chuàng)建及設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
點(diǎn)擊按鈕清空頁(yè)面上所有的文本框、文本域，下面有個(gè)不錯(cuò)的示例，大家可以參考下其具體實(shí)現(xiàn)2014-02-02
微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法
這篇文章主要介紹了小程序自定義modal彈窗封裝實(shí)現(xiàn)方法，本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-06-06
JS自帶一套內(nèi)存管理引擎,負(fù)責(zé)創(chuàng)建對(duì)象、銷毀對(duì)象,以及垃圾回收,下面這篇文章主要給大家介紹了關(guān)于JavaScript垃圾回收機(jī)制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
JavaScript錯(cuò)誤處理超完整實(shí)用指南
在JavaScript中進(jìn)行錯(cuò)誤處理,最常見(jiàn)的方式就是使用try catch語(yǔ)句,下面這篇文章主要給大家介紹了關(guān)于JavaScript錯(cuò)誤處理的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
在大型前端項(xiàng)目中,模塊路徑往往很長(zhǎng)且復(fù)雜,使用相對(duì)路徑不僅降低了代碼可讀性,還增加了維護(hù)成本,Webpack提供了配置別名路徑的功能,可以通過(guò)為常用目錄定義簡(jiǎn)短的別名,簡(jiǎn)化模塊導(dǎo)入路徑,本文將詳細(xì)介紹如何在Webpack中配置別名路徑,需要的朋友可以參考下2025-03-03
MVC模式可謂無(wú)人不知，它除了能增強(qiáng)團(tuán)隊(duì)協(xié)作的效率，還可方便產(chǎn)品的維護(hù)升級(jí)，本文我們將對(duì)Express框架的模板和視圖（V）相關(guān)功能進(jìn)行介紹。2011-07-07