JavaScript-原型

Vixb 發布于2019-08-26 12:13 / 3493人閱讀

摘要：不要為繼承關系多帶帶創建新對象盡量減少運行時的方法搜索將自身屬性改為原型屬性原型鏈的問題原型鏈實際上是多個構造函數或者對象之間共享屬性和方法創建子級的對象時，不能像父級的構造函數傳遞任何參數實際開發中，很少多帶帶使用原型鏈。

原型概述 原型是什么

在JavaScript中，函數是一個包含屬性和方法的Function類型的對象原型（Prototype）是Function類型對象的一個屬性。
在函數定義時就包含了Prototype屬性，它的初始值是一個空對象。在JavaScript中并沒有定義函數的原型類型，所以原型是任何類型的。
原型用于保存對象的共享屬性和方法，原型的屬性和方法并不會影響函數本身的屬性和方法。

獲取原型

//通過構造函數的Prototype屬性獲取原型
function fun() {
    console.log("this is function");
};
console.log(fun.prototype);//fun｛｝
console.log(fun["prototype"]);//fun｛｝

//通過Object對象的getPortotypeOf(函數名)方法
console.log(Object.getPrototypeOf(fun));//[Function]

原型的屬性和方法

function fun() {
    console.log("this is function")
}
/*  設置屬性的原型和方法
     函數名.prototype.屬性名 = 屬性值
     函數名.prototype.方法名 = function()｛｝*/
fun.prototype.name = "花間集";
console.log(fun.prototype.name)//花間集

原型屬性 自有屬性和原型屬性

自有屬性：通過對象的引用添加的屬性。其他對象無此屬性，即使有，也是不彼此立的屬性

原型屬性：從原型對象中繼承來的屬性，一旦原型對象屬性值改變，所有繼承該原型的對象屬性都改變

//定義構造函數
function fun(agg) {
    //構造函數本身的屬性或方法-自有屬性
    this.agg = agg;
    this.age = function () {
        console.log(100)
    }
}
//通過原型新增的屬性或方法-原型屬性
fun.prototype.name = "白";

/*  通過構造函數創建對象
*    *不僅有構造函數的自有屬性
*    *好友構造函數的原型屬性*/
var fn = new fun(1);
console.log(fn.name);//白
console.log(fn.agg);//1

檢測原型屬性

function fun() {
    this.name = "花間集"http://自有屬性
}
//原型屬性
fun.prototype.name = "溫庭筠";
//通過構造函數創建對象
var fn = new fun();

/*   Object.hasOwnPrototy(屬性名稱)方法
*     返回值-布爾值
*      true-表示存在指定的自有屬性
*      false-表示不存在指定的自有屬性*/
console.log(fun.hasOwnProperty("name"))//true

/*   使用in關鍵字檢測對象的屬性
*     判斷對象中是否存在是定屬性（自有屬性或原型屬性）
*     返回值-布爾值*/
console.log("name" in fun);//true

重寫與刪除原型屬性

//創建構造函數
function fun() {
    this.name = "村上春樹"
}
//新增與自有屬性同名的原型屬性
fun.prototype.name = "西尾維新";

//用構造函數創建對象
var fn = new fun();

//當自有屬性和原型屬性同名時，自有屬性的級別高于原型屬性
console.log(fn.name);//村上春樹

//刪除對象的屬性，自有屬性和原型屬性同名，先刪除自有屬性。
//再刪除一次則刪除原型屬性
delete fn.name;

//重新訪問對象的屬性
console.log(fn.name);//西尾維新

isPrototypeOf()方法

該方法用來判斷對象是否是另一個對象的原型

//通過初始化器方式定義對象
var obj ={
    name : "花間集"
};
//定義構造函數
function Fun () {
    this.agg = 2
}
//將對象obj賦值于函數Fun的原型
Fun.prototype=obj;
//用構造函數創建對象
var fn = new Fun();
//判斷對象obj是不是對象fn的原型
var f = obj.isPrototypeOf(fn);
console.log(f);//true

擴展內建對象

JavaScript中的內置對象有些也具有Prototype屬性，利用內置對象的prototype屬性可以為內置對象擴展屬性或者方法。
一般建議慎用這種方式，可能會應瀏覽器版本問題導致沖突。

繼承 原型鏈

/*    原型鏈
*   類似于子級可以直接使用父級的屬性或者方法
*   構造函數或者對象的原型一級一級的指向Object的原型
*   后面的可以直接使用前面的原型定義->實現繼承*/
function A () {
    this.a = "a"
}
var a = new A();//通過構造函數創建對象

function B () {
    this.b = "b"
}
//B函數的原型指向對象a
B.prototype=a;
//構造函數創建對象
var b = new B();
console.log(b.a);//a
console.log(b.b);//b

function C () {
    this.c = "c"
}
//C函數的原型指向b對象
C.prototype=b;
//創建構造函數
var c = new C();

console.log(c.a);//a
console.log(c.b);//b
console.log(c.c);//c

只繼承于原型的原型鏈

出于對效率的考慮，盡可能的降屬性和方法添加到原型上。

不要為繼承關系多帶帶創建新對象

盡量減少運行時的方法搜索

function A () {
    //將自身屬性改為原型屬性
}
A.prototype.a="a";

function B () {

}
B.prototype = A.prototype;

B.prototype.b="b";
var b = new B();
console.log(b.a);//a
console.log(b.b);//b

function C () {
     this.c="c"
}

C.prototype = B.prototype;
var c = new C();
console.log(c.a);//a
console.log(c.b);//b
console.log(c.c);//c

原型鏈的問題

原型鏈實際上是多個構造函數或者對象之間共享屬性和方法

創建子級的對象時，不能像父級的構造函數傳遞任何參數

實際開發中，很少多帶帶使用原型鏈。

GPU云服務器云服務器 javascript原型原型原型鏈基于原型原型方法

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

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

理解JavaScript的核心知識點：原型

摘要：首先，需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考，面向對象編程是其一種思維方式，與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者（包括本人）低估甚至忽視了，這是因為絕大多數人沒有想要深刻理解這個機制的內涵，以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...

iKcamp 2019-08-23 18:34 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評論0 收藏0
深入理解Javascript原型關系

摘要：如下所示在規范中，已經正式把屬性添加到規范中也可以通過設置和獲取對象的原型對象對象之間的關系可以用下圖來表示但規范主要介紹了如何利用構造函數去構建原型關系。前言在軟件工程中，代碼重用的模式極為重要，因為他們可以顯著地減少軟件開發的成本。在那些主流的基于類的語言（比如Java,C++）中都是通過繼承(extend)來實現代碼復用，同時類繼承引入了一套類型規范。而JavaScript是...

ethernet 2019-08-22 14:06 評論0 收藏0
JavaScript基礎之創建對象、原型、原型對象、原型鏈

摘要：在最開始的時候，原型對象的設計主要是為了獲取對象的構造函數。同理數組通過調用函數通過調用原型鏈中描述了原型鏈的概念，并將原型鏈作為實現繼承的主要方法。對象的創建在JavaScript中創建一個對象有三種方式?？梢酝ㄟ^對象直接量、關鍵字new和Object.create()函數來創建對象。 1. 對象直接量創建對象最直接的方式就是在JavaScript代碼中使用對象直接量。在ES5...

wangbjun 2019-08-22 15:16 評論0 收藏0
細說 Javascript 對象篇（二） : 原型對象

摘要：并沒有類繼承模型，而是使用原型對象進行原型式繼承。我們舉例說明原型鏈查找機制當訪問一個對象的屬性時，會從對象本身開始往上遍歷整個原型鏈，直到找到對應屬性為止。原始類型有以下五種型。此外，試圖查找一個不存在屬性時將會遍歷整個原型鏈。 Javascript 并沒有類繼承模型，而是使用原型對象 prototype 進行原型式繼承。盡管人們經常將此看做是 Javascript 的一個缺點，然...

lansheng228 2019-08-19 14:40 評論0 收藏0