JavaScript面向對象中的原型個人分享

pakolagij 發(fā)布于2019-08-26 12:14 / 2917人閱讀

摘要：原型原型是什么所謂原型就是類型對象的一個屬性在函數(shù)定義時就包含了屬性它的初始值是以個空對象在中并沒有定義函數(shù)的原型類型所以原型可以是任何類型原型是用于保存對象的共享屬性和方法的原型的屬性和方法并不會影響函數(shù)本身的屬性和方法示例代碼類型的屬性

原型 原型是什么

所謂原型(Prototype)就是Function類型對象的一個屬性

在函數(shù)定義時就包含了prototype屬性,它的初始值是以個空對象.在JavaScript中并沒有定義函數(shù)的原型類型,所以原型可以是任何類型

原型是用于保存對象的共享屬性和方法的,原型的屬性和方法并不會影響函數(shù)本身的屬性和方法

示例代碼:

// Function類型的屬性 - 就是所有函數(shù)都具有的屬性
console.log(Function.prototype);
// 定義函數(shù)
function fn() {
    console.log("一花一世界");// 調用結果為 [Function]
}
// 原型的默認值是空對象
console.log(fn.prototype);// 調用結果為 fn {}


// 函數(shù)包含構造函數(shù) - 就是所有引用類型其實都是構造函數(shù)
console.log(Number.prototype);// 調用結果為 [Number: 0]

console.log(Object.prototype);// 調用結果為 {}

var result = Object.getOwnPropertyDescriptor(Object.prototype,"constructor");
console.log(result);

獲取原型

可以通過兩種方式獲取原型,從而設置共享的屬性和方法

1. 通過構造函數(shù)的prototype屬性

示例代碼:

function fn() {
    console.log("一花一世界");
}
// 使用訪問對象的屬性語法結構
console.log(fn.prototype);// 調用結果為 fn {}
console.log(fn["prototype"]);// 調用結果為 fn {}

2. 通過Object對象的getPrototypeOf()方法

示例代碼:

// Object類型提供getPrototypeOf()方法
function fn() {
    console.log("一花一世界");
    
console.log(Object.getPrototypeOf(fn));// 調用結果為 [Function]

為原型新增屬性或方法

示例代碼:

function fn() {
    console.log("一花一世界");
}
// 變量proto也是一個空對象
//var proto = fn.prototype;
//console.log(proto);// 調用結果為 fn {}

//新增屬性或方法
// 1. prototype.name = "小燕子";
fn.prototype.name = "小燕子";
console.log(fn.prototype);// 調用結果為 fn { name: "小燕子" }

// 2. defineProperty() - 表示定義屬性
Object.defineProperty(fn.prototype,"age",{
    value : 21 + "歲",
    /* 可枚舉 */
    enumerable : true
});
console.log(fn.prototype);// 調用結果為 fn { name: "小燕子", age: "21歲" }

構造函數(shù)的原型

示例代碼:

// 定義構造函數(shù)
function Hero() {
    this.name = "一花一世界";
    this.sayMe = function () {
        console.log("花花世界");
    }
}
// 操作構造函數(shù)Hero的原型
Hero.prototype.age = 26;
// 利用構造函數(shù)來創(chuàng)建對象
var hero = new Hero();
console.log(hero);// 調用結果為 Hero { name: "一花一世界", sayMe: [Function] }
// 為構造函數(shù)的原型新增的屬性 - 構造函數(shù)創(chuàng)建的對象中依舊可以訪問
console.log(hero.age);// 調用結果為 26
// 對象hero中不存在age屬性
// getOwnPropertyDescriptor - 表示獲取私有屬性描述符
var result = Object.getOwnPropertyDescriptor(hero,"age");
console.log(result);// 調用結果為 undefined

代碼分析圖:

自有屬性與原型屬性

自有屬性 - 通過對象的引用添加的屬性.其它對象可能無此屬性;即使有,也是彼此獨立的屬性

原型屬性 - 從原型對象中繼承來的屬性,一旦原型對象中屬性值改變,所有繼承自該原型的對象屬性性均改變

示例代碼:

// 定義構造函數(shù)
function Hero(name) {
    // 構造函數(shù)本身的屬性 - 自有屬性
    this.name = name;
    this.sayMe = function () {
        console.log("一花一世界");
    }
}
// 通過構造函數(shù)Hero的prototype新增屬性或方法
// 通過原型所定義的屬性 - 原型屬性
Hero.prototype.age = 26;
/*
    通過構造函數(shù)Hero創(chuàng)建對象時
      * 不僅具有構造函數(shù)的自有屬性
      * 還具有構造函數(shù)的原型屬性
 */
var hero = new Hero("花花世界");

console.log(hero.name);//調用結果為 花花世界
console.log(hero.age);//調用結果為 26

var hero2 = new Hero("一笑一人生");
console.log(hero2.name);//調用結果為 一笑一人生
console.log(hero2.age);//調用結果為 26

// 為對象hero新增age屬性
hero.age = 62;
console.log(hero.age);// 調用結果為 62

console.log(hero);// 調用結果為 Hero { name: "花花世界", sayMe: [Function], age: 62 }
console.log(hero2.age);//調用結果為 26

Hero.prototype.age = 77;

console.log(hero.age);// 調用結果為 62
console.log(hero2.age);// 調用結果為 77

重寫屬性

通過構造函數(shù)或對象的自有屬性可以重寫原型的屬性

示例代碼:

// 定義構造函數(shù)
function Hero() {
    this.name = "花花世界";
}

// 構造函數(shù)的原型
Hero.prototype.name = "醉影笑驚鴻";
// 構造函數(shù)創(chuàng)建對象
var hero = new Hero();

// 自有屬性與原型屬性同名時,默認訪問的是自有屬性 - 自有屬性的優(yōu)先級別高于原型屬性
console.log(hero.name);// 調用結果為 花花世界

// 刪除對象的屬性 - 刪除的是自有屬性要,因為自有屬性的優(yōu)先級別高于原型屬性所以需要先刪除自有屬性才能調用到原型屬性(前提是自有屬性和原型屬性要同名的情況)
delete hero.name;
// 重新訪問對象的屬性
console.log(hero.name);// 調用結果為 醉影笑驚鴻

控制臺效果對比圖:

檢測原型屬性

Object.hasOwnProperty(prop)方法

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

參數(shù) - prop - 表示指定屬性名稱

返回值 - 布爾值

true - 表示存在指定的自有屬性

false - 表示不存在指定的自有屬性

使用in關鍵字檢測對象的屬性

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

返回值 - 布爾值

true - 表示存在指定的屬性

false - 表示不存在指定的屬性

示例代碼:

function Hero() {
    //this.name = "醉影笑驚鴻"http:// 自有屬性
}

//Hero.prototype.name = "花花世界";

var hero = new Hero();
/*
    Object.hasOwnProperty(prop)方法
      * 作用 - 判斷當前指定屬性是否為自有屬性
      * 參數(shù)
        * prop - 表示指定屬性名稱
      * 返回值 - 布爾值
        * true - 表示存在指定的自有屬性
        * false - 表示不存在指定的自有屬性
 */
console.log(hero.hasOwnProperty("name"));
/*
    使用in關鍵字檢測對象的屬性
      * 作用 - 判斷對象中是否存在指定屬性(自有屬性或原型屬性)
      * 返回值 - 布爾值
        * true - 表示存在指定的屬性
        * false - 表示不存在指定的屬性
 */
console.log("name"in hero);

控制臺效果對比圖:

操作原型的方式 1. 利用對象.屬性或方法的方式新增屬性或方法

示例代碼:

// 定義構造函數(shù)
function Hero() {}
// 通過構造函數(shù)的原型新增屬性或方法

Hero.prototype.name = "一花一世界";
Hero.prototype.sayMe = function () {
    console.log("醉影笑驚鴻");
// 通過構造函數(shù)創(chuàng)建對象
var hero = new Hero();

console.log(hero.name);//調用結果為 一花一世界
hero.sayMe();//調用結果為 醉影笑驚鴻

2. 將原型重新賦值為一個新對象

示例代碼:

// 定義構造函數(shù)
function Hero() {}
// 通過構造函數(shù)的原型新增屬性或方法

Hero.prototype = {
    name : "一笑一人生",
    sayMe : function () {
        console.log("極樂世界");
    }
};

// 通過構造函數(shù)創(chuàng)建對象
var hero = new Hero();

console.log(hero.name);//調用結果為 一笑一人生
hero.sayMe();//調用結果為 極樂世界

顯示原型與隱式原型

所有對象其實也具有原型

注意 - 對象的原型(__proto__)并非是函數(shù)的原型(prototype)

區(qū)分:

將函數(shù)的原型 -> 顯式原型

將對象的原型 -> 隱式原型

對象的原型

不能用于真實開發(fā)工作，僅用于邏輯測試

注意: __proto__屬性只能在調用時使用. __proto__屬性與prototype屬性并不等價.

示例代碼:

// 定義構造函數(shù)
function Hero() {
    this.name = "皮卡丘";
}

// 通過構造函數(shù)的原型新增屬性或方法
Hero.prototype.age = 26;
// 通過構造函數(shù)創(chuàng)建對象
var hero = new Hero();

console.log(hero.name);// 對象調用自有屬性 結果為 皮卡丘
console.log(hero.age);// 對象調用原型屬性 結果為 26

/*
    所有對象其實也具有原型
    * 注意 - 對象的原型(__proto__)并非是函數(shù)的原型(prototype)
    * 區(qū)分
      * 將函數(shù)的原型 -> 顯式原型
      * 將對象的原型 -> 隱式原型
    * 對象的原型
      * 不能用于真實開發(fā)工作，僅用于邏輯測試
 */
console.log(hero.prototype);// 調用結果為 undefined 表示對象中不存在該屬性
console.log(hero.__proto__);// 調用結果為 Hero { age: 26 }

isPrototypeOf()方法

每個對象中都會具有一個isPrototypeOf()方法,該方法用來判斷一個對象是否是另一個對象的原型

示例代碼:

// 通過初始化器方式定義對象
var obj = {
    name : "皮卡丘"
}
// 定義構造函數(shù)
function Hero(){}
// 將對象obj賦值給構造函數(shù)Hero的原型
Hero.prototype = obj;
// 通過構造函數(shù)創(chuàng)建對象
var hero = new Hero();
// 判斷指定對象是否是另一個對象的原型
var result = obj.isPrototypeOf(hero);

console.log(result);// 調用結果為 true - 表示是另一個對象的原型

擴展內置對象

通過原型擴展內置對象的屬性和方法非常靈活, 根據(jù)個性化要求定制JavaScript語言的具體內容

注意: 一般不建議使用這種方式,如果JavaScript的版本更新時可能會提供個性化的屬性或方法,會導致沖突

示例代碼:

Object.prototype.sayMe = function(){
    console.log("一花一世界");
}
// 通過Object構造函數(shù)創(chuàng)建對象
var obj = new Object();

obj.sayMe();// 調用結果為 一花一世界


Array.prototype.inArray = function(color){
    // this - 表示當前的數(shù)組
    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green", "blue"];

console.log(arr.inArray("red"));// 調用結果為 true
console.log(arr.inArray("yellow"));// 調用結果為 false

擴展內置對象補充

示例代碼:

/* 定義對象原型屬性 */
Object.defineProperty(Object.prototype, "sayMe", {
    /* 函數(shù)方法 */
    value : function(){
        /* 函數(shù)體 */
        console.log("一花一世界");
    }
});
/* 定義變量并賦值新創(chuàng)建的對象 */
var obj = new Object();
/* 調用創(chuàng)建的函數(shù)屬性 */
obj.sayMe();// 調用結果為 一花一世界

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

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

JavaScript面向對象中的繼承個人分享

摘要：繼承原型鏈所謂言行鏈就是如果構造函數(shù)或對象的原型指向構造函數(shù)或對象的原型再指向構造函數(shù)或對象以此類推最終的構造函數(shù)或對象的原鄉(xiāng)指向的原型由此形成一條鏈狀結構被稱之為原型鏈示例代碼原型鏈通過構造函數(shù)創(chuàng)建對象將的原型指向對象通過構造函數(shù)創(chuàng)建對象繼承原型鏈所謂言行鏈就是如果構造函數(shù)或對象A,A的原型指向構造函數(shù)或對象B,B的原型再指向構造函數(shù)或對象C,以此類推,最終的構造函數(shù)或對象的原...

Coly 2019-08-26 12:14 評論0 收藏0
JavaScript面向對象中的嚴格模式個人分享

摘要：嚴格模式嚴格模式的概念所謂嚴格模式就是對中的一種限制性更強的方式屬于代碼的一種強制規(guī)則來規(guī)范代碼的格式簡單的說就是必須按照嚴格模式的規(guī)則書寫代碼否則就會報錯嚴格模式修正了一些引擎難以優(yōu)化的錯誤同樣的代碼有些時候嚴格模式會比非嚴格模式下更加快嚴格模式嚴格模式的概念所謂嚴格模式就是對JavaScript中的一種限制性更強的方式. 屬于代碼的一種強制規(guī)則,來規(guī)范代碼的格式簡單的說就是...

lordharrd 2019-08-23 11:27 評論0 收藏0
【重溫基礎】15.JS對象介紹

摘要：構造函數(shù)通常首字母大寫，用于區(qū)分普通函數(shù)。這種關系常被稱為原型鏈，它解釋了為何一個對象會擁有定義在其他對象中的屬性和方法。中所有的對象，都有一個屬性，指向實例對象的構造函數(shù)原型由于是個非標準屬性，因此只有和兩個瀏覽器支持，標準方法是。從這篇文章開始，復習 MDN 中級教程的內容了，在初級教程中，我和大家分享了一些比較簡單基礎的知識點，并放在我的【Cute-JavaScript】系...

booster 2019-08-23 14:43 評論0 收藏0
JS對象(1)重新認識面向對象

摘要：對象重新認識面向對象面向對象從設計模式上看，對象是計算機抽象現(xiàn)實世界的一種方式。除了字面式聲明方式之外，允許通過構造器創(chuàng)建對象。每個構造器實際上是一個函數(shù)對象該函數(shù)對象含有一個屬性用于實現(xiàn)基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向對象 date: 2016-10-05 tags: JavaScript 0x00 面向對象從設計模式上看，對象是...

superw 2019-08-21 11:17 評論0 收藏0
JavaScript面向對象中的Array類型個人分享

摘要：類型檢測數(shù)組示例代碼調用結果為方法作用用于判斷當前對象的數(shù)據(jù)類型結果特點可以準確判斷出當前變量的類型調用結果為調用結果為報錯調用結果為調用結果為方法判斷指定類型是否出現(xiàn)在當前對象的原型鏈中調用結果為轉換數(shù)組提供了兩種方法用于數(shù)組的轉 Array類型檢測數(shù)組示例代碼: var arr = [1,2,3,4,5]; console.log(arr instanceof Array);/...

KnewOne 2019-08-26 12:17 評論0 收藏0