JS基礎(chǔ)（對象創(chuàng)建，構(gòu)造函數(shù)、原型、實例之間關(guān)系，繼承方式）

PAMPANG 發(fā)布于2019-08-26 13:30 / 3240人閱讀

摘要：對象創(chuàng)建的三種方式字面量創(chuàng)建方式系統(tǒng)內(nèi)置構(gòu)造函數(shù)方式自定義構(gòu)造函數(shù)構(gòu)造函數(shù)原型實例之間的關(guān)系實例是由構(gòu)造函數(shù)實例化創(chuàng)建的，每個函數(shù)在被創(chuàng)建的時候，都會默認(rèn)有一個對象。

JS 對象創(chuàng)建的三種方式

//字面量創(chuàng)建方式
var person= ｛　name:"jack"?。?
//系統(tǒng)內(nèi)置構(gòu)造函數(shù)方式
var person= new Object();
person.name = "jack";

//自定義構(gòu)造函數(shù)
function Person(name){
    this.name = name;
}
var person = new Person("jack");

JS 構(gòu)造函數(shù)、原型、實例之間的關(guān)系

　　實例是由構(gòu)造函數(shù)實例化創(chuàng)建的，每個函數(shù)在被創(chuàng)建的時候，都會默認(rèn)有一個prototype對象。該對象就是構(gòu)造函數(shù)的原型，并且原型對象中還有一個constructor屬性，指向的是原型所在的構(gòu)造函數(shù)。

在每一個實例對象中的__proto__中同時有一個 constructor 屬性，該屬性指向創(chuàng)建該實例的構(gòu)造函數(shù)。

構(gòu)造函數(shù)的 prototype對象默認(rèn)都有一個 constructor 屬性，指向 prototype 對象所在函數(shù)。

（圖片原址：https://www.oecom.cn/the-rela...）

值類型成員或者引用類型成員寫入（實例對象.成員 = xx）：

當(dāng)實例期望重寫原型對象中的某個普通數(shù)據(jù)成員時實際上會把該成員添加到自己身上,

也就是說該行為實際上會屏蔽掉對原型對象成員的訪問

復(fù)雜類型修改（實例對象.成員.xx = xx）：

同樣會先在自己身上找該成員，如果自己身上找到則直接修改,

如果自己身上找不到，則沿著原型鏈繼續(xù)查找，如果找到則修改,

如果一直到原型鏈的末端還沒有找到該成員，則報錯（實例對象.undefined.xx = xx）。

JS 構(gòu)造函數(shù)常用用法

function Person( name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
}

Person.prototype = {
    constructor:Person, //修正，指向正確的構(gòu)造函數(shù)
    introduce:function(){
        console.log("hello,everybody. my name is"+ this.name +"
")
    }
}

不需要共享的數(shù)據(jù)寫在構(gòu)造函數(shù)中,需要共享的數(shù)據(jù)寫在原型中。

實例對象使用的屬性或者方法,先在實例中查找,找到了則直接使用,找不到則,去實例對象的__proto__指向的原型對象prototype中找,找到了則使用,找不到則報錯。

原型鏈:是一種關(guān)系,實例對象和原型對象之間的關(guān)系,關(guān)系是通過原型(__proto__)來聯(lián)系的

JS 封裝、繼承、多態(tài)

　　面向?qū)ο蟮木幊陶Z言中有類的概念，而JS是基于對象的語言，JS中沒有類，但是JS可以模擬面向?qū)ο蟮乃枷刖幊蹋琂S通過構(gòu)造函數(shù)模擬類的概念。

封裝：一系列屬性放在對象中或者一系列實現(xiàn)某種功能的方法放在對象，就是封裝。
繼承：繼承屬于類與類之間的關(guān)系，JS通過構(gòu)造函數(shù)模擬類，通過原型來實現(xiàn)繼承，繼承的目的是為了實現(xiàn)數(shù)據(jù)共享。
多態(tài)：一個對象有不同的行為，或者同一個行為針對不同的對象，產(chǎn)生不同的結(jié)果，要想有多態(tài)，就要先有繼承，JS中可以模擬多態(tài)。

JS 繼承方式 借用構(gòu)造函數(shù)繼承：構(gòu)造函數(shù)的名字.call( 當(dāng)前對象，屬性，屬性....)

解決了屬性繼承問題，但是不能繼承父級的方法?！　?/p>

function Person(name,age){
    this.name = name;
    this.age = age;
}

function Student(name,age,score) {
    Person.call(this,name,age);
    this.score = score;
}

var Ming = new Student("小明"，"18"，"100");

組合繼承：原型繼承 + 借用構(gòu)造函數(shù)繼承　

function Person(name,age){
    this.name = name;
    this.age = age;
}

Person.prototype.introduce = function(){
    console.log("hello,everybody,my name is " + this.name);
}

function Student(name,age,score) {
    Person.call(this,name,age)；
    this.score = score;
}

Student.prototype = new Person();
var Ming = new Student("小明"，"18"，"100");

寄生組合繼承：寄生式繼承 + 借用構(gòu)造函數(shù)繼承　

function inheritObject(o){
    function F(){};
    F.prototype = o;
    return new F();
}
function inheritPrototype(subclass,superclass){
    var p = inheritObject(superclass.prototype);
    p.constructor = subclass;
    subclass.prototype = p;
}

//定義父類
function SuperClass(name){
    this.name = name;
    this.colors = [red,blue]
}
SuperClass.prototype.getName = function(){
    console.log(this.name);
}    
//定義子類
function SubClass(name,time){
    //構(gòu)造函數(shù)式繼承
    SuperClass.call(this,name);
    this.time = time;
}
//寄生式繼承父類原型
inheritPrototype(SubClass,SuperClass);
//子類新增原型方法
SubClass.prototype.getTime = function(){
    console.log(this.time);
}

模擬多繼承：　

Object.prototype.mix = function(){
    var i = 0,                //從第一個參數(shù)起為被繼承對象
        len = arguments.length,   //獲取參數(shù)長度
        arg;                  //緩存參數(shù)對象
    for(;i < len; i++){
        //緩存當(dāng)前對象
        arg = arguments[i];
        for(var property in arg){
            this[property] = arg[property];
        }
    }
}

GPU云服務(wù)器云服務(wù)器繼承構(gòu)造函數(shù) js創(chuàng)建對象方式構(gòu)造函數(shù) 繼承 js原型鏈的繼承

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108957.html

發(fā)表評論

登陸后可評論

0條評論

PAMPANG

男|高級講師

我要關(guān)注我要私信

TA的文章

前端培訓(xùn)-初級階段（5 - 8）

閱讀 2441·2019-08-30 15:56
前端學(xué)習(xí)各階段分別都在哪學(xué)？

閱讀 1099·2019-08-30 15:55
前端面試每日3+1——第115天

閱讀 3271·2019-08-30 15:44
提升網(wǎng)站頁面速度的14條最佳實踐（一）

閱讀 1007·2019-08-30 10:53
HTML與CSS中的顏色與單位個人分享

閱讀 1950·2019-08-29 16:33
CSS基礎(chǔ)

閱讀 2644·2019-08-29 16:13
20170601-BFC(塊級格式化上下文)

閱讀 776·2019-08-29 12:41
設(shè)置首字母大寫算法（JavaScript）

閱讀 943·2019-08-26 13:56

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS基礎(chǔ)（對象創(chuàng)建，構(gòu)造函數(shù)、原型、實例之間關(guān)系，繼承方式）

相關(guān)文章

JS基礎(chǔ)之?dāng)?shù)據(jù)類型、對象、原型、原型鏈、繼承

重溫JS基礎(chǔ)--繼承

js對象詳解(JavaScript對象深度剖析，深度理解js對象)

js高級程序設(shè)計-面向對象的程序設(shè)計-閱讀筆記

淺析JavaScript中原型及constructor、proto、prototype的關(guān)系

發(fā)表評論

0條評論

PAMPANG

男|高級講師

TA的文章

前端培訓(xùn)-初級階段（5 - 8）

前端學(xué)習(xí)各階段分別都在哪學(xué)？

前端面試每日3+1——第115天

提升網(wǎng)站頁面速度的14條最佳實踐（一）

HTML與CSS中的顏色與單位個人分享

CSS基礎(chǔ)

20170601-BFC(塊級格式化上下文)

設(shè)置首字母大寫算法（JavaScript）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS基礎(chǔ)（對象創(chuàng)建，構(gòu)造函數(shù)、原型、實例之間關(guān)系，繼承方式）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS基礎(chǔ)（對象創(chuàng)建，構(gòu)造函數(shù)、原型、實例之間關(guān)系，繼承方式）