JavaScript學習之對象原型及繼承

妤鋒シ發布于2019-08-23 12:16 / 1034人閱讀

摘要：原型要掌握這三者之間的關系，通過代碼例子記錄一下自身屬性的這里就是通過代碼看一下做了什么默認情況下，將的所有屬性包括繼承的賦值給有什么東西呢自己的原型鏈，添加一個屬性，用來指明對象的誰構造的自身全部屬性，這邊構建一個空對象原型，所以沒有自有

原型

要掌握這三者之間的關系prototype，constructor,__proto__
通過代碼例子記錄一下

function F() {
    this.a = 123;     //             this : {
                      //自身屬性             a ：123,   
                      //this的.__proto__      Object.creat(F.prototype),    
                      //                    }
};
var o = new F();      //這里o就是this

通過代碼看一下

prototype做了什么
默認情況下，將F.prototype的所有屬性包括繼承的賦值給o.__proto__
prototype有什么東西呢？

自己的原型鏈，F.prototype.__proto__

prototype添加一個constructor屬性，用來指明對象的誰構造的

F.prototype自身全部屬性，（這邊構建一個空對象原型，所以沒有自有屬性）

constructor，默認指向prototype對象所在的構造函數，必須從對象的原型鏈上去找也就是F.prototype上去找

對于__proto__,o對象得到了__proto__，這樣也就形成了對象之間的鏈接，構成了原型鏈，能通過原型鏈訪問繼承的屬性和方法；當然o還有自身屬性a

注意點：當我們自定義了F的原型

function F() {};
F.prototype = {a : 1};
//因為原型指向的改變，需要加上構造器的正確值
F.prototype.constructor = F;
var o = new F();
console.log(o.constructor);

手動改變原型指向，會導致constructor的變更，我們需要手動添加

這種手動添加的constructor是可遍歷的，一般這么修改F.prototype.a = 1;

默認constructor在F.prototype中找

F.prototype = {a : 1};賦值是引用地址的賦值

function F() {};
function G() {};
var o = new F();
F.prototype.a = 2;            //修改的還是new時創建的指針指向上的內容
//F.prototype = {a : 2};      //F.prototype得到新指針，所以new時的指針上的內容不受影響
console.log(o);

繼承

繼承要實現的效果是：

子類和父類存在繼承關系

function F() {
    this.f = "f"
}
function Son() {
    this.s = "s"
}
var po = {a : 1};
F.prototype = po;
//第一種，是錯誤的
//Son.prototype = F.prototype;   //兩者是同輩分，之間不存在繼承，是兄弟

//第二種
Son.prototype = Object.create(F.prototype);   //Son.prototype.__proto__ = F.prototype 這個就是存在上下輩分，有繼承關系

//第三種
//Son.prototype = new F()；     與第二種一樣，有繼承關系，但是這種會進行一次F構造函數的構建，消耗性能

所以我們采用Son.prototype = Object.create(F.prototype);

擁護父類自身的屬性及方法

利用call加this機制完成子類對父類自身方法屬性的繼續

function F() {
    this.f1 = "1",
    this.fn = function () {
        console.log(this)
    }
}
function Son() {
    F.call(this);
}
var son = new Son();
console.log(son.fn())

構造器的修改Son.prototype.constructor = Son;使得son知道由Son構建自己

整合一下

function F() {
    this.f1 = "1";
    
}

function Son() {
    F.call(this);
    
}

F.prototype.fn = function () {};

var inherit = (function (){
    return function inherit(Target, Origin){
            Target.prototype = Object.create(Origin.prototype);
            //create等價于
            // function F() {};
            // F.prototype = Origin.prototype;
            // new F()
            Target.prototype.constructor = Target;

        }
}());
inherit(Son, F);
var son = new Son();
console.log(Object.getPrototypeOf(son));

GPU云服務器云服務器原型繼承原型鏈繼承學習之substr() 深度學習之概要

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

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

Javascript學習之繼承

摘要：繼承是面向對象編程語言中的一個重要的概念，繼承可以使得子類具有父類的屬性和方法或者重新定義追加屬性和方法等。但是在中沒有類的概念，是基于原型的語言，所以這就意味著對象可以直接從其他對象繼承。繼承是面向對象編程語言中的一個重要的概念，繼承可以使得子類具有父類的屬性和方法或者重新定義、追加屬性和方法等。但是在Javascript中沒有類的概念，是基于原型的語言，所以這就意味著對象可以直接...

CHENGKANG 2019-08-21 15:34 評論0 收藏0
JavaScript學習之Object(下)相關方法

摘要：它不區分該屬性是對象自身的屬性，還是繼承的屬性。那么我們要遍歷對象所有屬性，包括繼承以及不可遍歷的屬性，用加原型遍歷實現類似的用遞歸 Object靜態方法 Object自身方法，必須由Object調用，實例對象并不能調用 Object.getPrototypeOf() 作用是獲取目標對象的原型 function F() {}; var obj = new F(); console.lo...

amuqiao 2019-08-23 12:15 評論0 收藏0
JavaScript學習之Object(下)new命令

摘要：命令作用作用是執行構造函數，返回實例對象上面例子是自定義一個構造函數，其最大的特點就是首字母大寫，用執行構造函數其中，在的執行下，代表了實例化后的對象，這個也就有屬性注意點如果不用執行構造函數，那么指向的是全局有兩種方式可以避免內部定義嚴格 new命令 new作用作用是執行構造函數，返回實例對象 function F() { this.name = object } var ...

Salamander 2019-08-23 12:14 評論0 收藏0
JavaScript學習之對象拷貝

摘要：對象拷貝可遍歷屬性淺拷貝簡單的淺拷貝可以用，對存取器定義的對象也試用深拷貝屬性描述對象的拷貝這是個淺拷貝深拷貝不可遍歷屬性對象的拷貝例如拷貝獲得共同的原型，與是兄弟關系說明也繼承了原型，同級別簡潔化版對象拷貝可遍歷屬性淺拷貝 if(typeof Object.prototype.copy != function) { Object.prototype.copy = fun...

Aklman 2019-08-23 12:15 評論0 收藏0
JS學習之Object

摘要：文中的多為構造函數原型對象屬性為函數的專屬屬性，表示函數的原型對象。關于各種數據類型的屬性的展示對象的構造器函數該屬性指向創建該對象原型的構造函數。對對象的凍結狀態的設置和判斷，前者讓凍結對象，后者判斷對象是否被凍結。前言上篇文章介紹了JS的對象,本文將介紹Object這個基類，主要介紹其屬性和方法（其實這些在MDN里都有^_^,點擊這里可以直通MDN）。好了廢話不多說了，直接開始...

qujian 2019-08-20 13:42 評論0 收藏0