JavaScript面向?qū)ο缶幊獭?

付倫發(fā)布于2019-08-26 12:13 / 1254人閱讀

摘要：類型的屬性所有函數(shù)都具有的屬性定義函數(shù)原型的默認值是空對象函數(shù)包含構(gòu)造函數(shù)所有引用類型其實都是構(gòu)造函數(shù)獲取原型通過下面代碼方式獲取對象的原型，從而設(shè)置共享的屬性和方法。屬性是指定構(gòu)造函數(shù)的屬性。通過構(gòu)造函數(shù)創(chuàng)建對象表示當前的數(shù)組

原型的概念 原型是什么

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

 Function類型的屬性 -> 所有函數(shù)都具有的屬性
console.log(Function.prototype);
// 定義函數(shù)
function fn(){
    console.log("this is function");
}
// 原型的默認值是空對象
console.log(fn.prototype);
// 函數(shù)包含構(gòu)造函數(shù) -> 所有引用類型其實都是構(gòu)造函數(shù)
console.log(Number.prototype);

console.log(Object.prototype);

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

獲取原型

通過下面代碼方式獲取對象的原型，從而設(shè)置共享的屬性和方法。

function fn(){
    console.log("this is function");
}
// 使用訪問對象的屬性語法結(jié)構(gòu)
console.log(fn.prototype);
console.log(fn["prototype"]);
// Object類型提供getPrototypeOf()方法
console.log(Object.getPrototypeOf(fn));

原型的屬性和方法

function fn(){
    console.log("this is function");
}
// 變量proto也是一個空對象
// var proto = fn.prototype;

// 新增屬性或方法
// proto.name = "張無忌";
fn.prototype.name = "張無忌";
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, "age", {
    value : 18,
    enumerable : true
});
console.log(fn.prototype);

原型屬性 自主屬性與原型屬性

1.自有屬性：通過對象的引用添加的屬性。其他對象可能無此屬性；即使有，也是彼此獨立的屬性。
2.原有屬性：從原型對象中繼承來的屬性，一旦原型對象中屬性值改變，所有繼承自該原型的對象屬性均改變。

// 定義構(gòu)造函數(shù)
function Hero(){
    this.name = "張無忌";
    this.sayMe = function(){
        console.log("this is function");
    }
}
// 操作構(gòu)造函數(shù)Hero的原型
Hero.prototype.age = 18;
// 利用構(gòu)造函數(shù)來創(chuàng)建對象
var hero = new Hero();
console.log(hero);
// 為構(gòu)造函數(shù)的原型新增的屬性 -> 構(gòu)造函數(shù)創(chuàng)建的對象中依舊可以訪問
console.log(hero.age);// 18
// 對象hero中不存在age屬性
var result = Object.getOwnPropertyDescriptor(hero, "age");
console.log(result);

檢測自有或原型屬性

function Hero(){
    // this.name = "張無忌";// 自有屬性
}
// Hero.prototype.name = "周芷若";

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

擴展屬性或方法

通過原型可以為指定構(gòu)造函數(shù)或?qū)ο髷U展其屬性或方法。

function fn(){
    console.log("this is function");
}
// 變量proto也是一個空對象
// var proto = fn.prototype;

// 新增屬性或方法
// proto.name = "張無忌";
fn.prototype.name = "張無忌";
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, "age", {
    value : 18,
    enumerable : true
});
console.log(fn.prototype);

重寫原型屬性

通過構(gòu)造函數(shù)或?qū)ο蟮淖杂袑傩钥梢灾貙懺偷膶傩?/p>

// 定義構(gòu)造函數(shù)
function Hero(){
    this.name = "張無忌";
}
// 構(gòu)造函數(shù)的原型
Hero.prototype.name = "周芷若";
// 構(gòu)造函數(shù)創(chuàng)建對象
var hero = new Hero();
// 自有屬性與原型屬性同名時，默認訪問的是自有屬性 -> 自有屬性的優(yōu)先級別高于原型屬性
console.log(hero.name);// 張無忌

// 刪除對象的屬性
delete hero.name;
// 重新訪問對象的屬性
console.log(hero.name);// 周芷若

刪除屬性

通過delete關(guān)鍵字可以刪除對象的屬性，如果該對象即具有原型屬性又具有自有屬性，首先就要刪除自有屬性，再刪除原型屬性。

function Hero（）{}
Hero.prototype = {
        name："Mary",salary:3800
};
var hero = new Hero();
hero.name = "Tom";

delete hero.name;//刪除Tom
console.log（hero.name）；//Mary

delete hero.name；//刪除Mary
console.log（hero.name）；//undefined

isPrototypeOf（）方法

每個對象中都會基友一個isPrototypeOf（）方法，該方法用來判斷一個對象是否是另一個對象的原型。

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

console.log(result);

——proto——屬性

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

console.log(result);

上述代碼中說明hero對象存在一個指向構(gòu)造函數(shù)Hero的原型，這個鏈接被叫做——proto——屬性。
需要注意的是——proto——屬性與prototype屬性并不等價。——proto——屬性只能調(diào)試時使用。
——proto——屬性是指定對象的屬性。
prototype屬性是指定構(gòu)造函數(shù)的屬性。

擴建內(nèi)建對象

JavaScript中的內(nèi)置對象有些也具有prototype屬性，利用內(nèi)置對象的prototype屬性可以為內(nèi)置對象擴展屬性或方法。
通過原型擴展內(nèi)置對象的屬性和方法非常靈活，根據(jù)個性化要求制定JavaScript語言的具體內(nèi)容。一般建議謹慎使用這種方法，如果JavaScript的版本更新是可能會提供個性化的屬性或方法，導致沖突。

Object.prototype.sayMe = function(){
    console.log("this is sayMe function");
}
// 通過Object構(gòu)造函數(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

GPU云服務(wù)器云服務(wù)器 javascript面向?qū)ο缶幊?/a> javascript面向?qū)ο缶幊讨改?/a> 面向?qū)ο缶幊?/a> javascript 面向?qū)ο?/a>

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108262.html

發(fā)表評論

登陸后可評論

0條評論

付倫

男|高級講師

我要關(guān)注我要私信

TA的文章

金勝維固態(tài)硬盤MK8115主控開卡成功教程

閱讀 4843·2021-10-13 09:39
「Mobi.css」輕量，靈活的移動端 css library， built with love

閱讀 1962·2019-08-29 11:12
Web前端開發(fā)規(guī)范文檔

閱讀 1154·2019-08-28 18:16
js知識梳理5：關(guān)于函數(shù)的要點梳理(1)

閱讀 1868·2019-08-26 12:16
JavaScript面向?qū)ο缶幊獭?/a>

閱讀 1255·2019-08-26 12:13

前端面試每日3+1（周匯總2019.08.25）

閱讀 3001·2019-08-26 10:59
防止按鈕在短時間內(nèi)被多次點擊多次觸發(fā)事件

閱讀 2308·2019-08-23 18:27
Git常用命令小結(jié)

閱讀 2999·2019-08-23 18:02

JavaScript面向?qū)ο缶幊獭?

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

相關(guān)文章

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

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

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

Javascript面向對象編程

JS對象(1)重新認識面向對象

***JavaScript設(shè)計模式與開發(fā)實踐 | 01 - 面向對象的JavaScript***

發(fā)表評論

0條評論

付倫

男|高級講師

TA的文章

金勝維固態(tài)硬盤MK8115主控開卡成功教程

「Mobi.css」輕量，靈活的移動端 css library， built with love

Web前端開發(fā)規(guī)范文檔

js知識梳理5：關(guān)于函數(shù)的要點梳理(1)

JavaScript面向?qū)ο缶幊獭?/a>

前端面試每日3+1（周匯總2019.08.25）

防止按鈕在短時間內(nèi)被多次點擊多次觸發(fā)事件

Git常用命令小結(jié)

最新活動