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

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的寫(xiě)法，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的寫(xiě)法，想要實(shí)現(xiàn)一個(gè)類的寫(xiě)法是這樣的：

    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)文章

最新評(píng)論