JS基礎（對象創建，構造函數、原型、實例之間關系，繼承方式）

PAMPANG 發布于2019-08-26 13:30 / 3176人閱讀

摘要：對象創建的三種方式字面量創建方式系統內置構造函數方式自定義構造函數構造函數原型實例之間的關系實例是由構造函數實例化創建的，每個函數在被創建的時候，都會默認有一個對象。

JS 對象創建的三種方式

//字面量創建方式
var person= ｛　name:"jack"　｝

//系統內置構造函數方式
var person= new Object();
person.name = "jack";

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

JS 構造函數、原型、實例之間的關系

　　實例是由構造函數實例化創建的，每個函數在被創建的時候，都會默認有一個prototype對象。該對象就是構造函數的原型，并且原型對象中還有一個constructor屬性，指向的是原型所在的構造函數。

在每一個實例對象中的__proto__中同時有一個 constructor 屬性，該屬性指向創建該實例的構造函數。

構造函數的 prototype對象默認都有一個 constructor 屬性，指向 prototype 對象所在函數。

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

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

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

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

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

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

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

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

JS 構造函數常用用法

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

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

不需要共享的數據寫在構造函數中,需要共享的數據寫在原型中。

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

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

JS 封裝、繼承、多態

　　面向對象的編程語言中有類的概念，而JS是基于對象的語言，JS中沒有類，但是JS可以模擬面向對象的思想編程，JS通過構造函數模擬類的概念。

封裝：一系列屬性放在對象中或者一系列實現某種功能的方法放在對象，就是封裝。
繼承：繼承屬于類與類之間的關系，JS通過構造函數模擬類，通過原型來實現繼承，繼承的目的是為了實現數據共享。
多態：一個對象有不同的行為，或者同一個行為針對不同的對象，產生不同的結果，要想有多態，就要先有繼承，JS中可以模擬多態。

JS 繼承方式 借用構造函數繼承：構造函數的名字.call( 當前對象，屬性，屬性....)

解決了屬性繼承問題，但是不能繼承父級的方法。　　

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");

組合繼承：原型繼承 + 借用構造函數繼承　

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");

寄生組合繼承：寄生式繼承 + 借用構造函數繼承　

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){
    //構造函數式繼承
    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,                //從第一個參數起為被繼承對象
        len = arguments.length,   //獲取參數長度
        arg;                  //緩存參數對象
    for(;i < len; i++){
        //緩存當前對象
        arg = arguments[i];
        for(var property in arg){
            this[property] = arg[property];
        }
    }
}

云服務器 GPU云服務器繼承構造函數 js創建對象方式構造函數繼承 js原型鏈的繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108957.html

JS基礎之數據類型、對象、原型、原型鏈、繼承

摘要：就是通過調用構造函數而創建的那個對象實例的原型對象。構造函數模式可以創建自定義引用類型，可以像創建內置對象實例一樣使用操作符。數據類型：簡單數據類型：Undefined、Null、String、Number、Boolean、Symbol 復雜數據類型：Object // Undefined：聲明，但未初始化 // Null：空對象指針 typeof操作符（檢測基本數據類型）: ...

LucasTwilight 2019-08-26 11:53 評論0 收藏0
重溫JS基礎--繼承

摘要：繼承了如上，我們通過方法借調了超類的構造函數，實際上是在新創建的實力環境下調用了構造函數。組合繼承組合繼承的基本思想將原型鏈和借用構造函數的技術組合到一塊，從而發揮二者之長的一種繼承模式。繼承方法在上面這個例子中，構造函數定義了兩個屬性和。在ECMAScript中只支持實現繼承，而且實現繼承主要是依靠原型鏈來實現的。 1. 什么是原型鏈繼承基本思想：利用原型讓一個引用類型繼承另一個...

sixleaves 2019-08-21 17:21 評論0 收藏0
js對象詳解(JavaScript對象深度剖析，深度理解js對象)

摘要：對象詳解對象深度剖析，深度理解對象這算是醞釀很久的一篇文章了。用空構造函數設置類名每個對象都共享相同屬性每個對象共享一個方法版本，省內存。 js對象詳解(JavaScript對象深度剖析，深度理解js對象) 這算是醞釀很久的一篇文章了。 JavaScript作為一個基于對象(沒有類的概念)的語言，從入門到精通到放棄一直會被對象這個問題圍繞。平時發的文章基本都是開發中遇到的問題和對...

CatalpaFlat 2019-08-22 11:12 評論0 收藏0
js高級程序設計-面向對象的程序設計-閱讀筆記

摘要：中又兩種屬性數據屬性包含一個數據值的位置叫做數據屬性和訪問器屬性和就是訪問器屬性數據屬性而數據屬性又有四個這樣的特性是否可配置編輯刪除屬性默認是否可以被枚舉即可被默認是否可寫默認寫不代表刪除這里僅限修改屬性的數據值默認是設置了一個空對象定 ECMAScript 中又兩種屬性:數據屬性(包含一個數據值的位置叫做數據屬性)和訪問器屬性(getter() 和 setter()就是訪問器屬性)...

AlphaWatch 2019-08-21 15:02 評論0 收藏0
淺析JavaScript中原型及constructor、__proto__、prototype的關系

摘要：搞清了構造函數和原型的區別后，就可以繼續了。指向構造函數的原型對象，存在于實例與構造函數的原型對象之間。要注意的是當我們使用下面這種將整個重寫的情況時，會切斷構造函數和原型之間的聯系，也就是說不再指向了，而是指向。前言先說一說為什么要搞清楚JavaScript的原型，因為這就是JS的根。JavaScript雖然不是一門傳統的面向對象語言，但它有自己的類和繼承機制，最重要的就是它采用...

wenzi 2019-08-26 13:54 評論0 收藏0