JavaScript 之面向對象 [ 原型 ]

warmcheng 發布于2019-08-26 12:14 / 1192人閱讀

摘要：原型描述所有函數類型都具有的屬性在函數進行定義時，就包含屬性屬性的默認值為一個空對象獲取原型第一種構造函數的屬性第二種對象提供的方法啊哈哈所有函數都具有屬性，可以直接調用顯示類型包含構造函數所有引用類型都可以使用構造函數方式定義所有引用類

原型描述

所有函數（Function類型）都具有的屬性

在函數進行定義時，就包含prototype屬性

prototype屬性的默認值為一個空對象｛｝

獲取原型

第一種

構造函數的prototype屬性

第二種

Object對象提供的getPrototypeOf()方法

function fun() {
    console.log( "啊哈哈" );
}
/* 所有函數都具有prototype屬性，可以直接調用 */
console.log( fun.prototype );// 顯示 fun {}
/*
    Function類型包含 構造函數
     * 所有引用類型都可以使用 構造函數方式定義 - 所有引用類型都是構造函數
     * 構造函數也可以用來定義對象（Object類型） - Object也可以調用prototype屬性
 */
/* 引用類型調用prototype屬性 */
console.log( String.prototype );// 顯示 [String: ""]
/* Object調用prototype屬性 */
console.log( Object.prototype );// 顯示 {}

/*
    獲取原型
     * 可以通過以下兩種方法獲取指定目標的原型
     * 第一種
      * 構造函數的prototype屬性
     * 第二種
      * Object對象提供的getPrototypeOf()方法
 */

/* 定義一個函數 */
function fn() {
    console.log( "嘔呀呀" );
}
/* 通過prototype屬性獲取 */
console.log( fn.prototype );// 顯示 fn {}
/* 通過getPrototypeOf()方法獲取 */
console.log( Object.getPrototypeOf( fn ) );// 顯示 [Function]

原型新增屬性或方法

獲取的原型會得到一個空對象

是對象就有屬性或方法

也可以新增屬性或方法

新增方式

第一種方式

構造函數.prototype.屬性名（方法名） = 屬性值（方法體）

/* 定義一個函數 */
function fun() {
    console.log( 100 );
}

/* 第一種方式 */
/* 獲取原型 */
console.log( fun.prototype );// 顯示 fun {}
/* 為原型添加屬性或方法 */
fun.prototype.name = "唐三";
/* 才重新獲取原型 */
console.log( fun.prototype );// 顯示 fun { name: "唐三" }

第二種方式

Object.defineProperty( 獲取原型，屬性名（方法名），{ 屬性描述符 } )

/* 定義一個函數 */
function fun() {
    console.log( 100 );
}
/* 第二種方式 */
/* 獲取原型 */
console.log( fun.prototype );// 顯示 fun { name: "唐三" }
/* 為原型添加屬性或方法 */
Object.defineProperty( fun.prototype, "nian", {
    /* 設置屬性值或方法體 */
    value : 20,
    /*
        設置是否可枚舉
         * 用于打印對象時可以正常顯示新增的屬性
         * 不設置可枚舉時將無法顯示新增屬性，只顯示原有屬性
          * 顯示 fun { name: "唐三" }
     */
    enumerable : true
} );
/* 才重新獲取原型 */
console.log( fun.prototype );// 顯示 fun { name: "唐三", nian: 20 }

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

構造函數（對象）本身自帶或添加的屬性

原型屬性

從原型中獲得屬性

/* 定義一個構造函數 */
function Fun() {
    /* 設置自有屬性和方法 */
    this.name = "唐三";
    this.menpai = function () {
        console.log( "唐門" );
    }
}
/* 獲取原型 */
console.log( Fun.prototype );//Fun {}
/* 為原型添加新屬性 - 原型屬性 */
Fun.prototype.nian = 20;
/* 在獲取原型 */
console.log( Fun.prototype );//Fun { nian: 20 }

/*
    通過構造函數Fun創建對象
     * 該對象具有構造函數Fun的自有屬性
     * 該對象也具有構造函數Fun的原型屬性
 */
/* 創建對象 */
var fn = new Fun();
/* 調用自有屬性 */
console.log( fn.name );// 顯示 唐三
/* 調用原型屬性 */
console.log( fn.nian );// 顯示 20

/* 使用相同的構造函數在創建一個對象 */
var fu = new Fun();
/* 新對象對自有屬性進行修改 */
fu.name = "融念冰";
/* 調用修改的自有屬性 */
console.log( fu.name );// 顯示 融念冰
/* 兩個對象之間不會有影響 */
console.log( fn.name );// 顯示 唐三

/* 修改原型屬性 */
Fun.prototype.nian = 25;
/* 以構造函數Fun創建的對象都會被修改 */
console.log( fn.nian );// 顯示 25
console.log( fu.nian );// 顯示 25

重寫屬性

表示在自有屬性和原型屬性同名時，自有屬性會覆蓋原型屬性

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = "唐三";
}
/* 獲取原型并添加原型屬性 */
Fun.prototype.name = "融念冰";

/* 創建一個對象 */
var fn = new Fun();
/* 調用屬性 */
console.log( fn.name );// 顯示 唐三（自身屬性）

刪除屬性

通過delete關鍵字來進行刪除

如果進行刪除的目標對象同時具有自有屬性和原型屬性，會先刪除自有屬性

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = "唐三";
}
/* 獲取原型并添加原型屬性 */
Fun.prototype.name = "融念冰";

/* 創建一個對象 */
var fn = new Fun();
/* 調用屬性 */
console.log( fn.name );// 顯示 唐三（自身屬性）

/*
    刪除屬性
     * 通過delete關鍵字來進行刪除
     * 如果進行刪除的目標對象同時具有自有屬性和原型屬性，會先刪除自有屬性
 */
/* 刪除目標對象的指定屬性 */
delete fn.name;// 優先刪除自有屬性
/* 在調用已刪除的屬性 */
console.log( fn.name );// 顯示 融念冰（原型屬性）

檢測屬性

表示檢測目標對象中，是否存在指定屬性

Object.hasOwnProperty()方法

Object.hasOwnProperty( 指定屬性名稱 )方法

用于判斷當前指定屬性是否為自有屬性

true - 表示存在

false - 表示不存在

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = "唐三";
}
/* 原型屬性 */
Fun.prototype.name = "融念冰";
/* 創建對象 */
var fn = new Fun();

/* Object.hasOwnProperty()方法 */
console.log( fn.hasOwnProperty(  "name") );// 顯示 true

in 關鍵字

in 關鍵字 - （屬性名 in 對象名）

用于判斷對象中是否存在指定屬性(自有屬性或原型屬性)

true - 表示存在

false - 表示不存在

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = "唐三";
}
/* 原型屬性 */
Fun.prototype.name = "融念冰";
/* 創建對象 */
var fn = new Fun();
/* in 關鍵字 */
console.log( "name" in fn );// 顯示 true

顯示原型和隱式原型 顯示原型

所有函數的原型（prototype）都可以稱為是顯示原型

隱式原型

所有對象的原型（__proto__）都可以稱為是隱式原型

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = "唐三";
}
/* 原型屬性 */
Fun.prototype.nian = 20;
/* 創建對象 */
var fn = new Fun();

/* 調用自有屬性 */
console.log( fn.name );// 顯示 唐三
/* 調用原型屬性 */
console.log( fn.nian );// 顯示 20

/* 對象調用函數的原型 */
console.log( fn.prototype );// 顯示 undefined 對象會將prototype，當做自身的屬性進行調用
/* 對象調用對象的原型 */
console.log( fn.__proto__ );// 顯示 Fun { nian: 20 }

isPrototypeOf()方法

表示用于判斷一個指定對象是否為另一個目標對象的原型

true - 表示是

false - 表示不是

/* 定義一個對象 */
var obj = {
    name : "唐三"
}
/* 定義一個構造函數 */
function Fun() {}
/* 將指定對象賦值給構造函數Fun的原型 */
Fun.prototype = obj;
/* 創建對象 */
var fn = new Fun();

/* 判斷obj對象是否為fn對象的原型 */
console.log( obj.isPrototypeOf(  fn) );// 顯示 true

GPU云服務器云服務器 javascript 面向對象 javascript面向對象 javascript面向對象編程 javascript面向對象編程指南

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

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

SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0
面向對象的JavaScript之繼承(一) 類式繼承

摘要：那你們肯定會問為什么共用，而沒有共用呢，下面就給你解釋，請看引用類型是共用的值類型是私用的。引言面向對象的編程語言都具繼承這一機制,而 JavaScript 是基于原型(Prototype)面向對象程序設計,所以它的實現方式也是基于原型(Prototype)實現的. 繼承的方式類式繼承構造函數繼承組合繼承原型式繼承寄生式繼承寄生組合式繼承 1.類式繼承 //聲明父...

forsigner 2019-08-20 14:21 評論0 收藏0
javascript面向對象之“多態”

摘要：之前，本質上不能算是一門面向對象的編程語言，因為它對于封裝繼承多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。所以在中出現了等關鍵字，解決了面向對象中出現了問題。 ES6之前，javascript本質上不能算是一門面向對象的編程語言，因為它對于封裝、繼承、多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以讓我們以...

JerryWangSAP 2019-08-23 14:11 評論0 收藏0
面向對象的 JavaScript

摘要：是完全的面向對象語言，它們通過類的形式組織函數和變量，使之不能脫離對象存在。而在基于原型的面向對象方式中，對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格，導致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向對象的語言，或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意，從對語言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0