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

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

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

原型的概念 原型是什么

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

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

console.log(Object.prototype);

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

獲取原型

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

function fn(){
    console.log("this is function");
}
// 使用訪問對(duì)象的屬性語法結(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也是一個(gè)空對(duì)象
// 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.自有屬性：通過對(duì)象的引用添加的屬性。其他對(duì)象可能無此屬性；即使有，也是彼此獨(dú)立的屬性。
2.原有屬性：從原型對(duì)象中繼承來的屬性，一旦原型對(duì)象中屬性值改變，所有繼承自該原型的對(duì)象屬性均改變。

// 定義構(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)建對(duì)象
var hero = new Hero();
console.log(hero);
// 為構(gòu)造函數(shù)的原型新增的屬性 -> 構(gòu)造函數(shù)創(chuàng)建的對(duì)象中依舊可以訪問
console.log(hero.age);// 18
// 對(duì)象hero中不存在age屬性
var result = Object.getOwnPropertyDescriptor(hero, "age");
console.log(result);

檢測(cè)自有或原型屬性

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

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

擴(kuò)展屬性或方法

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

function fn(){
    console.log("this is function");
}
// 變量proto也是一個(gè)空對(duì)象
// 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)建對(duì)象
var hero = new Hero();
// 自有屬性與原型屬性同名時(shí)，默認(rèn)訪問的是自有屬性 -> 自有屬性的優(yōu)先級(jí)別高于原型屬性
console.log(hero.name);// 張無忌

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

刪除屬性

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

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（）方法

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

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

console.log(result);

——proto——屬性

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

console.log(result);

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

擴(kuò)建內(nèi)建對(duì)象

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

Object.prototype.sayMe = function(){
    console.log("this is sayMe function");
}
// 通過Object構(gòu)造函數(shù)創(chuàng)建對(duì)象
var obj = new Object();

obj.sayMe();


Array.prototype.inArray = function(color){
    // this - 表示當(dāng)前的數(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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108262.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

付倫

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

相關(guān)文章

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

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

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

Javascript面向對(duì)象編程

JS對(duì)象(1)重新認(rèn)識(shí)面向對(duì)象

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

發(fā)表評(píng)論

0條評(píng)論

付倫

男|高級(jí)講師

TA的文章

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

「Mobi.css」輕量，靈活的移動(dòng)端 css library， built with love

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

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